What HTML 5 tag is best suited for pagination container?

Question

I have a div with only pagination related content within it. What is the best element/tag to use?

I looked into <nav> but it is not suited as pagination is not major navigation.

<div class="paginationBar">
    <button class="previous">Previous</button>
          <button>1</button>
          <button>2</button>
          <button>3</button>
    <button class="next">Next</button>
</div>

The outer div to me seems like it could be aside since it is related to the main section and is outside of an article element.

Any other suggestions to improve / fix my code are very welcome.

Answer 1

nav is the correct container if the pagination is the main way to navigate content in that ancestor sectioning element (not the whole page!). See my answer (to a similar question) with some examples.

Using aside for the pagination is probably not the right element. However, it might be correct to use nav inside aside, if it is the major navigation for that aside content.

You should use a instead of button, as the pagination (as the name implies) leads to a different page/URL. Then you could use the rel values next and prev for the corresponding pagination links. If you insist on using button but you still have separate pages, you could use the link element to provide these rel values.

Answer 2

I think you don't need that element at all. Your buttons belong together and should stay together, like

<div class="paginationBar">
    <button class="previous">Previous</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button class="next">Next</button>
</div>

It's pretty easy to insert the dynamic buttons where you want them either on the back-end or front-end ( jQuery's .insertAfter() for example )

---

In case you don't have to support some old IE you can get rid of classes on your buttons as well and use :first-child - :last-child to style those:

<div class="paginationBar">
    <button>Previous</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>Next</button>
</div>

---

UPDATE

Talking about the button container the most appropriate tag is probably the <nav>.

Other possible uses of <nav>

1. Table of Contents
2. Previous/next buttons (or pagination)
3. Search form
4. Breadcrumbs

SOURCE