Estilo Elementos HTML5

Question

Sé que es incorrecto diseñar una etiqueta <section>, pero ¿qué hay de las etiquetas <header> y <footer>? Si el uso de estas etiquetas proporciona un marcado más semántico, se deben usar, sin embargo, si no se pueden diseñar, entonces un <div> aún debería insertarse dentro de la etiqueta para envolver el contenido y darle un estilo.

Sé que <header> se puede diseñar, pero no estoy seguro si es correcto hacerlo.

Así que la pregunta es: ¿Deben las etiquetas html5 diseñarse o debe colocarse un <div> dentro para encargarse del diseño?

Answer 1

Nada en la especificación dice que no se puede o no se deben diseñar elementos HTML5 como <section> o <article>. Solo dice que no debe colocar un elemento semántico HTML5 en algún lugar 'por el bien de' diseñando algo. Use un <div> en su lugar.

Así que si usted tiene una razón semántica para añadir el <section> o <article> en alguna parte, entonces por todos los medios añadirlo Y también se sienten libremente para diseñarlo así. Pero si tiene que envolver una sección de su marcado para fines de diseño (por ejemplo, para agregar un borde, o flotar a la izquierda, etc.), pero esa sección no tiene ningún significado semántico en su marcado, entonces use un <div> .

Por ejemplo:

<div class="mainBox"> 
    <nav class="breadcrumbs"> 
     <ol> 
      <li>...list of links (snip)....</li> 
     </ol> 
    </nav> 

    <section> 
     <h1>Latest Tweets From Twitter</h1> 

     <article> 
      //... a Tweet (snip)... // 
     </article> 

     <article> 
      //... a Tweet (snip)... // 
     </article> 

     //... lots more Twitter posts (snip)... // 

    </section> 

</div> 

El elemento <section> es la parte principal de su página (. Es decir, su lista de tweets) y también tiene un título en el inicio que se requiere. Pero está envuelto en un elemento div.mainBox porque tal vez quieras envolver un borde alrededor de las partes de las migas y secciones, es decir. es puramente por estilo. Pero no hay nada que le impida diseñar los elementos <section> y <article> también.

Answer 2

No es incorrecto aplicar estilo a estas etiquetas, pero no son solo para fines de diseño ya que sirven para una función semántica. Por supuesto, escriba los elementos que necesita usar, pero no los agregue para lograr estilos que arruinen la semántica.

Dicho esto, también debe tener cuidado con el diseño ya que no son reconocidos por todos los navegadores. Por ejemplo, IE6 y 7 no aplicarán los estilos ya que no reconocerán los nombres de los elementos. Puede solucionar esto en IE7 usando etiquetas ARIA que le permitirán un cierto control de estilo.