Question

I must admit the HTML5 semantic markup confuses me. I’m talking about these tags in particular:

<header>
<nav>
<section>
<article>
<aside>
<footer>

Using semantic elements provides the UA with information it couldn’t normally get from a <div>, but should they be used along with <div> tags or can/should you style the semantic markup directly?

In other words, what is the proper approach?

This:

<div id="content">
    <section>
        <h1>Lorem ipsum></h1>
        <p>Text</p>
    </section>
</div>

Or this:

<section id="content">
    <h1>Lorem ipsum></h1>
    <p>Text</p>
</section>

Answer 1

If you are using the semantic markup tags, you should not also use division tags for the same thing. The semantic tags are a replacement for some of the div tags.

The div tags are of course still useful, for when there is no semantic tag that fits.