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?