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

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