Encabezados HTML
Un encabezado es un título al inicio de una página que ayuda a los motores de búsqueda a indexar su estructura. Aprende sobre los niveles, el tamaño y la importancia de los encabezados HTML con ejemplos.
Los encabezados dividen una página en secciones etiquetadas y jerarquizadas, de la misma manera en que los títulos de capítulos y secciones organizan un libro. En HTML dispones de seis niveles, desde <h1> (el más importante) hasta <h6> (el menos importante). Elegir el nivel correcto va más allá de hacer el texto grande: define el esquema del documento en el que se basan los navegadores, las tecnologías de asistencia y los motores de búsqueda para entender cómo está organizado el contenido.
Esta página cubre las seis etiquetas de encabezado, cómo sus niveles se anidan en una jerarquía, por qué el tamaño y el nivel son conceptos separados, cómo los usuarios de lectores de pantalla navegan por encabezados, y en qué se diferencia el elemento <header> de <h1>–<h6>.
Etiquetas de encabezado
Existen 6 niveles de encabezados en HTML: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>.
Las etiquetas <h1> - <h6> se utilizan para marcar los encabezados según su importancia. La etiqueta <h1> representa el encabezado más importante de la página web y <h6> representa el menos importante y el más pequeño.
Ejemplo de las etiquetas de encabezado HTML <h1> - <h6>:
¿Cómo usar las etiquetas HTML <h1>-<h6>?
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>Para la referencia completa de cada nivel, consulta las etiquetas HTML <h1>–<h6>.
Jerarquía de encabezados y esquema del documento
Los niveles de encabezado no son solo tamaños: describen el anidamiento. Un <h2> se interpreta como una subsección del <h1> más cercano que lo precede, un <h3> es una subsección de ese <h2>, y así sucesivamente. En conjunto, estos niveles anidados forman el esquema del documento: un árbol que indica qué partes de la página pertenecen a cuáles.
Piénsalo como una tabla de contenidos:
<h1>Baking Bread</h1> <!-- the page topic -->
<h2>Ingredients</h2> <!-- a section of "Baking Bread" -->
<h2>Method</h2> <!-- another section -->
<h3>Kneading</h3> <!-- a step inside "Method" -->
<h3>Proving</h3> <!-- another step inside "Method" -->
<h2>Troubleshooting</h2>La sangría anterior es solo ilustrativa: los encabezados son hermanos en el marcado, y son los números de nivel los que crean la jerarquía. Usa un solo <h1> para el tema principal de la página, luego <h2> para sus secciones de nivel superior, <h3> para las subsecciones de esas, y nunca elijas un nivel inferior solo para hacer el texto más pequeño.
Accesibilidad: no saltes niveles de encabezado
Los usuarios de lectores de pantalla rara vez leen una página de arriba a abajo. En su lugar, despliegan una lista de todos los encabezados y saltan directamente a la sección que buscan, de manera similar a hojear una tabla de contenidos. Esto solo funciona cuando los niveles descienden en orden — <h1>, luego <h2>, luego <h3> — sin saltos.
Saltarse un nivel (por ejemplo, un <h1> seguido inmediatamente de un <h3>) rompe el esquema: la tecnología de asistencia informa de un nivel faltante, y los usuarios no pueden saber si saltaron a una subsección o simplemente perdieron el hilo.
Incorrecto — se omite un nivel:
<h1>Our Menu</h1>
<h3>Starters</h3> <!-- jumps from h1 to h3, skipping h2 -->
<h3>Mains</h3>Correcto — los niveles descienden de uno en uno:
<h1>Our Menu</h1>
<h2>Starters</h2>
<h2>Mains</h2>
<h3>Vegetarian Mains</h3>Si un encabezado se ve demasiado grande o demasiado pequeño en su nivel correcto, cambia el aspecto con CSS, no el nivel.
Importancia de los encabezados
- Los encabezados HTML resaltan los temas importantes y la estructura del documento, mejorando así la participación de los usuarios.
- Usa solo una etiqueta
<h1>en cualquier página web. La etiqueta debe describir de qué trata tu página y además contener una palabra clave para mejorar el posicionamiento en Google. - Los motores de búsqueda usan los encabezados para indexar la estructura y el contenido de la página web.
Tamaño de los encabezados
Los navegadores asignan un tamaño predeterminado a cada nivel de encabezado, siendo <h1> el más grande y <h6> el más pequeño. Puedes cambiar cualquiera de estos con la propiedad CSS font-size.
El punto clave es: cambiar el tamaño visual de un encabezado no cambia su nivel semántico. Un <h2> con estilo para verse enorme sigue siendo un <h2> en el esquema, y un <h1> diminuto sigue siendo el encabezado de nivel superior de la página. Así que elige la etiqueta según el lugar que ocupa en la jerarquía, y luego ajusta su tamaño según lo requiera el diseño; nunca elijas una etiqueta por el tamaño con que se renderiza.
Ejemplo de cómo cambiar el tamaño del encabezado con la propiedad font-size:
Cómo dar estilo a una etiqueta HTML <h1> usando la propiedad CSS font-size
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
font-size: 50px;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>Notas importantes
- No uses etiquetas de encabezado para aumentar el tamaño del texto o poner el texto en negrita. En su lugar, debes usar propiedades CSS como font-weight y font-size. Recuerda que los motores de búsqueda usan los encabezados para estructurar el contenido.
- No saltes niveles de encabezado. Usa
<h1>como el encabezado principal de la página web, seguido de los encabezados<h2>, luego los encabezados<h3>menos importantes, etc. - Evita usar
<h1>más de una vez en una página.
Elementos relacionados
Hay un par de etiquetas que se ven habitualmente junto a los encabezados, pero que pertenecen a sus propios temas:
- La etiqueta
<hr>dibuja una ruptura temática entre secciones de contenido. - El elemento
<head>contiene los metadatos de la página (título, conjunto de caracteres, estilos, scripts) y no forma parte del contenido visible.
Encabezado vs. cabecera: <h1>–<h6> vs. <header>
Estos dos son fáciles de confundir porque los nombres se parecen, pero cumplen funciones diferentes:
- Un encabezado (
<h1>–<h6>) es un título individual que etiqueta una sección de contenido y le asigna un nivel en el esquema del documento. - Una cabecera (
<header>) es un contenedor para el contenido introductorio en la parte superior de una página o sección — típicamente un logotipo, el título del sitio y la navegación. A menudo contiene un encabezado, pero no es uno en sí mismo.
Compáralos uno al lado del otro:
<!-- A heading: one ranked title -->
<h1>Weekly Newsletter</h1>
<!-- A header: a block of introductory content that wraps a heading -->
<header>
<img src="logo.png" alt="Acme logo" />
<h1>Weekly Newsletter</h1>
<nav>
<a href="/archive">Archive</a>
<a href="/subscribe">Subscribe</a>
</nav>
</header>En resumen: coloca un encabezado dentro de una cabecera cuando necesites un bloque introductorio con título; usa un encabezado simple cuando solo necesites etiquetar una sección. Aprende más en el capítulo de la etiqueta HTML <header>.