Do I need all these HTML5 tags for my site’s master header?

Question

I began learning html/css and throughout my learning I have seen the idea of semantics stressed heavily. Most of the time I understand what I should be using and everything works out fine. But there are many times when it feels like there are far too many tags for something simple, for instance:

suppose I have a master header on my site with some links for navigation, semantically I get this:

<section id="masterHeader">
    <header>
        <nav>
            <ul>
                <li><a href="#"> link </a></li>
            </ul>
        </nav>
     </header>
</section>

Is this too much, or should I be doing this as it does make complete sense? It just seems like a lot of unneeded tags.

Answer 1

The purpose of semantically designing a page is not because it is easier for you as a designer to read (though thats a good benefit) or because it is more lightweight (it often isnt). Rather, the purpose of semantic design is to add meaning to your code that simply making divs with IDs and classes cannot accomplish. A search engine crawling your site can, ostensibly understand your code far better when it is semantically marked up.

The problem is, IE8 and lower do not natively support these semantic elements and thus require a js shiv. But then your layout breaks in IE8 and lower if they have JS disabled. This is a tradeoff you will have to seriously weigh before you consider using HTML5 elements as your layout WILL break in IE8-6 with no-js.

Also, I would argue that the section element is not semantically correct in your usage here (but I may be wrong, I'd have to check the w3c spec). But that is neither here nor there, and mostly just nit-picking.

Answer 2

it seems quite unnecessary to have your header tag within the section tags. instead, it should look something like this:

<header id="masterHeader">
    <nav>
        <ul>
            <li><a href="#"></a></li>
        </ul>
    <nav>
</header>