Con la llegada de HTML5, aparecen unas etiquetas de sección para dar semántica a un documento HTML. ¡Conócelas!

En versiones anteriores a HTML5, al crear la estructura de una página, normalmente utilizabamos etiquetas <div> para ir agrupando secciones de la página. Unido a esto, ibamos añadiendo id o clases (atributos) dependiendo de nuestro interés, para que quedase más claro. Una estructura como la que menciono podría ser la siguiente:

<div class="articulo">
  <h1>Título del artículo</h1>
  <p class="intro">Pequeña introducción.</p>
  <p class="contenido">Aquí va el texto del artículo en cuestión, con todos sus detalles.</p>
  <p class="pie">Escrito por Manz</p>
</div>

Vemos que en esta estructura tenemos una agrupación que contiene todos los elementos de un artículo, donde el primer elemento es un encabezado <h1> (titular), luego un párrafo de introducción, seguido de un párrafo de contenido y un último párrafo a pie de artículo. La estructura podría ser más sencilla o más complicada, pero nos viene bien como ejemplo de introducción a este tema.

Nótese que los elementos utilizados <div> y <p> no tienen una semántica específica, salvo que son etiquetas de agrupación y que la segunda contiene un párrafo. En HTML5 se introducen una serie de etiquetas de agrupación que funcionan exactamente como un<div>, pero que además tienen un significado semántico porque indican la naturaleza del contenido que agruparán.

Veamos el ejemplo anterior, utilizando etiquetas semánticas:

<article>
  <header>
    <h1>Título del artículo</h1>
    <p class="intro">Pequeña introducción.</p>
  </header>
  <p class="contenido">Aquí va el texto del artículo en cuestión, con todos sus detalles.</p>
  <footer>
    <p>Escrito por Manz.</p>
  </footer>
</article>

De esta forma, preparamos nuestro documento HTML para que cualquier navegador, robot de buscador o aplicación o sistema informático sea capaz de leer el documento HTML y conocer perfectamente la naturaleza del contenido de dicha sección.

Etiquetas HTML semánticas

Veamos un listado de las etiquetas semánticas que se introducen en HTML5 (los encabezados ya existían en versiones anteriores):

Etiqueta Descripción
<article> Artículo. Parte principal de un escrito (posts, mensaje en foros, comentario...)
<nav> Apartado de navegación (enlaces de secciones, categorías, etc...)
<header> Cabecera visual de la página (logotipo, título, etc...). No confundir con <head>.
<h1> Encabezado de nivel 1. Equivalente al título del documento.
<h2> Encabezado de nivel 2. Equivalente al tema del documento.
<h3> Encabezado de nivel 3. Equivalente a la sección de un tema.
<h4> Encabezado de nivel 4. Equivalente a un apartado de la sección.
<h5> Encabezado de nivel 5. Equivalente a un ejemplo del apartado.
<h6> Encabezado de nivel 6. Equivalente a un subapartado del ejemplo.
<footer> Pie de página de una sección (o del documento completo).
<section> Sección o grupo temático de contenido. No usar sólo para dar estilo.
<aside> Agrupación de contenido no relacionado con el tema principal del documento.
<address> Agrupación con la información de contacto del autor del artículo o documento.

Nótese que las etiquetas <article> pueden contener otras etiquetas <article>, como por ejemplo comentarios dentro de artículos:

<article class="post">
  <p>Este sería el texto del artículo.</p>
  <article class="comentario">
    <p>Aquí iría el texto del comentario.</p>
  </article>
</article>
Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).