Etiquetas HTML <h1>-<h6>
Los elementos <h1> a <h6> se utilizan para definir seis niveles de encabezados HTML, siendo <h1> el nivel más alto (o más importante) y <h6> el menos importante.
TIP
Cada página web debe tener solo un encabezado <h1>. Como los motores de búsqueda lo usan 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 contenido de un documento.
Si quieres 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 en una página.
Las etiquetas de encabezado también tienen valor para el SEO. Un motor de búsqueda intenta averiguar dos cosas sobre tu página: de qué trata la página y qué tan buena es. Una de las principales cosas que los motores de búsqueda observan para determinar el contenido de una página son las palabras dentro de las etiquetas de encabezado.
Cuando una página tiene una sola pieza de contenido, su título principal debe estar en una etiqueta <h1>, y 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.
Hay 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 esa pieza de 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 normalmente se coloca en <h1>. Luego, los títulos de todas las partes individuales listadas deben usar etiquetas <h2>.
Como las etiquetas <h1> a <h6> son elementos de nivel de bloque, siempre comienzan en una nueva línea y ocupan todo el ancho disponible.
De forma predeterminada, las etiquetas <h1>-<h6> tienen las siguientes propiedades: margin-left, margin-right, font-weight, display.
Etiquetas HTML <h1>-<h6>
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>:
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>Resultado
DANGER
Los elementos <h1>-<h6> no deben usarse para marcar subtítulos, subtítulos secundarios, títulos alternativos ni eslóganes, a menos que estén destinados a ser el encabezado de una nueva sección o subsección.
TIP
Como el atributo align no está soportado en HTML5, usa en su lugar la propiedad CSS text-align.
Ejemplo de la etiqueta HTML <h1>:
Ejemplo de la etiqueta HTML <h1>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: #224cc5;
text-align: center;
}
</style>
</head>
<body>
<h1>First-level heading</h1>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>Ejemplo de la etiqueta HTML <h2>:
Ejemplo de la etiqueta HTML <h2>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
color: #22c599;
text-align: right;
}
</style>
</head>
<body>
<h2>Second-level heading</h2>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Ejemplo de la etiqueta HTML <h3>:
Ejemplo de la etiqueta HTML <h3>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h3 {
color: #bc22c5;
font-size: 20px;
padding: 10px 0;
}
</style>
</head>
<body>
<h3>Third-level heading</h3>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Ejemplo de la etiqueta HTML <h4>:
Ejemplo de la etiqueta HTML <h4>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h4 {
color: #1c87c9;
margin: 10px 0;
letter-spacing: 4px;
text-indent: 50px;
}
</style>
</head>
<body>
<h4>Fourth-level heading</h4>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Ejemplo de la etiqueta HTML <h5>:
Ejemplo de la etiqueta HTML <h5>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h5 {
background-color: #1c87c9;
color: #ffffff;
text-transform: uppercase;
padding: 15px 20px;
}
</style>
</head>
<body>
<h5>Fifth-level heading</h5>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Ejemplo de la etiqueta HTML <h6>:
Ejemplo de la etiqueta HTML <h6>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h6 {
font-style: italic;
font-family: sans-serif;
color: #401cc9;
font-size: 16px;
line-height: 1.625;
margin: 0;
}
</style>
</head>
<body>
<h6>Sixth-level heading</h6>
<p>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</p>
</body>
</html>Atributos
| Atributo | Valor | Descripción |
|---|---|---|
| align | left right center justify | Define la alineación horizontal del contenido de la etiqueta. No compatible con HTML 5. |
Las etiquetas <h1> a <h6> admiten los atributos globales y los atributos de evento.
Cómo dar estilo a las etiquetas HTML <h1>-<h6>
{
"tag_name": "h1-h6"
}Práctica
Which of the following is true about HTML heading tags?