HTML 5 – section

Hoy comenzamos con la revisión de la especificación html 5 y en esta ocasión nos centraremos en el tag section.

Este elemento se utiliza para darle una nueva estructura al código, por ejemplo en este código se ve una estructura de html 5 con varios nuevos elementos

HTML:
  1. <header>
  2.   <p>Cabecera</p>
  3. </header>
  4. <nav>
  5.   <p>Menu de navegacion</p>
  6. </nav>
  7. <section>
  8.   <p>Seccion</p>
  9.     <article>Articulo</article>
  10. </section>
  11. <footer>
  12.   <p>Pie de pagina</p>
  13. </footer>

Si nos damos cuenta la estructura es más fácil de entender ya que los nuevos elementos le dan una estructura definida y una forma que al solo leer los elementos involucrados se saben las partes que están dentro del sitio.
En cuanto al tag section viene unido a acción de ordenar semánticamente el código, ojo que no viene a sustituir los div, ya que si lo que se busca es dar estilos al código para por ejemplo utilizar efectos javascript conviene tener divs y no section o articles.
En esta página encontré un resumen super bueno de lo que no se debe hacer al usar el tag section y la voy a traducir.

  • No use section cuando quieras utilizarlo para dar estilos o ejecutar scripting
  • No lo use si los tag nav, articles o aside es más apropiado
  • No lo uses si a continuación de abrir la etiqueta no viene un título

En resumen un interesantenuevo tag con el que se pueden construir sitios más semanticamente correctos.

Espero les sirva

saludos tuto

2 thoughts on “HTML 5 – section

  1. Pingback: HTML 5 – nav : Dakoo

  2. tengo una duda, echandole un ojo a las especificaciones,
    parece que se una section va dentro de un article y no al reves
    hay algun problema en ello?

    Con respecto al css no puedo aplicarle estilos a estas etiquetas(section, article)

    gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>