¿Se debería usar el marcado semántico HTML 5 para el diseño?

Question

Debo admitir que el lenguaje semántico HTML5 me confunde. Estoy hablando de las siguientes etiquetas en particular:

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

El uso de elementos semánticos proporciona la UA con la información que normalmente no se pudo obtener de un <div>, pero deben utilizarse junto con <div> etiquetas o puede/debe Usted estilo el marcado semántico directamente?

En otras palabras, ¿cuál es el enfoque adecuado?

Este:

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

O esto:

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

Answer 1

Si está utilizando las etiquetas de marcado semántico, tampoco debería usar etiquetas de división para la misma cosa. Las etiquetas semánticas son un reemplazo para algunas de las etiquetas div.

Las etiquetas div siguen siendo útiles, por supuesto, cuando no hay una etiqueta semántica que se ajuste.

Answer 2

Creo que su primer ejemplo es semánticamente correcto, suponiendo que tendría más section etiquetas en que div etiqueta.

La etiqueta div implicaría una sección de la página que es para el contenido, y luego la etiqueta section algo así como las publicaciones.

Answer 3

He aquí un buen artículo sobre este tema: http://www.nczonline.net/blog/2011/03/22/using-html5-semantic-elements-today/

Según Zakas (Tantek Çelik en realidad), este es el camino a seguir:

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

Presupuesto de la entrada del blog a continuación en relación con el estilo:

Para el diseño, Tantek recomienda no intentar diseñar el elemento HTML5 , sino más bien darle un estilo al sustituto. Así que en lugar de esto:

section { 
    color: blue; 
} 

Utilice esta:

.section { 
    color: blue; 
} 

Answer 4

Dado que las nuevas etiquetas no son universalmente reconocidos por los navegadores, incluso como candidatos para el peinado, utilizando div con class es más seguro. También tiene la opción de usar solo div con class como antes, y no pierde nada ahora o en un futuro previsible. A ningún software le importa la "semántica" de las nuevas etiquetas.

Answer 5

El primer ejemplo es más seguro de usar.

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

es el contenido.

Para darle estilo a este contenido, puede envolverlo dentro de un contenedor, por ej.div con un gancho de estilo (clase) y aplicarle estilo.