Etiquetas de HTML5 para diagramación semántica

Con la llegada de HTML5, la web se ha vuelto más semántica. Uno de los aspectos claves cuando estructuramos un documento web es la diagramación de éste; tanto así, que el mismo uso por parte de diseñadores y desarrolladores llevó a la definición de los estándares que hoy conocemos.

Actualmente tenemos a nuestra disposición una serie de etiquetas semánticas que nos permiten estructurar nuestro contenido de una forma más ordenada, precisa y semántica.

Header

La etiqueta <header> está diseñada para contener información de introductoria, ya sea al documento, una sección o un artículo. No se debe confundir con la etiqueta <head>, que contiene información orientada al software, no al usuario.

Su uso puede ser para contener la información más importante o introductoria del documento, por ejemplo el encabezado <h1> o bien el menú de navegación principal, el logotipo, etc:

<header> <h1>Este es el encabezado más importante del documento</h1> <nav> <!-- Acá va el menú de navegación principal --> </nav> </header>

O bien puede estar directamente relacionada con un artículo:

<article> <header> <h1>Este es el encabezado más importante del artículo</h1> <p>Este párrafo introduce el tema del artículo...</p> </header> <p>Este párrafo ahonda más en el tema del artículo</p> ... </article>

Nav

La etiqueta <nav> se utiliza para establecer elementos de navegación; separa a los simples vínculos de los elementos de navegación:

<nav> <ul> <li><a>Inicio</a></li> <li><a>Productos</a></li> <li><a>Contacto</a></li> ... </ul> </nav>

Dependiendo de en qué otras etiquetas semánticas se encuentre anidada, la etiqueta <nav> adquiere distinta significancia. Por ejemplo, si está contenida dentro de una etiqueta <header>, implica que es el menú principal de navegación; si está contenida dentro de una etiqueta <footer>, entonces corresponde a un elemento de navegación de pie de página (una lista de mapa de sitio, por ejemplo).

Section

Es fácil confundir la utilidad de la etiqueta <section>. Tendemos a pensar que una sección es una parte de nuestra diagramación; naturalmente la identificamos visualmente en nuestro documento. Esto es un error. La etiqueta <section> debe utilizarse exclusivamente cuando ni <article>, <aside> o <nav> cumplen dicho propósito y cuando ésta (la etiqueta <section>) posee un encabezado natural, es decir, cuando posee un contenido que merece un título explicativo o introductorio.

<section> <h2>Esta es una sección de contenido, separada del resto del documento</h2> ... </section>

En estricto rigor, utilizaremos la etiqueta <section> para definir zonas dentro de nuestro documento que requieren ser estructuradas e identificadas como elementos separados del resto del flujo del contenido y no para definir contenedores con propósitos de estilo; para eso están los <div>.

Article

La etiqueta <article> define un contenedor de información única, independiente y que se contiene en sí misma. Está pensada para ser utilizada en contenidos que son capaces de existir por sí mismos sin necesidad de otros contenidos que los expliquen, introduzcan o contengan. El contenido de un <article> debería poder compartirse separado de los demás contenidos y poder entenderse sin problemas.

Esto implica que un <article> debe contener, por definición, un encabezado que lo introduzca y por ende nos permite tener más de un encabezado <h1> en nuestro documento:

<article> <h1>El encabezado principal del artículo</h1> <p>Un párrafo explicatorio...</p> <p>...</p> <h2>Un título secundario</h2> <p>...</p> </article>

Aside

La etiqueta <aside> es quizás la que más ha sufrido un mal uso o mala interpretación. Por alguna razón, muchos desarrolladores y diseñadores pensaron que su utilidad era para crear barras laterales, confundiéndola con el concepto "sidebar".

La definición del estándar indica que la etiqueta <aside> se debe utilizar para contener información anexa al contenido relacionado, ya sea el documento principal, una etiqueta <article> o una etiqueta <section>. Relaciona un contenido con otro, pero de forma indirecta.

<article> <h1>Los pingüinos de Humboldt</h1> <p>El pingüino de Humboldt (Spheniscus humboldti) es una especie de ave no voladora...</p> <p>...</p> <aside> <h2>Los pingüinos de penacho amarillo</h2> <p>El pingüino de penacho amarillo (Eudyptes chrysocome) es una especie de pingüino...</p> <a>Leer mác acerca de los pingüinos de penacho amarillo</a> </aside> </article>

La correcta utilización, entonces es para agrupar contenido indirectamente relacionado, contenido anexo; no para generar elementos de la barra lateral.

Footer

La etiqueta <footer> define un espacio de contenido de pie de página y aporta a definir la significancia del contenido como tal. Ubicación, datos de contacto, información de derechos de autor y mapa de sitio, son algunos ejemplos de contenido esperado para un pie de página.

This article is my 11th oldest. It is 714 words long