En versiones anteriores a HTML5, al crear la estructura de una página, normalmente utilizabamos etiquetas <div>
para ir agrupando secciones diferentes. Unido a esto, ibamos añadiendo los atributos id
o class
dependiendo de nuestro interés, para que quedase más claro.
De hecho, hoy en día aún es muy habitual crear una estructura de etiquetas basada en simplemente etiquetas HTML <div>
que no proporcionan ninguna información adicional, aunque existan etiquetas alternativas mucho más apropiadas.
Una estructura como la que menciono podría ser la siguiente:
<div class="articulo">
<h1>Título del artículo</h1>
<p class="introduccion">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>
Observemos esta estructura donde tenemos una agrupación que contiene todos los elementos de un artículo. La estructura podría ser más sencilla o más complicada, pero nos viene bien como ejemplo de introducción para este tema:
<h1>
<p>
de introducción<p>
de contenido<p>
a pie de artículo<div>
para agruparNótese que los elementos utilizados <div>
y <p>
no tienen una semántica específica, salvo que son etiquetas de agrupación. En HTML5 se introducen una serie de etiquetas semánticas de agrupación que aunque funcionan exactamente como un <div>
, añaden significado semántico porque indican la naturaleza de la información que contendrán y no tenemos que leerlo previamente o fijarnos en la clase (que además puede estar en múltiples idiomas).
Ahora, veamos el ejemplo anterior, que carece de semántica HTML, utilizando las etiquetas semánticas de sección que proporciona HTML5:
<article>
<header>
<h1>Título del artículo</h1>
<p class="abstract">Pequeña introducción.</p>
</header>
<p class="content">Aquí va el texto del artículo en cuestión con sus detalles.</p>
<footer>
<p>Escrito por Manz.</p>
</footer>
</article>
Repasemos los cambios que hemos hecho:
<header>
abstract
.content
<footer>
<article>
para agruparDe 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.
Veamos un listado de las etiquetas semánticas que se introducen en HTML5 (los encabezados ya existían de versiones anteriores):
Etiqueta | Descripción | Más info |
---|---|---|
<article> |
Entidad importante del documento (artículos, mensajes en foros, comentarios...) | Etiqueta <article> |
<nav> |
Apartado o zona de navegación (enlaces de secciones, categorías, etc...) | Etiqueta <nav> |
<header> |
Cabecera visual de la página (logotipo, título, etc...). No confundir con <head> . |
Etiqueta <header> |
<footer> |
Pie de página del documento (o de una sección concreta). | Etiqueta <footer> |
<h1> ... <h6> |
Encabezados o titulares con niveles de importancia del 1 al 6 . |
Etiqueta <h1> ... <h6> |
<section> |
Sección o grupo temático de contenido. No usar sólo para dar estilo. | Etiqueta <section> |
<main> |
Agrupación del contenido principal del documento actual. | Etiqueta <main> |
<aside> |
Agrupación de contenido no relacionado con el tema principal del documento. | Etiqueta <aside> |
<search> |
Agrupación del contenido relacionado con búsquedas. | Etiqueta <search> |
<address> |
Agrupación con la información de contacto o ubicación del autor del artículo o documento. | Etiqueta <address> |
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev