Geek Answers Handbook

Can I use the <nav> tag for pagination?

You can often see the use of the <nav> in navigating the main menu, but I don’t know of other examples where I can use it. For example, for pagination:

 <div class='my-pagination'> <!-- first, 2, 3, 4 ... 8, 9, last --> </div>

May be:

 <nav class='my-pagination'> <!-- first, 2, 3, 4 ... 8, 9, last --> </nav>

Is it semantic?

+4
source share
2 answers

Yes.

The HTML5 specification defines the nav element as follows:

The nav element represents a section of a page that links to other pages or parts of a page: a section with navigation links.

Pagination clearly consists of “links to other pages”, and these are “navigation links”. And, probably, in most cases it makes sense to use a section content element for this.

Be sure to put nav in the correct parent section:

  • If it is a multi-page product, nav should be a child of article .

     <article> <h1>Review of my new camera</h1> <p>…</p> <nav><!-- pagination for this article --></nav> </article>

  • If its a multi-page list of article thiazers, nav should be a child of the section containing this list.

     <section> <h1>All blog posts</h1> <article><h1>Review of my new camera</h1></article> <article><h1>I want to buy a camera, any suggestions?</h1></article> <nav><!-- pagination for this blog posts list --></nav> </section>

  • If its one full article per page, nav should be a child of the root node of the body .

     <body> <article><h1>Review of my new camera</h1></article> <nav><!-- pagination for next/previous article --></nav> </body>
+4
source

Interest Ask.

According to the official W3 Draft, it seems that nav really suitable for use as a container for pagination, especially if it is intended for primary navigation (i.e. the whole page is a set of results that can be downloaded via)

Not all link groups on the page should be in the nav element - the element is mainly intended for sections that consist of the main navigation blocks. In particular, for footers, there is usually a short list of links to various pages of a site, such as the terms of service, home page, and copyright page. For such cases, one footer element is sufficient; while the nav element can be used in such cases, it is usually not needed.

+2
source

More articles:


All Articles