Headings y HTML semántico

Utiliza correctamente los encabezados y etiquetas semánticas para estructurar tu contenido y mejorar el SEO.

Los headings (encabezados) son como el índice de tu contenido: guían a los usuarios y ayudan a Google a entender la estructura y jerarquía de tu página.

El uso correcto de H1, H2, H3 y demás niveles comunica la organización de tus ideas.

  • Cada página debe tener exactamente un H1 que contenga la palabra clave principal.
  • El H1 es la señal más importante sobre el tema principal de la página. Google le da mucho peso para entender de qué trata la página.
  • Solo UN H1 por página
  • Incluye la palabra clave principal
  • Debe ser único en todo el sitio

La etiqueta H1: tu título principal

Cada página debe tener exactamente un H1 que contenga la palabra clave principal.

El H1 es la señal más importante sobre el tema principal de la página. Google le da mucho peso para entender de qué trata la página.

  • Solo UN H1 por página
  • Incluye la palabra clave principal
  • Debe ser único en todo el sitio
  • Mantén el H1 breve pero descriptivo
  • No uses el mismo H1 en varias páginas

Jerarquía de encabezados

Los encabezados deben seguir una estructura lógica, como una tabla de contenidos.

Si usas un H2, todos los subtítulos de esa sección deberían ser H3 o inferiores. No debes saltar niveles (de H2 a H4).

HTML semántico para SEO

Más allá de los headings, el HTML semántico ayuda a Google a entender la estructura y función de cada parte de tu página.

  • <header>: encabezado de la página o sección
  • <nav>: navegación principal
  • <main>: contenido principal
  • <article>: contenido independiente (blog, news)
  • <section>: agrupación temática
  • <aside>: contenido relacionado o lateral

Buenas prácticas en acción

Veamos un ejemplo de estructura correcta para un artículo de blog:

SEO
08

Headings y HTML semántico

Utiliza correctamente los encabezados y etiquetas semánticas para estructurar tu contenido y mejorar el SEO.

Código del tema: <h1>, <h2>, <header>, <main>

📘 Teoría

La etiqueta H1: tu título principal

Cada página debe tener exactamente un H1 que contenga la palabra clave principal.

El H1 es la señal más importante sobre el tema principal de la página. Google le da mucho peso para entender de qué trata la página.

  • Solo UN H1 por página
  • Incluye la palabra clave principal
  • Debe ser único en todo el sitio
  • Mantén el H1 breve pero descriptivo
  • No uses el mismo H1 en varias páginas

Jerarquía de encabezados

Los encabezados deben seguir una estructura lógica, como una tabla de contenidos.

Si usas un H2, todos los subtítulos de esa sección deberían ser H3 o inferiores. No debes saltar niveles (de H2 a H4).

1

H1 - Título principal

El tema central de la página. Solo uno por página.

2

H2 - Secciones principales

Los temas principales que desarrollan el H1.

3

H3 - Subsecciones

Detalle adicional dentro de cada H2.

4

H4-H6

Niveles adicionales para estructuras muy detalladas.

HTML semántico para SEO

Más allá de los headings, el HTML semántico ayuda a Google a entender la estructura y función de cada parte de tu página.

  • : encabezado de la página o sección
  • : navegación principal
  • : contenido principal
  • : contenido independiente (blog, news)
  • : agrupación temática
  • : contenido relacionado o lateral
  • : pie de página o sección

Buenas prácticas en acción

Veamos un ejemplo de estructura correcta para un artículo de blog:

Estructura de encabezados correcta
<article>
  <h1>Cómo hacer pan casero: guía completa</h1>
  
  <p>Introducción sobre el pan casero...</p>
  
  <h2>Ingredientes necesarios</h2>
 <h3>Harina y tipos</h3>
  <h3>Levadura: fresca vs seca</h3>
  
  <h2>El proceso de fermentación</h2>
  <h3>Cuánto tiempo necesita</h3>
  <h3>Cómo saber si está lista</h3>
  
  <h2>Recetas paso a paso</h2>
  <h3>Pan básico</h3>
  <h3>Pan integral</h3>
  
  <h2>Errores comunes</h2>
</article>

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre SEO.

Test de SEO

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .