CODEWITHSUNDEEP
html
Bailey Parker
Bailey Parker

Reputation: 15905

Is HTML5 for the Sake of HTML5 Bad?

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?

Upvotes: 5

Views: 172

Answers (3)

Paul Way
Paul Way

Reputation: 1951

What you have looks good. If you wanted to be picky, then your header logo could be outside your nav (you can float the nav with css to fit the space constraints). However, since your logo is arguably part of the navigation (since it's your home link), I think you're fine to include it.

Boilerplate can be somewhat daunting, so I like to show people this as a reference: https://github.com/impressivewebs/Easy-HTML5-Template/blob/master/index.html

Upvotes: 1

animuson
animuson

Reputation: 54729

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.

Upvotes: 1

Michael Mior
Michael Mior

Reputation: 28752

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.

Upvotes: 2

Related Questions