Etiquetas semánticas de HTML5: guía completa con ejemplos
Cómo el HTML semántico aclara la estructura de la página para personas y máquinas, dónde mejora la accesibilidad y por qué no es un atajo para posicionar mejor.
Antes de HTML5, la web era un mar de divs y spans con clases CSS como .header, .sidebar, .footer. Los robots de los buscadores y los lectores de pantalla tenían que adivinar qué era cada cosa. HTML5 introdujo las etiquetas semánticas: elementos que expresan su significado por sí mismos, sin depender del CSS. La etiqueta <article> indica contenido autónomo. La etiqueta <nav> indica navegación. La etiqueta <aside> indica contenido complementario relacionado con el principal, pero no imprescindible para entenderlo.
Etiquetas estructurales de la página
HTML5 introdujo un conjunto de etiquetas para marcar las grandes regiones de la página. Forman el esqueleto del documento, que los navegadores, los buscadores y las tecnologías de asistencia pueden recorrer sin leer el CSS.
- <header>
- Contenido introductorio del contexto de sección más cercano: la página o una sección. A nivel de página: la cabecera del sitio con logotipo, navegación y buscador. Dentro de <article>: el título, los metadatos y el autor. Puede haber varios elementos <header> en una página si pertenecen a secciones distintas.
- <nav>
- Bloque de enlaces de navegación. No todo conjunto de enlaces es un <nav>; solo las rutas de navegación principales: menú principal, migas de pan, paginación. Los enlaces del pie a la política de privacidad no son <nav>. Los lectores de pantalla usan <nav> para el atajo de teclado que salta a la navegación.
- <main>
- El contenido principal y único de la página. Solo un <main> por documento. El contenido de <main> no debe repetirse en otras páginas (cabeceras, pies y barras laterales se repiten, por eso van fuera de <main>). Los lectores de pantalla saltan directamente a <main> con un atajo de teclado.
- <footer>
- La sección de cierre del contexto de sección más cercano. A nivel de página: contactos, copyright, enlaces. Dentro de <article>: datos del autor, etiquetas, fecha de la última actualización. Como <header>, puede aparecer en varias secciones.
- <article>
- Contenido autónomo y distribuible por separado: una entrada de blog, una noticia, un mensaje de foro, una ficha de producto o un comentario. La prueba clave: si sacas el <article> de su contexto y lo publicas por separado, ¿tiene sentido? Si es así, es un <article>.
- <section>
- Parte de un documento temáticamente cohesionada que no tiene una etiqueta más específica. Debe tener siempre un encabezado (<h2>–<h6>). Si no hay encabezado, lo más probable es que lo correcto sea un <div>. No uses <section> como sustituto con estilo de un <div>.
- <aside>
- Contenido relacionado de forma indirecta con el principal: recuadros destacados, barras laterales, bloques publicitarios, biografías de autor, artículos relacionados. Dentro de <article>: una nota o cita no crítica para entender el texto principal. A nivel de página: una columna lateral.
El esqueleto básico de cualquier página tiene este aspecto, y ya es un marcado semánticamente correcto:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
</head>
<body>
<header>
<a href="/"><img src="logo.svg" alt="Company name"></a>
<nav aria-label="Main navigation">
<ul>
<li><a href="/blog">Blog</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/contacts">Contacts</a></li>
</ul>
</nav>
</header>
<main>
<!-- Unique page content -->
</main>
<footer>
<p>© 2026 Company name</p>
<nav aria-label="Secondary navigation">
<a href="/privacy">Privacy</a>
<a href="/sitemap">Sitemap</a>
</nav>
</footer>
</body>
</html>Etiquetas de contenido: article, section, h1–h6, p
Las etiquetas de nivel estructural delimitan las regiones de la página. Las de nivel de contenido describen la naturaleza del propio contenido. Veamos la combinación que aparece en cualquier página de blog.
<!-- Blog post page -->
<main>
<article>
<header>
<h1>How to choose the right HTML tag</h1>
<p>Published: <time datetime="2026-05-22">22 May 2026</time></p>
<address>
By: <a rel="author" href="/authors/pavlo">seohead</a>
</address>
</header>
<section>
<h2>Why semantics matters</h2>
<p>Section text...</p>
</section>
<section>
<h2>Main tags</h2>
<p>Section text...</p>
<aside>
<p>Note: the HTML Living Standard is continuously updated.</p>
</aside>
</section>
<footer>
<p>Tags: <a href="/tags/html">#html</a>, <a href="/tags/seo">#seo</a></p>
</footer>
</article>
<!-- Related articles -->
<aside aria-label="Related articles">
<h2>Also read</h2>
<ul>
<li><a href="/blog/heading-structure">Heading structure</a></li>
<li><a href="/blog/schema-org-json-ld">Schema.org markup</a></li>
</ul>
</aside>
</main>Cuándo usar section y cuándo div
La regla es sencilla: si un bloque tiene un nombre semántico, usa <section>. Si existe solo para dar estilo o como gancho de JavaScript, usa <div>.
<!-- CORRECT: section with a heading -->
<section>
<h2>Product benefits</h2>
<ul>
<li>Fast delivery</li>
<li>2-year warranty</li>
</ul>
</section>
<!-- CORRECT: div for styling -->
<div class="cards-grid">
<article>...</article>
<article>...</article>
<article>...</article>
</div>
<!-- WRONG: section with no heading -->
<section class="cards-grid">
<article>...</article>
</section>
<!-- WRONG: div where content has meaning -->
<div id="about">
<!-- The About section — this should be <section> -->
<h2>About us</h2>
<p>...</p>
</div>Etiquetas de medios, datos y utilidades
HTML5 añadió etiquetas para tipos de datos concretos: dan a los buscadores señales adicionales sin necesidad de marcado Schema.org.
<figure> y <figcaption>
Contenido multimedia autónomo con pie. Imágenes, diagramas, tablas, fragmentos de código: cualquier elemento relacionado con el texto principal que podría moverse a un anexo sin perder sentido. <figcaption> es el pie oficial de un <figure>. Google usa <figcaption> como descripción complementaria de la imagen al analizar imágenes.
<time>
Una fecha u hora legible por máquinas. El atributo datetime en formato ISO 8601 permite al buscador determinar con precisión la fecha de publicación o de un evento, sin importar cómo se muestre al usuario. Google recomienda explícitamente usar <time> para las fechas de los artículos en los datos estructurados de tipo Article.
<address>
Información de contacto del <article> más cercano o del documento en su conjunto. Dentro de <article>: los datos de contacto del autor. A nivel de página: la información de contacto de la organización. No uses <address> para direcciones postales fuera del contexto de contacto del autor o de la organización.
<details> y <summary>
Un widget plegable nativo, sin JavaScript. <summary> es el encabezado visible. <details> contiene el contenido oculto. El navegador gestiona automáticamente la apertura y el cierre. Los buscadores indexan el contenido dentro de <details> aunque esté cerrado. Ideal para FAQs y spoilers.
<mark>
Resalta el texto como relevante en el contexto actual, por ejemplo, resultados de búsqueda o palabras clave dentro de una cita. No lo confundas con <strong> (importancia) ni con <em> (énfasis). <mark> significa «marcado como relevante», no «importante» ni «con estilo decorativo».
<data> y <output>
<data value="42">Cuarenta y dos</data> vincula un texto legible para personas con un valor legible por máquinas. <output> representa el resultado de un cálculo o de una acción del usuario. Ambas etiquetas son poco frecuentes en sitios de contenido, pero esenciales en aplicaciones web con formularios y calculadoras.
<!-- figure + figcaption for an image -->
<figure>
<img
src="/images/html5-structure.webp"
alt="Diagram of the semantic structure of an HTML5 page"
width="800" height="450"
>
<figcaption>Fig. 1 — Typical semantic structure of an HTML5 document</figcaption>
</figure>
<!-- figure + figcaption for code -->
<figure>
<pre><code class="language-html"><article>...</article></code></pre>
<figcaption>Example: minimal article markup</figcaption>
</figure>
<!-- time with datetime attribute -->
<p>
Article updated:
<time datetime="2026-05-22T10:30:00+03:00">22 May 2026</time>
</p>
<!-- details + summary (FAQ without JS) -->
<details>
<summary>What is semantic HTML?</summary>
<p>Markup where each tag conveys the meaning of the content,
not just its visual appearance.</p>
</details>
<!-- mark for search highlighting -->
<p>Results for "<mark>semantic tags</mark>" — 42 articles</p>Anidación y combinaciones: ejemplos reales
El poder semántico de HTML5 no está en las etiquetas sueltas, sino en su combinación correcta. Repasemos las arquitecturas de página más habituales.
Página de listado del blog
<main>
<header>
<h1>SEO blog</h1>
<p>Practical articles on website promotion</p>
</header>
<!-- Article list — each card is an article -->
<section aria-label="Article list">
<article>
<header>
<h2><a href="/blog/semantic-html5">HTML5 semantic tags</a></h2>
<p>
<time datetime="2026-05-22">22 May 2026</time>
· <span>18 min read</span>
</p>
</header>
<p>HTML5 semantic tags are the foundation of correct page markup...</p>
<footer>
<a href="/blog/semantic-html5">Read more</a>
</footer>
</article>
<article>
<header>
<h2><a href="/blog/heading-structure">Heading structure</a></h2>
<p>
<time datetime="2026-04-10">10 April 2026</time>
· <span>12 min read</span>
</p>
</header>
<p>One H1 per page. H2 divides content into sections...</p>
<footer>
<a href="/blog/heading-structure">Read more</a>
</footer>
</article>
</section>
<!-- Pagination -->
<nav aria-label="Pagination">
<a href="?page=1" aria-current="page">1</a>
<a href="?page=2">2</a>
<a href="?page=3">3</a>
</nav>
</main>Ficha de producto con reseñas
<main>
<article itemscope itemtype="https://schema.org/Product">
<!-- Product main area -->
<header>
<h1 itemprop="name">SoundMax Pro Wireless Headphones</h1>
<p itemprop="description">40 hours of battery life, active noise cancellation...</p>
</header>
<!-- Product image -->
<figure>
<img
src="/products/soundmax-pro.webp"
alt="SoundMax Pro wireless headphones — front view"
itemprop="image"
width="600" height="600"
>
<figcaption>SoundMax Pro in three colours: black, white, blue</figcaption>
</figure>
<!-- Price -->
<section aria-label="Price and purchase">
<p>
<data value="129" itemprop="price">$129</data>
</p>
<button type="button">Add to cart</button>
</section>
<!-- Specs -->
<section>
<h2>Specifications</h2>
<dl>
<dt>Battery life</dt><dd>40 hours</dd>
<dt>Connection</dt><dd>Bluetooth 5.3</dd>
<dt>Weight</dt><dd>250 g</dd>
</dl>
</section>
<!-- Reviews — each review is an article inside article -->
<section aria-label="Customer reviews">
<h2>Reviews</h2>
<article>
<header>
<strong>Anna K.</strong>
<time datetime="2026-04-15">15 April 2026</time>
</header>
<p>Excellent headphones, clean sound. The noise cancellation works brilliantly.</p>
</article>
<article>
<header>
<strong>Michael R.</strong>
<time datetime="2026-03-28">28 March 2026</time>
</header>
<p>The 40-hour claim is real. Took them on a business trip and they lasted the week.</p>
</article>
</section>
</article>
</main>Landing page con secciones y barra lateral
<body>
<header>
<nav aria-label="Main navigation">
<!-- logo + menu -->
</nav>
</header>
<main>
<!-- Hero section -->
<section aria-labelledby="hero-title">
<h1 id="hero-title">SEO promotion for your business</h1>
<p>We help businesses improve technical and content foundations</p>
<a href="#contacts" role="button">Get a free audit</a>
</section>
<!-- Services -->
<section>
<h2>Our services</h2>
<ul role="list">
<li>
<article>
<h3>Technical audit</h3>
<p>Full technical health check of your site...</p>
</article>
</li>
<li>
<article>
<h3>Content strategy</h3>
<p>Keyword universe and content calendar...</p>
</article>
</li>
</ul>
</section>
<!-- Main content + sidebar -->
<div class="layout-two-col">
<section>
<h2>Case studies</h2>
<!-- ... -->
</section>
<aside aria-label="Contact us">
<h2>Get in touch</h2>
<address>
<p>Email: <a href="mailto:hello@seohead.tech">hello@seohead.tech</a></p>
<p>Telegram: <a href="https://t.me/seohead">@seohead</a></p>
</address>
</aside>
</div>
</main>
<footer>
<nav aria-label="Site map">
<ul>
<li><a href="/blog">Blog</a></li>
<li><a href="/glossary">Glossary</a></li>
</ul>
</nav>
<p><small>© 2026 seohead.tech</small></p>
</footer>
</body>Varios <nav> en una página: migas de pan y paginación
<!-- Multiple <nav> elements are fine — distinguish them with aria-label -->
<!-- Breadcrumbs -->
<nav aria-label="Breadcrumbs">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li aria-current="page">HTML5 semantic tags</li>
</ol>
</nav>
<!-- Main navigation inside <header> -->
<nav aria-label="Main navigation">
<ul>
<li><a href="/blog" aria-current="page">Blog</a></li>
<li><a href="/services">Services</a></li>
</ul>
</nav>
<!-- Pagination at the end of a listing -->
<nav aria-label="Blog pages">
<a href="?page=1" rel="prev" aria-label="Previous page">←</a>
<a href="?page=1">1</a>
<span aria-current="page">2</span>
<a href="?page=3">3</a>
<a href="?page=3" rel="next" aria-label="Next page">→</a>
</nav>
<!-- In-page table of contents -->
<nav aria-label="Article contents">
<ol>
<li><a href="#structural-tags">Structural tags</a></li>
<li><a href="#content-tags">Content tags</a></li>
<li><a href="#nesting-examples">Nesting examples</a></li>
</ol>
</nav>Impacto en SEO: lo que el buscador recibe realmente
El marcado semántico ofrece a los navegadores y a las tecnologías de asistencia información estructural más clara. Puede hacer que la página sea más fácil de interpretar y mantener, pero no es un interruptor directo de posicionamiento ni un sustituto de un contenido útil.
Identificación del contenido principal
Google usa <main> para identificar el contenido principal de una página. El contenido de la cabecera, del pie y de <aside> recibe menos peso en el posicionamiento. Si todo el texto está dentro de <div class="main">, Google dedica recursos adicionales a averiguar la estructura.
Atribución de fecha y autor
<time datetime="2026-05-22"> da a Google una fecha de publicación precisa, lo que influye en la valoración de la frescura del contenido. <address> con rel="author" vincula el artículo con su autor. Ambas señales alimentan la generación de snippets enriquecidos en los resultados de búsqueda.
Resultados enriquecidos
El contenido de <details> + <summary> lo indexa Google y puede aparecer como bloques desplegables en los resultados de búsqueda (People Also Ask). <figure> + <figcaption> influyen en la indexación de imágenes y en cómo aparecen en Google Images.
Enlazado interno
Los enlaces dentro de <nav> tienen un contexto de navegación. Los enlaces dentro de <article> tienen un contexto de contenido. Googlebot tiene en cuenta la posición del enlace en la página al evaluar su peso. Un enlace desde el cuerpo principal de un <article> vale más que uno desde un <aside>.
Errores comunes en el marcado semántico
La mayoría de los errores vienen de la costumbre de pensar en divs o de no entender para qué sirve realmente cada etiqueta.
<!-- MISTAKE 1: <section> instead of <div> for styling -->
<section class="flex-wrapper"> <!-- no heading = not section -->
<img src="photo.jpg" alt="">
</section>
<!-- CORRECT -->
<div class="flex-wrapper">
<img src="photo.jpg" alt="Photo description">
</div>
<!-- MISTAKE 2: <article> for a card without standalone meaning -->
<article class="feature-card">
<span class="icon">⚡</span>
<h3>Fast delivery</h3>
</article>
<!-- CORRECT: a benefits card is li or div, not article -->
<li class="feature-card">
<span class="icon" aria-hidden="true">⚡</span>
<h3>Fast delivery</h3>
</li>
<!-- MISTAKE 3: <header> as a synonym for <div class="header"> -->
<header class="section-header">
<h2>Our advantages</h2>
</header>
<!-- CORRECT: use <header> only when a section has an introductory group -->
<section>
<h2>Our advantages</h2> <!-- h2 directly, no header wrapper -->
...
</section>
<!-- MISTAKE 4: two <main> elements -->
<main>Primary content</main>
<main>Also important content</main> <!-- invalid! -->
<!-- CORRECT: one <main>, supplementary content in <aside> -->
<main>Primary content</main>
<aside>Supplementary content</aside>
<!-- MISTAKE 5: <address> for an office address in body text -->
<address>1 High Street, London</address> <!-- not in an author/org context -->
<!-- CORRECT -->
<p>Office address: 1 High Street, London</p>
<!-- or in footer as site contact information: -->
<footer>
<address>
<a href="mailto:hello@company.com">hello@company.com</a>
</address>
</footer>Otro problema frecuente son los atributos alt ausentes o vacíos. Las imágenes dentro de <figure> deben tener un alt con sentido o alt="" (si la imagen es decorativa y la describe <figcaption>). Nunca omitas por completo el atributo alt: incumple los estándares de accesibilidad y la validación HTML.
<!-- Decorative image: empty alt, figcaption describes it -->
<figure>
<img src="chart.png" alt="" role="presentation">
<figcaption>Organic traffic growth over 6 months: +340%</figcaption>
</figure>
<!-- Informative image: full alt text -->
<figure>
<img
src="html5-tags-map.png"
alt="Map of HTML5 semantic tags: header, nav, main, article, section, aside, footer"
>
<figcaption>Fig. 2 — Complete map of HTML5 semantic elements</figcaption>
</figure>
<!-- Mistake: no alt at all -->
<img src="diagram.png"> <!-- invalid! -->Preguntas frecuentes
¿El marcado semántico afecta directamente a las posiciones en Google?
¿Se puede anidar un <article> dentro de otro <article>?
¿En qué se diferencia <strong> de <b>, y <em> de <i>?
¿Hace falta role="main" junto con la etiqueta <main>?
¿Qué pasa con las aplicaciones de una sola página (SPA) en React o Vue?
Check it with SpiderHead
Free and local: run the audit on your own machine.
