CODEWITHSUNDEEP
htmlsemantic-websemantic-markup
DominicM
DominicM

Reputation: 6908

What HTML 5 tag is best suited for pagination container?

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.

Upvotes: 8

Views: 24981

Answers (5)

unor
unor

Reputation: 96737

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.

Upvotes: 20

jackvsworld
jackvsworld

Reputation: 1561

As others have pointed out, the best way is to use <nav> with anchor tags. Here is an example with 5 pages where the current page number is 3:

<nav>
  <ul class="pagination">
    <li><a href="?page=1" rel="first">First</a></li>
    <li><a href="?page=2" rel="prev">Previous</a></li>

    <li><a href="?page=1">1</a></li>
    <li><a href="?page=2">2</a></li>
    <li class="active"><a href="?page=3">3</a></li>
    <li><a href="?page=4">4</a></li>
    <li><a href="?page=5">5</a></li>

    <li><a href="?page=4" rel="next">Next</a></li>
    <li><a href="?page=5" rel="last">Last</a></li>
  </ul>
</nav>

The reason the anchor tags are so important is because the rel attribute makes your pages crawlable.

Also note that if your environment has bootstrap.css loaded then it will automatically recognize the pagination and active CSS classes. You should provide your own styles for these classes as a fallback in case bootstrap.css is not loaded. The result should look something like this:

simple pager

Now you can use JavaScript to intercept the <a> element's click event and fetch the next page using whatever technique you prefer.

Upvotes: 3

Hikari
Hikari

Reputation: 3947

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

That helps a bit

Upvotes: 0

boferri
boferri

Reputation: 696

Please have a look at the XHTML Vocabulary. It includes link relation types for next, prev etc.

edit: link relation types in HTML 5

Upvotes: 0

Zoltan Toth
Zoltan Toth

Reputation: 47685

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

Upvotes: 7

Related Questions