Etiquetas HTML de sección

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 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 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 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. Autor de Emezeta.com, es profesor en la Universidad de La Laguna y dirige el curso de Programación web FullStack y Diseño web FrontEnd de EOI en Tenerife (Canarias). En sus ratos libres, busca GIF de gatos en Internet.