CODEWITHSUNDEEP
htmlpaginationsemantic-markup
Renan Gomes
Renan Gomes

Reputation: 829

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?

Upvotes: 10

Views: 5979

Answers (3)

legostud
legostud

Reputation: 1

Depends on how you use your pagination. If you're doing it for search results and clicking the page link takes the user to a new url, then yes. If clicking the page button triggers a refresh of the search result content, then no.

the Nav element is designed to help users find links to other pages not to a set of button controls for a widget.

Upvotes: 0

unor
unor

Reputation: 96697

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>

Upvotes: 14

c4urself
c4urself

Reputation: 4287

Interesting question.

As per the official W3 Draft it seems that the nav would indeed be appropriate for use as a pagination container, particularly if it's intended for primary navigation (that is the whole page is a result set that can be paged through)

Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.

Upvotes: 3

Related Questions