Etiquetas HTML <h1>-<h6>
Las etiquetas <h1> a <h6> definen los encabezados HTML. <h1> es el más importante y <h6> el menos importante. ¡Prueba los ejemplos!
Los elementos <h1> a <h6> se utilizan para definir seis niveles de encabezados HTML, donde <h1> es el nivel más alto (o más importante) y <h6> el menos importante.
Cada página web debe tener un único encabezado <h1>. Como los motores de búsqueda lo utilizan para indexar la estructura y el contenido de los documentos web, asegúrate de incluir palabras clave en él.
Los agentes de usuario pueden usar la información de los encabezados para crear automáticamente una tabla de contenidos del documento.
Si deseas cambiar el tamaño del texto, es mejor no usar etiquetas de encabezado. En su lugar, puedes usar la propiedad CSS font-size. Se recomienda no saltarse niveles de encabezado (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) y usar <h1> solo una vez por página.
Las etiquetas de encabezado también tienen valor SEO. Un motor de búsqueda intenta determinar dos cosas sobre tu página: de qué trata y qué tan buena es. Una de las principales cosas que los motores de búsqueda analizan para determinar el contenido de una página son las palabras dentro de las etiquetas de encabezado.
Cuando una página tiene un único contenido, su título principal debe estar en una etiqueta <h1>, las secciones más grandes deben incluirse en <h2> y así sucesivamente. De esta manera, puedes organizar mejor tu contenido. Debes recordar que nadie lee cada palabra del contenido.
Existen dos tipos de páginas con contenido: páginas de contenido único y páginas de índice. En las páginas de contenido único, el título de ese contenido debe estar en <h1> cerca de la parte superior de <body>. En una página de índice, el título del sitio o el nombre del índice generalmente se coloca en <h1>. Luego, los títulos de todas las partes individuales listadas deben usar etiquetas <h2>.
Dado que las etiquetas <h1> a <h6> son elementos de bloque, siempre comienzan en una nueva línea y ocupan todo el ancho disponible.
De forma predeterminada, los navegadores renderizan las etiquetas <h1>-<h6> con el siguiente CSS, donde el font-size disminuye en cada nivel mientras que el font-weight permanece en negrita:
margin-left: 0;
margin-right: 0;
font-weight: bold;
display: block;Sintaxis
Las etiquetas <h1>-<h6> vienen en pares, por lo que la etiqueta de cierre es obligatoria.
Ejemplo de las etiquetas HTML <h1>-<h6>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>First-level heading</h1>
<h2>Second-level heading</h2>
<h3>Third-level heading</h3>
<h4>Fourth-level heading</h4>
<h5>Fifth-level heading</h5>
<h6>Sixth-level heading</h6>
</body>
</html>Los elementos <h1>-<h6> no deben usarse para marcar subencabezados, subtítulos, títulos alternativos y eslóganes, a menos que estén destinados a ser el encabezado de una nueva sección o subsección.
Como el atributo align no está soportado en HTML5, usa la propiedad CSS text-align en su lugar.
Creación de un esquema de documento
Los encabezados no tratan sobre el tamaño, sino sobre la estructura. Piensa en <h1>-<h6> como la tabla de contenidos de tu página. <h1> nombra toda la página, cada <h2> abre una sección principal y <h3> (y niveles más profundos) anidan subsecciones dentro de él, igual que 1 → 1.1 → 1.1.1 en un esquema impreso.
En el ejemplo a continuación, un artículo tiene un título <h1>, dos secciones <h2> y una subsección <h3> anidada bajo una de ellas. Lee solo los encabezados y ya entenderás de qué trata la página:
<!DOCTYPE html>
<html>
<head>
<title>Growing Tomatoes at Home</title>
</head>
<body>
<article>
<h1>Growing Tomatoes at Home</h1>
<p>A beginner's guide to a healthy tomato harvest.</p>
<h2>Choosing a Variety</h2>
<p>Cherry tomatoes are forgiving; beefsteak types need more care.</p>
<h2>Planting and Care</h2>
<p>Tomatoes need full sun and consistent watering.</p>
<h3>Watering Schedule</h3>
<p>Water deeply two to three times a week, more often in heat.</p>
<h3>Common Pests</h3>
<p>Watch for aphids and hornworms on the underside of leaves.</p>
</article>
</body>
</html>Los encabezados <h3> pertenecen al <h2> "Planting and Care" porque aparecen después de él y describen partes del mismo. Observa que el ejemplo nunca salta de <h1> directamente a <h3> — cada nivel sigue al anterior.
Dar estilo a los encabezados con CSS
Para cambiar cómo se ve un encabezado — su color, tamaño, alineación o espaciado — usa CSS, no un nivel de encabezado diferente. Elige la etiqueta de encabezado según su lugar en el esquema y luego dale el estilo que desees:
<!DOCTYPE html>
<html>
<head>
<title>Styled headings</title>
<style>
h1 {
color: #224cc5;
text-align: center;
}
h2 {
color: #22c599;
font-size: 22px;
}
h3 {
color: #bc22c5;
text-transform: uppercase;
letter-spacing: 2px;
}
</style>
</head>
<body>
<h1>Growing Tomatoes at Home</h1>
<h2>Choosing a Variety</h2>
<h3>Watering Schedule</h3>
</body>
</html>Accesibilidad y orden de encabezados
Los usuarios de lectores de pantalla rara vez leen una página de arriba a abajo. En cambio, abren una lista de encabezados y saltan entre ellos, de la misma manera que un lector con visión hojea los títulos en negrita. Esto solo funciona cuando los encabezados forman un esquema correcto y sin saltos.
Dos reglas hacen que los encabezados sean accesibles:
- No saltes niveles. Ve de
<h1>→<h2>→<h3>, no de<h1>→<h3>. Un nivel omitido hace que la tecnología de asistencia informe una sección sin elemento padre. - No elijas un encabezado por su tamaño visual. Si quieres un título de sección pequeño, usa el nivel correcto (por ejemplo
<h3>) y redúcelo con CSS font-size. Nunca uses<h4>solo porque casualmente se ve más pequeño.
Los dos fragmentos a continuación marcan el mismo contenido. El primero rompe el esquema; el segundo lo mantiene intacto:
<!-- ❌ Bad: skips from h1 to h3, then jumps back to h2 -->
<h1>Page Title</h1>
<h3>Introduction</h3>
<h2>Main Section</h2>
<h5>A Detail</h5>
<!-- ✅ Good: every level follows the one above it -->
<h1>Page Title</h1>
<h2>Introduction</h2>
<h2>Main Section</h2>
<h3>A Detail</h3>Usa solo un <h1> por página. El <h1> responde a la pregunta "¿de qué trata esta página?" — tener varios confunde esa respuesta tanto para los motores de búsqueda como para los lectores de pantalla. (Es posible que hayas visto consejos más antiguos que permitían un <h1> por <article> o <section>; esto dependía de un algoritmo de esquema de documento que ningún navegador implementó jamás, así que limítate a un único <h1> por página.) El título de la página mostrado en la pestaña del navegador se establece por separado con la etiqueta <title> dentro del <head>.
Para una visión más amplia de cómo funcionan juntos los seis niveles, consulta el capítulo de Encabezados HTML.
Atributos
Las etiquetas <h1> a <h6> no tienen atributos propios específicos del elemento. Dos atributos del conjunto global son especialmente comunes en los encabezados:
| Atributo | Valor | Descripción |
|---|---|---|
| id | text | Otorga al encabezado un identificador único para que pueda ser apuntado por un enlace de anclaje (#section-name) o por CSS y JavaScript. |
| align | left, right, center, justify | Establece la alineación horizontal del encabezado. Obsoleto — no está soportado en HTML5; usa la propiedad CSS text-align en su lugar. |
Un uso común de id es permitir que los lectores salten directamente a una sección:
<h2 id="planting">Planting and Care</h2>
<!-- Elsewhere on the page or site -->
<a href="#planting">Skip to Planting and Care</a>Las etiquetas <h1> a <h6> también admiten los Atributos globales y los Atributos de evento.