What is better:
<h1>Navigation</h1>
<nav>
<ul>
<li>...</li>
</ul>
</nav>
Or:
<nav>
<h1>Navigation</h1>
<ul>
<li>...</li>
</ul>
</nav>
Is there any significant difference?
What is better:
<h1>Navigation</h1>
<nav>
<ul>
<li>...</li>
</ul>
</nav>
Or:
<nav>
<h1>Navigation</h1>
<ul>
<li>...</li>
</ul>
</nav>
Is there any significant difference?
Having the heading inside the <nav>
container allows you to more easily style it, and manipulate the nav element as a whole. If you moved the <nav>
for instance, you'd likely want the heading to go with it. It just saves work and makes thing simpler to have it inside.
You will be able to style it using:
nav h1 {
style: something funky;
}
Instead of styling all h1 elements or giving it an ID.
If you're wondering about accessibility take a look here.
It is best to use a header inside the nav
as it is describing the section.
nav
is a sectioning element and as such, if you have a heading that describes the navigation it should be inside:Otherwise, the heading will be incorrectly associated with a different section altogether, rather than the
nav
element.The W3C HTML5 spec provides a near-identical example: