Should HTML 5 semantic markup be used for styling at all?

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.

Answer 2

I believe your first example is semantically correct, assuming you would have more section tags in that div tag.

The div tag would imply a section of the page that is for content, and then the section tag something like posts.