Search code examples
htmlpaginationsemantic-markup

Can I use the <nav> tag for pagination?


It's very common to see the usage of the tag <nav> in a main menu navigation, but I don't know other examples where I can use it. For example, for pagination:

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

Can be:

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

Is it semantic?


Solution

  • Yes.

    The HTML5 spec defines the nav element like this:

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

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


    Make sure to place the nav in the correct parent section:

    • If it’s a multi-paged article, the nav should be a child of the article.

      <article>
        <h1>Review of my new camera</h1>
        <p>…</p>
        <nav><!-- pagination for this article --></nav>
      </article>
      
    • If it’s a multi-paged list of article teasers, the 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 it’s one full article per page, the nav should be a child of the body sectioning root.

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