Should HTML 5 semantic markup be used for styling in general?

Question

I have to admit that the semantic markup of HTML5 confuses me. I am talking about these tags, in particular:

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

Using semantic elements provides UA information that it usually cannot get from <div> , but should they be used with <div> tags, or should you / should you properly impose semantic markup?

In other words, what is the right approach?

It:

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

Or that:

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

Answer 1

If you use semantic markup tags, you shouldn't use split tags for the same thing either. Semantic tags replace some div tags.

Div tags, of course, are still useful as a semantic tag is not suitable.

Answer 2

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

The div tag will mean the section of the page that is intended for content, and then the section tag is something like posts.

Answer 3

Here is a good article about this issue: http://www.nczonline.net/blog/2011/03/22/using-html5-semantic-elements-today/

According to Zakas (actually, Tantek Celik), this is the way to go:

 <section><div class="section"> <!-- content --> </div></section> 

A quote from the blog post below regarding style:

For style, Tantek recommended not trying to style the HTML5 element, but rather, to fine-tune the surrogate. So instead:

 section { color: blue; } 

Use this:

 .section { color: blue; } 

Answer 4

Since new tags are not always recognized by browsers, even as candidates for styles, using a div with a class safer. You also have the option of using only div with class , as before, and you are not losing anything now or in the foreseeable future. No software cares about the "semantics" of new tags.

Answer 5

The first example is safer to use.

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

is the content.

To create this content, you can wrap it inside a container, for example. div using style hook (class) and apply style to it.