Etiquetas HTML de sección

Etiquetas semánticas que van más allá del <div>

html ᐳ Enlaces o hipervínculos ᐳ Etiquetas HTML de sección ᐳ Etiquetas HTML de tablas

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>

Tabla de contenidos