Vamos a ver la nueva etiqueta section HTML5 que sirve para definir una sección o agrupación temática del contenido de una página web.
La agrupación de código en esta etiqueta HTML5 debería contener:
No confundir con la etiqueta nav, nav sólamente contiene enlaces a las diferentes secciones de la web.
Vamos a ver la sintaxis de este elemento HTML5 extraída de su web oficial:
<section> <!-- Código HTML --> </section>
Podemos ver como section tiene sus etiquetas de apertura y cierre, el código que se encuentre entre ambas se considerará perteneciente a una sección o contenido temático de la web.
Dentro de etiqueta section pueden ir otras como por ejemplo:
Os pongo un código de ejemplo interactuando con las etiquetas header, footer y article:
<section> <header><h2>Noticias relacionadas</h2></header> <article> <header> <h1>Noticia 1</h1> <p>Texto descriptivo 1</p> </header> <footer> <p>Publicado el XXX del XXX de XXX</p> </footer> </article> <article> <header> <h1>Noticia 2</h1> <p>Texto descriptivo 2</p> </header> <footer> <p>Publicado el XXX del XXX de XXX</p> </footer> </article> </section>
Explico el código superior:
En este post recopilo estas etiquetas: