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>

```