Ad

Nesting Of The HTML5 Nav And Other Semantic Elements

- 1 answer

When using the <nav> element in HTML, how should you handle navigation elements that contain links as well as other content (such as the logo in the example below)?

I find myself containing everything in a <nav> element:

<nav>      
  <div class="logo"></div>
  <div class="links">
    <a href>One</a>
    <a href>Two</a>
    <a href>Three</a>
  </div>
</nav>

But should I only be wrapping the actual navigation elements in a <nav>? (The links in this case)

<div class="nav">      
  <div class="logo"></div>
  <nav>
    <a href>One</a>
    <a href>Two</a>
    <a href>Three</a>
  </nav>
</div>

The same could apply to some of the other tags, such as <time>, if it contained extra data:

<div class="time">
  Article posted: <time>2016-09-16</time>
</div>

vs

<time>
  Article posted: <span>2016-09-16</span>
</time>

I'm not talking about the readability of the code, but about optimizing the markup structure for the benefit of crawlers (SEO) and accessibility.

Edit: The logo is just an example. Frequently there is much more content, I just used the logo as an example for brevity.

Ad

Answer

An HTML element should only contain content that matches the element’s definition (or that is relevant for the element’s purpose).

The nav element is for "links to other pages or to parts within the page", so the logo should not be included, unless it’s a link to the homepage, or if it’s needed for context (see for example the last example in the HTML5 spec, which shows that nav can also contain text that serves as context for the links).

If the logo (or whatever other content) were "tangentially related" to the content in the nav, you could use the aside element.

The time element is for "dates, times, time-zone offsets, and durations", so the label "Article posted" should not be included. With time, you mark up the date, not any additional stuff.

The decision is not always a clear one, though. It might help to think of conceivable use cases (e.g., what could a consumer do with the content of a specific element), and decide if the content in question would typically be expected for that purpose (primarily based on the definition and examples in the spec).

Ad
source: stackoverflow.com
Ad