Encabezados HTML
El encabezado es un título al comienzo de una página o sección de un libro. Es muy importante tener diferentes tipos de encabezados para estructurar el contenido de la página web. Los encabezados ayudan a los motores de búsqueda a comprender e indexar la estructura de la página web.
Etiquetas de encabezado
Hay 6 niveles de encabezados en HTML: <h1>, <h2>, <h3>, <h4>, <h5> y <h6>.
Las etiquetas <h1> - <h6> se usan para marcar encabezados según su importancia. La etiqueta <h1> representa el encabezado más importante de la página web y la etiqueta <h6> representa el menos importante y el más pequeño.
Ejemplo de 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>Importancia del encabezado
- Los encabezados HTML destacan temas importantes y la estructura del documento, mejorando así la interacción del usuario.
- Usa solo una etiqueta
<h1>en cualquier página web. La etiqueta debe describir de qué trata tu página y también 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 del encabezado
Puedes cambiar el tamaño predeterminado de los encabezados. Establece el tamaño de cualquier encabezado con la propiedad CSS font-size:
Ejemplo de 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 ponerlo 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 omitas 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.
Reglas horizontales HTML
La etiqueta <hr> define un cambio temático entre elementos a nivel de párrafo en una página HTML. El elemento <hr> se usa para separar contenido en una página HTML:
Ejemplo de encabezados separados con el elemento <hr>:
Ejemplo del elemento HTML <hr>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is heading 1</h1>
<p>Lorem ipsum is simply dummy text...</p>
<hr />
<h2>This is heading 2</h2>
<p>Lorem ipsum is simply dummy text...</p>
<hr />
<h3>This is heading 2</h3>
<p>Lorem ipsum is simply dummy text...</p>
</body>
</html>Elemento head de HTML
El elemento HTML <head> contiene metadatos (título del documento, conjunto de caracteres, estilos, enlaces, scripts), información específica sobre la página web que no se muestra al usuario.
Los metadatos proporcionan a los navegadores y a los motores de búsqueda información técnica sobre la página web.
Ejemplo del uso del elemento <head>:
Ejemplo del elemento HTML <head>
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
</head>
<body>
<p>HTML head element contains meta data.</p>
<p>Meta data is data about the HTML document.</p>
</body>
</html>¿Qué es un encabezado?
No confundas la etiqueta de encabezado HTML con una etiqueta de encabezado HTML porque los encabezados son un fragmento de texto que se repite en la parte superior de la página. El encabezado es un título o subtítulo que se muestra en la página web.
Práctica
¿Cuál de las siguientes afirmaciones es verdadera sobre los encabezados HTML?