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.

Answer 3

The first example is more safer to use.

<section>
  <h1>Lorem ipsum></h1>
  <p>Text</p>
</section>

is the content.

In order to style this content you can wrap it inside a container eg. div with a style hook(class) and apply style to it.

Answer 4

Since the new tags are not universally recognized by browsers, even as candidates for styling, using div with class is safer. You also have the option of using just div with class like before, and you don't lose anything now or in the foreseeable future. No software cares about the “semantics” of the new tags.