Which HTML 5 tag is best for a pagination container?

Question

I have a div that only contains the pagination section. What is the best item / tag to use?

I looked over the <nav> , but that doesn't work, as pagination is not the main 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 seems to me that it can be aloof, since it is connected with the main section and is outside the element of the article.

Any other suggestions for improving / fixing the code are very welcome.

Answer 1

I think you do not need this element at all. Your buttons belong together and must stay together, for example

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

It is very easy to insert dynamic buttons where you want them either on the back-end or on the front-end (e.g. jQuery .insertAfter() )

---

If you do not need to support some old IE, you can also get rid of the classes on your buttons and use :first-child - :last-child for their styles:

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

---

UPDATE

Speaking of a button container, the most appropriate tag is probably <nav> .

Other possible uses of <nav>

• Content
• Previous / next buttons (or pagination)
• Search form
• Breadcrumbs

A SOURCE

Answer 2

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

Using aside for pagination is probably not the right element. However, it may be correct to use nav inside aside if this is the main navigation for this aside content.

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

Answer 3

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 why anchor tags are so important is because the rel attribute makes your pages full.

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

Now you can use JavaScript to capture the <a> element click event and select the next page using whatever technique you prefer.

Answer 4

Please check out the XHTML Vocabulary . It includes link relationship types for next, prev, etc.

edit: link relationship types in HTML 5

Answer 5

 <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> 

It helps a little