Teoría
Teoría

Las etiquetas h1–h6: encabezados en HTML

Ya terminamos los grandes bloques de las páginas. Volvamos a la página principal para trabajar en la estructura del texto.

Los encabezados organizan las partes principales de un texto. HTML tiene una familia de etiquetas para ellos, desde <h1> hasta <h6>. <h1> representa el encabezado de mayor importancia y <h6>, el de menor importancia. La «h» viene de «heading», que significa «encabezado» en inglés.

En la práctica, pocos textos necesitan más de tres niveles. Por eso se usan sobre todo <h1>, <h2> y <h3>:

<h1>Especificación HTML</h1>
<h2>Sección 1. Introducción</h2>
<h3>Sección 1.1. Origen del lenguaje</h3>

Los buscadores tienen en cuenta los encabezados. Una jerarquía clara también es importante para la accesibilidad del documento. Vale la pena aprender a usarlos bien.

<h1> es el encabezado principal de la página. Su texto debe describir el contenido general. En nuestras páginas usaremos un solo encabezado de primer nivel.

En las páginas principales suele colocarse dentro del encabezado del sitio. Haremos lo mismo en nuestro prototipo.

En HTML5 se propuso que las secciones del documento pudieran tener su propia jerarquía de encabezados. Así, varios <section> o <article> podían incluir sus propios <h1>, <h2> y <h3>.

Ese mecanismo no llegó a funcionar de forma consistente en los navegadores y las herramientas de accesibilidad. Por eso conviene mantener una jerarquía de encabezados coherente en todo el documento.

index.html

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Mi primer sitio web</title> <link rel="stylesheet" href="outlines.css"> </head> <body> <header> Encabezado del sitio </header> <main> <nav> Navegación </nav> <section> ¡Hola a todos! Te doy la bienvenida a mi primer sitio web. Hasta hace poco no sabía qué hacía alguien que se dedica a la maquetación web. Ahora encontré estos ejercicios de HTML y CSS y quiero dedicarme a eso. Incluso tengo un instructor, Cupcake, que no me dejará distraerme y seguirá mis avances. Mi primera tarea es llevar un diario y contar con sinceridad todos mis logros. </section> <section> Sección de habilidades </section> </main> <footer> Pie de página del sitio </footer> </body> </html>

ObjetivosRealizado

Sustituye el texto provisional del encabezado del sitio por una etiqueta <h1> con el texto Mi primer sitio web.