Cuando empiezas a crear páginas web con HTML, una de las primeras cosas que aparecen son los encabezados: h1, h2, h3, h4, h5 y h6.
A simple vista parecen solo títulos con diferentes tamaños, pero en realidad tienen una función mucho más importante. Los encabezados ayudan a organizar el contenido, mejorar la lectura y darle una estructura clara a la página.
Entender la diferencia entre un H1, H2, H3 y H4 es clave si quieres escribir HTML correctamente, crear artículos bien ordenados y mejorar el SEO de tu web.
Qué son los encabezados en HTML
Los encabezados en HTML son etiquetas que sirven para crear títulos y subtítulos dentro de una página.
HTML tiene seis niveles de encabezados:
<h1>Título principal</h1>
<h2>Subtítulo importante</h2>
<h3>Subsección</h3>
<h4>Detalle dentro de una subsección</h4>
<h5>Encabezado de menor nivel</h5>
<h6>Encabezado más específico</h6>El h1 representa el título más importante. El h6 representa el nivel más bajo dentro de esa jerarquía.
En la práctica, los más usados suelen ser h1, h2, h3 y, en algunos casos, h4.
Qué es un H1
El h1 es el encabezado principal de una página. Representa el tema central del contenido.
Por ejemplo, si tienes un artículo llamado “Cómo crear formularios en HTML desde cero”, ese debería ser el H1 de la página.
<h1>Cómo crear formularios en HTML desde cero</h1>El H1 debe decirle al usuario y a los buscadores de qué trata la página. Por eso debe ser claro, directo y estar relacionado con la intención de búsqueda.
En una página normal, lo recomendable es usar un solo H1 principal. No porque HTML moderno prohíba usar más de uno, sino porque para el usuario, para la estructura del contenido y para el SEO suele ser más claro tener un único título principal.
Qué es un H2
El h2 se usa para dividir el contenido en secciones principales. Puedes verlo como los capítulos de un artículo.
Si el H1 es el título del artículo, los H2 son los grandes apartados que explican ese tema.
Ejemplo:
<h1>Cómo crear formularios en HTML desde cero</h1>
<h2>Qué es un formulario en HTML</h2>
<h2>Para qué sirve un formulario HTML</h2>
<h2>Etiquetas principales de un formulario</h2>
<h2>Errores comunes al crear formularios</h2>Los H2 ayudan a que el contenido sea más fácil de leer. También permiten que el usuario escanee la página rápidamente y encuentre la información que necesita.
En SEO, los H2 son importantes porque refuerzan los temas principales del artículo.
Qué es un H3
El h3 sirve para crear subsecciones dentro de un H2. Es decir, se usa cuando necesitas dividir una sección principal en partes más pequeñas.
Por ejemplo, dentro del H2 “Etiquetas principales de un formulario”, podrías usar varios H3:
<h2>Etiquetas principales de un formulario</h2>
<h3>La etiqueta form</h3>
<h3>La etiqueta input</h3>
<h3>La etiqueta label</h3>
<h3>La etiqueta textarea</h3>El H3 ayuda a ordenar mejor los detalles. No tiene sentido usar un H3 si antes no hay un H2 que lo agrupe.
Una forma sencilla de entenderlo es esta:
H1 = título principal
H2 = secciones grandes
H3 = puntos dentro de esas seccionesQué es un H4
El h4 se usa para dividir aún más una subsección. Es menos común que H1, H2 y H3, pero puede ser útil en contenidos largos o técnicos.
Por ejemplo, dentro de un H3 sobre tipos de input, podrías usar H4 para explicar casos específicos:
<h2>Etiquetas principales de un formulario</h2>
<h3>La etiqueta input</h3>
<h4>Input de texto</h4>
<h4>Input de email</h4>
<h4>Input de contraseña</h4>El H4 no debería usarse solo para hacer un texto más pequeño o más bonito. Debe tener una función estructural dentro del contenido.
Si no estás escribiendo una guía larga, probablemente no necesites usar muchos H4.
Diferencia entre H1, H2, H3 y H4
La diferencia principal está en la jerarquía.
El H1 es el título principal de la página.
El H2 divide el contenido en grandes secciones.
El H3 divide esas secciones en partes más específicas.
El H4 sirve para organizar detalles dentro de un H3.
Ejemplo visual:
<h1>Guía de HTML para principiantes</h1>
<h2>Qué es HTML</h2>
<h2>Etiquetas básicas de HTML</h2>
<h3>Etiquetas de texto</h3>
<h4>Etiqueta p</h4>
<h4>Etiqueta strong</h4>
<h3>Etiquetas de enlaces</h3>
<h4>Etiqueta a</h4>
<h2>Buenas prácticas en HTML</h2>Esa estructura se parece al índice de un libro. No saltas de un título principal a un detalle muy pequeño sin pasar por una sección intermedia.
Tabla comparativa de encabezados HTML
| Encabezado | Función principal | Cuándo usarlo |
|---|---|---|
| H1 | Título principal de la página | Una vez, para definir el tema central |
| H2 | Secciones principales | Para dividir el contenido en bloques importantes |
| H3 | Subsecciones dentro de un H2 | Para explicar puntos concretos dentro de una sección |
| H4 | Detalles dentro de un H3 | Para contenidos más largos, técnicos o muy estructurados |
Ejemplo correcto de estructura con H1, H2, H3 y H4
Imagina que estás escribiendo un artículo sobre CSS. Una estructura correcta podría ser:
<h1>Qué es CSS y para qué sirve</h1>
<h2>Qué significa CSS</h2>
<h2>Para qué sirve CSS</h2>
<h2>Propiedades básicas de CSS</h2>
<h3>Color</h3>
<h3>Tipografía</h3>
<h3>Espaciado</h3>
<h2>Diseño responsive con CSS</h2>
<h3>Media queries</h3>
<h4>Media queries para móvil</h4>
<h4>Media queries para tablet</h4>
<h2>Conclusión</h2>La estructura es clara porque cada encabezado tiene una función. El contenido baja de nivel de forma ordenada.
Ejemplo incorrecto de encabezados
Un error común es usar encabezados solo por su tamaño visual.
Por ejemplo:
<h1>Qué es CSS</h1>
<h4>Para qué sirve CSS</h4>
<h2>Propiedades básicas</h2>
<h5>Color</h5>
<h3>Conclusión</h3>Esta estructura es confusa porque salta niveles sin lógica. El H4 aparece antes de un H2 o H3 que lo justifique, y el H5 se usa sin una jerarquía clara.
Si necesitas que un título se vea más grande o más pequeño, lo correcto es cambiar su estilo con CSS, no elegir un encabezado solo por su apariencia.
Encabezados HTML y SEO
Los encabezados ayudan a los buscadores a entender mejor la estructura del contenido. No son el único factor SEO, pero sí forman parte de una buena organización de página.
Un H1 claro ayuda a identificar el tema principal. Los H2 permiten dividir el contenido según las preguntas o temas que el usuario busca. Los H3 ayudan a profundizar en detalles.
Por ejemplo, en un artículo sobre formularios HTML, podrías usar H2 como:
Qué es un formulario en HTML
Para qué sirve un formulario HTML
Cómo crear un formulario HTML
Errores comunes en formularios HTMLEsto ayuda tanto al usuario como al buscador, porque el contenido está ordenado y responde preguntas concretas.
Encabezados y experiencia de usuario
Los encabezados no son solo para Google. También son muy importantes para las personas.
Muchos usuarios no leen una página completa desde el principio hasta el final. Primero escanean los títulos para decidir si el contenido les interesa.
Si tus encabezados son claros, el usuario encuentra rápido lo que busca. Si son confusos, puede abandonar la página aunque el contenido sea bueno.
Por eso los encabezados deben ser descriptivos. En lugar de poner títulos genéricos como “Introducción” o “Más información”, es mejor usar encabezados que expliquen el contenido:
Qué es un H1 en HTML
Cuándo usar un H2
Errores comunes al usar encabezadosBuenas prácticas al usar H1, H2, H3 y H4
La primera buena práctica es mantener una jerarquía lógica. Empieza con un H1, divide con H2 y usa H3 o H4 solo cuando sea necesario.
También conviene que los encabezados sean claros y naturales. No hace falta repetir la palabra clave en todos los títulos. Eso puede hacer que el artículo suene forzado.
Otra recomendación es evitar encabezados demasiado largos. Un buen encabezado debe orientar al lector sin parecer una frase interminable.
También es importante no usar encabezados solo para cambiar el tamaño del texto. Si quieres modificar el diseño, usa CSS.
Errores comunes al usar encabezados HTML
Uno de los errores más comunes es usar varios H1 sin necesidad. En la mayoría de páginas, es mejor tener un H1 principal y después organizar el contenido con H2 y H3.
Otro error frecuente es saltar niveles. Por ejemplo, pasar de H1 a H4 sin usar H2 o H3.
También es común usar H2 para textos que no son realmente secciones, solo porque se ven grandes. Esto puede desordenar la estructura del documento.
Por último, algunas personas intentan meter palabras clave en todos los encabezados. Es mejor escribir títulos útiles y naturales.
Preguntas frecuentes sobre H1, H2, H3 y H4
¿Cuántos H1 debe tener una página?
Lo recomendable es usar un H1 principal por página. Así el tema central queda más claro para el usuario y para los buscadores.
¿Puedo usar varios H2 en una página?
Sí. Puedes usar varios H2 para dividir el contenido en secciones principales.
¿Es obligatorio usar H3 y H4?
No. Solo debes usarlos si el contenido lo necesita. En artículos sencillos puede bastar con H1 y H2.
¿Los encabezados afectan al SEO?
Sí, ayudan a organizar el contenido y a mejorar la comprensión de la página, aunque no son el único factor SEO.
¿Puedo elegir un H3 solo porque se ve más pequeño?
No es lo ideal. Los encabezados deben elegirse por jerarquía, no por tamaño visual. El diseño se ajusta con CSS.
Importante
La diferencia entre h1, h2, h3 y h4 está en la jerarquía del contenido. El H1 es el título principal, los H2 son secciones importantes, los H3 dividen esas secciones y los H4 organizan detalles más específicos.
Usarlos correctamente hace que una página sea más clara, más fácil de leer y mejor estructurada para SEO.
Si estás aprendiendo HTML, recuerda esta idea: los encabezados no son solo tamaños de texto. Son una forma de ordenar la información para que tanto las personas como los buscadores entiendan mejor tu contenido.
