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?
That seems like a pretty reasonable structure. I assume you're using at least one of header
or nav
to style elements on the page anyway. And both serve to provide information on the page structure.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With