seo Question posted in
Some basic information to get you started with this can be found here.

Nesting of the HTML5 nav and other semantic elements – SEO

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.

Tags:

4

Answers


  1. 0

    The <nav> wrapper is meant to designate major blocks of navigation links. It will accept any tag that falls in the “flow content” category.

    There’s nothing in the spec that specifically prohibits putting an icon in there, but unless the logo is a clickable link (as it often is) I would suggest leaving it outside the nav tag.

    Login or Signup to reply.
  2. 0

    Personally I think is better for both SEO and accessibility to keep the content of the nav related to navigation elements, that is the expectation and the usage of that html tag even if is not invalid html having other mark up inside.

    To provide you with an actual example of where that approach might cause some issues, some websites provide the possibility for users that can’t use a mouse to skip directly to some sections of a webpage with the tab key, thanks to “Skip Navigation” Links hidden in the very top of the page, http://webaim.org/techniques/skipnav/. In this scenario the expectation of the user is to than navigate straight away the menu items, however if there is extra mark up before it might get stuck tabbing through all those other elements before reaching the links.

    Hope this helps

    Login or Signup to reply.
  3. 0

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

    Login or Signup to reply.
  4. 0

    As others have mentioned, items inside of the ‘nav’ element should be navigational links. The logo could click to home, so it could be considered a navigational link (although this might not a little unusual), while other elements (such as a non-link page title, paragraph text, a date or some other non-navigational content) would be invalid.

    Using semantic html properly is very important for the machine technologies that read your code. This applies to screen readers, SEO crawlers and even browsers. As someone else had mentioned, the time element is meant to include content in a machine readable format – this way it can be added to a users calendar with a simple click (in some devices/browsers), as well as be announced as a time element to screen readers and other tech that might leverage it. Putting non-date/time content in that block will prohibit that functionality. In other examples, breaking the semantic best practices will cause your app to become less accessible and/or less SEO friendly.

    This is a Success criteria covered by the WCAG (Web Content Accessibility Guidelines): WCAG – Using semantic elements to mark up structure

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search