Cuales son los nuevos elementos estructurales del HTML5

<header>

• Añade una valiosa información semántica a las páginas y/o secciones
• Pueden crearse varios header en una página
• Puede incluir elementos nav en su interior.
• Suelen contener, por lo menos, un elemento de encabezado (h1-h6). Si contiene más de uno, se agruparán con el elemento estructural hgroup.
• Debe de espicificarse mediante CSS que, el elemento estructural header, es un elemento de bloque (display: block)*

* Los normalize para html5 y hojas genéricas de reset ya tienen en cuenta estos factores en los nuevos elementos estructurales del HTML5. Aun así, sigo sin recomendar su uso.

Ejemplo:

<article>
  <header>
    <h1>Guía: los nuevos elementos estrucurales del HTML5</h1>
    <p>Por mimedu</p>
  </header>
  <p>Contenido</p>
</article>

<section>

• Se emplea para dividir el contenido de una página en función de la temática (Diseño web, programación web, tiendas online…).
• También sirve para dividir el contenido de un artículo en subapartados (Introducción, contenido, conluciones…)
• El elemento estructural <section> suele contener un encabezado de cualquier nivel (h1-h6)

Importante: no confundir <section> con <article> ni usarlo para agrupar elementos.

Ejemplo:

<section>
    <h1>Diseño Gráfico</h1>
    <p>Logotipos, carteles publicitarios, web, ilustraciones, flyers… </p>
</section>

<article>

• Se utiliza para definir piezas de contenido con significado propio
• Son elementos estructurales básivos de sindicación
• No hay que relacionarlo solo con el texto, pueden contener videos o otros elementos básicos que por sí solos tengan sentido
• Normalmente suelen contener encabezado

Importante: <article> es uno de los elementos estructurales del HTML5 más confusos, ya que se suele confundir con <section>. Tampoco hay que usarlo para agrupar elementos.

Ejemplo:

<article>
    <h1>Diseño Web</h1>
    <p>El diseño web es una forma de comunicación, por …</p>
</article>

<aside>

• Se emplea para identificar fragmentos de contenidos sin aparente relación con el contenido principal, aunque sí que están <<tangencialmente relacionados>>
• Puede aplicarse a la hora de marcar listas de enlaces relacionados, información ampliada, tips o consejos, citas, titulares o resumentes, definiciones…
• Tienen que tener significado por si mismos
• El contenido principal, sin el elemento <aside>, debe de mantener su significado

Importante: no hay que confundirlo con un sidebar. En ocasiones se utiliza de forma errónea para identificar el contenido situado en una columna lateral.

Quizá el error provenga de la propia especificación del w3c: «… este tipo de secciones son a menudo representadas como sidebars en tipografía impresa.» Lo que olvida de aclarar el w3c es que, con tipogra impresa, se refiere a documentos impresos, como revistas, donde el contenido del sidebar sí se corresponde con su definición semántica en HTML5.

Ejemplo:

<aside>
    <h4>Destacado</h4>
    <p>Documentos que serán de su interes</p>

<div>…
</aside>

<footer>

• Se utiliza para contener el pie de página
• Puede haber varios footer. Cada <article> o <section> puede contener el suyo.
• La etiqueta <footer> no hace referencia a su ubicación, sino al tipo de contenido de almacena: copyright, autoría, comentarios, fecha de publicación…

Ejemplo:

<footer>
    <p>Me puedes encontrar en:</p>
    <p>Información de contacto: <a href=«mimedu@mimedu.es»>Correo de Mimedu</a>.</p>
</footer>

<nav>

• El contenido de este elemento debe de corresponderse con la navegación principal de la página donde nos encontremos.*
• Suele contener una lista, aunque no es obligatorio.
• Pueden existir varios elementos <nav> en una página: para la navegación principal o para la navegación principal de una <section> o <article>
• Se pueden utilizar para paginaciones, formularios de búsqueda, TOCs, breadcrumbs

* Importante: los enlaces patrocinados no se consideran elementos de navegación, así como los enlaces dentro del texto de un artículo o los enlaces en el pie hacia otras páginas del sitio.

Ejemplo:

<nav>
     <a href=«/diseno web/»>Diseño web</a>
<a href=«/portfolio/»>Portfolio</a>
<a href=«/blog/»>Blog de Mimedu</a>
<a href=«/contacto/»>Contacto</a>
</nav>

<hgroup>

• Es un contenedor de encabezados de modo que solo cuente el de nivel superior, ignorando los restantes de cara a la creación de la estructura jerárquica del documento.
• Se usa cuando el título va acompañado de un subtítulo y queremos que el primero sea el principal.
• Solo puede contener encabezados (<h1>-<h6>)

Ejemplo:

<hgroup>
     <h1>Diseñador web</h1>
<h2>Mimedu</h2>
</hgroup>

<figure>

• Incluye el contenido que queremos tratar como una figura: ilustraciones, diagramas, infografías…
• Puede ser una imagen, una serie de imágenes o su combinación con otros elementos como texto, video…
• No todas las imágenes son <figure>
• Debe de tener contenido que por sí mismo tenga significado como unidad; y que si lo eliminamos no modifique sustancialmente el contenido del elementos donde se encuentra.

Ejemplo:

<figure>
     <img src=«mimedu_foto.jpg» alt=«Mimedu» width=«304» height=«228»>
</figure>

<figcaption>

• Es el titulo o nombre del elemento <figure>
• No es obligatorio incluirlo
• Solo puedo existir uno
• Puede contener otros elementos como enlaces de autoría, etc.

Ejemplo:

<figure>
     <img src=«mimedu_captura.jpg» alt=«Mimedu principal» width=«304» height=«228»>
     <figcaption>Página principal</figcaption>
</figure>