Nesting Of The HTML5 Nav And Other Semantic Elements
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> <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>
<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.
An HTML element should only contain content that matches the element’s definition (or that is relevant for the element’s purpose).
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
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).
- → October CMS create a multi select Form field
- → How to update data attribute on Ajax complete
- → laravel blade templating error
- → should I choose reactjs+f7 or f7+vue.js?
- → How to dynamically add class to parent div of focused input field?
- → Setting the maxlength of text in an element that is displayed
- → Expanding search bar not expanding before search
- → Get the calling element with vue.js
- → Blade: how to include a section in one page but not in another
- → How to print/log reactjs rendered dom?
- → how to write react component to construct HTML DOM