So I’ve been playing around with the HTML of a website that I am redesigning. And thanks to the HTML5 shiv, I’ve been using shiny new HTML5 tags very liberally. Consequently, I’m starting to feel like I have a lot of tag clutter. For example:
<header>
<nav>
<h1 id="logo"><a href="/">Logo Image CSS'd in here</a></h1>
<ul>
<li><a href="/page-1">Page 1</a></li>
<li><a href="/page-1">Page 2</a></li>
<li><a href="/page-1">Page 3</a></li>
<!-- etc. -->
</ul>
</nav>
</header>
I’ve included my logo in <nav> because I had space constraints and I removed the explicit Home link (My home page is just a summary of the content of the sub-pages with inline links to them). So semantically, I assumed that an HTML5 document should have both the <header> and <nav>. After all, a <nav> alone doesn’t imply that it is the main page navigation (I use <nav> to wrap my breadcrumbs and footer links) and I feel that my <ul> floating in <header> is missing a <nav> tag.
So am I being an HTML5 hipster and overusing it here? Or is this overtagging (especially since the <header> tag has all of the styling, and the <nav> has none) unnecessary?
Well semantics doesn’t care about whether an element is going to be styled in the end. It cares about outlining the page in an understandable way. By just putting all those links inside the
<header>element with the logo, they don’t necessarily mean anything. But by putting them inside a<nav>element, you’re indicating it’s navigation, which means quite a lot, even if the presence of the<nav>element isn’t clear to the user via styling.I personally don’t use the extra unordered list inside the nav element. I’ve never really understood the argument for using lists for navigation other than the extra elements to style, which seems fairly unsemantic to me.