Il markup semantico HTML 5 dovrebbe essere utilizzato per lo stile?

Question

Devo ammettere che il markup semantico HTML5 mi confonde. Sto parlando di questi tag in particolare:

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

Utilizzando elementi semantici fornisce al UA con le informazioni non potrebbe normalmente ottenere da un <div>, ma dovrebbero essere utilizzati insieme con <div> tag o possono/devono hai stile direttamente la marcatura semantica?

In altre parole, qual è l'approccio corretto?

questo:

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

O questo:

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

Answer 1

Se si utilizzano i tag di markup semantico, non si dovrebbero utilizzare tag di divisione per la stessa cosa. I tag semantici sono una sostituzione di alcuni dei tag div.

I tag div sono ovviamente ancora utili, per quando non esiste un tag semantico adatto.

Answer 2

Credo che il vostro primo esempio è semanticamente corretto, supponendo che si avrebbe più section tag che div tag.

Il tag div implicherebbe una sezione della pagina che è per il contenuto e quindi il tag section qualcosa di simile a post.

Answer 3

Ecco un buon articolo su questo problema: http://www.nczonline.net/blog/2011/03/22/using-html5-semantic-elements-today/

Secondo Zakas (Tantek Çelik in realtà), questa è la strada da percorrere:

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

citazione dal post sotto per quanto riguarda lo styling:

Per lo styling, Tantek ha consigliato di non provare lo stile dell'elemento HTML5 ma piuttosto di assegnare uno stile al surrogato. Così, invece di questo:

section { 
    color: blue; 
} 

Utilizzare questa:

.section { 
    color: blue; 
} 

Answer 4

Dal momento che i nuovi tag non sono universalmente riconosciuti dai browser, anche come candidati per lo styling, utilizzando div con class è più sicuro. Hai anche la possibilità di utilizzare solo div con class come prima, e non perdere nulla ora o nel prossimo futuro. Nessun software si occupa della "semantica" dei nuovi tag.

Answer 5

Il primo esempio è più sicuro da utilizzare.

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

è il contenuto.

Per lo stile di questo contenuto è possibile avvolgerlo in un contenitore es.div con un hook di stile (classe) e applica lo stile ad esso.