Saltar al contenido principal

Ejercicio práctico 2: Cómo usar etiquetas de encabezado HTML (h1 a h6)

En este ejercicio práctico de html, aprenderemos a utilizar las etiquetas de encabezado. Del inglés heading, las etiquetas comienzan con la letra h y van desde h1 a h6. Los encabezados <h1> deben utilizarse para los encabezados principales, seguidos de los encabezados <h2>, luego los menos importantes <h3>, y así sucesivamente.

<h1> define el encabezamiento más importante. <h6> define el encabezado menos importante.

tip

Es una buena práctica que cada página de tu sitio web cuente con "al menos" y "solo un" elemento <h1>.

Los encabezados son importantes​

Los motores de búsqueda utilizan los encabezados para indexar la estructura y el contenido de sus páginas web.

precaución

Utiliza los encabezados HTML sólo para los títulos. No utilices los encabezados para volver el texto más GRANDE o ponerlo en negrita.

Actividad​

Crea un documento HTML que use todas las etiquetas de encabezado de <h1> a <h6>.

Solución interactiva​

Logo DivZone de ad link
Plataforma IAConvierte el código en clientes.Pruébalo gratis

Solución con el código HTML completo​

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Encabezados</title>
  </head>
  <body>
    <h1>Encabezado 1</h1>
    <h2>Encabezado 2</h2>
    <h3>Encabezado 3</h3>
    <h4>Encabezado 4</h4>
    <h5>Encabezado 5</h5>
    <h6>Encabezado 6</h6>
  </body>
</html>

Variantes del mismo ejercicio​

Variante 1: Jerarquía realista de un artículo​

En un proyecto real, los headings se usan para estructurar contenido, no solo para mostrar todos los niveles. Este es un ejemplo de cómo se vería un artículo bien estructurado:

HTML
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Aprender HTML desde Cero</title>
  </head>
  <body>
    <h1>Aprender HTML desde Cero</h1>
    <p>Una guía completa para principiantes.</p>

    <h2>¿Qué es HTML?</h2>
    <p>HTML es el lenguaje de marcado que estructura la web.</p>

    <h3>Historia de HTML</h3>
    <p>Creado por Tim Berners-Lee en 1989.</p>

    <h3>Versiones de HTML</h3>
    <p>Desde HTML 1.0 hasta HTML5.</p>

    <h2>Primeros pasos con HTML</h2>
    <p>Configurá tu editor y creá tu primer archivo.</p>

    <h3>Estructura básica</h3>
    <p>DOCTYPE, html, head y body.</p>

    <h3>Etiquetas esenciales</h3>
    <p>Párrafos, enlaces, imágenes y listas.</p>
  </body>
</html>

Fijate cómo la jerarquía es lógica: un solo <h1>, secciones principales con <h2> y subsecciones con <h3>. Esta estructura es la que Google y otros buscadores premian.

Variante 2: Ejemplo de mal uso de headings (¡no hagas esto!)​

HTML
<!-- ❌ MAL USO: no copies este patrón -->
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>Mala Práctica</title>
  </head>
  <body>
    <h1>Título Principal</h1>
    <h1>Otro Título Principal</h1>
    <h1>Un Tercer Título Principal</h1>
    <!-- Múltiples h1 confunden a buscadores y lectores de pantalla -->

    <h2>Sección</h2>
    <h4>Subsección saltando h3</h4>
    <!-- Saltar niveles rompe la jerarquía semántica -->

    <h2 style="font-size: 60px;">Texto gigante con h2</h2>
    <!-- Usar headings para hacer texto grande es incorrecto: usá CSS -->
  </body>
</html>

Mini-desafío: Ponelo a prueba​

Creá la estructura de una página de blog con la siguiente jerarquía:

  • Título del blog: "Recetas de Cocina" (<h1>)
  • Dos secciones (<h2>): "Recetas Dulces" y "Recetas Saladas"
  • Cada sección debe tener dos subsecciones (<h3>): por ejemplo "Torta de Chocolate" y "Flan Casero" dentro de Recetas Dulces
  • Agregá un párrafo breve debajo de cada <h3>

El objetivo es practicar la jerarquía correcta sin usar más de un <h1> y sin saltar niveles (no pasar de h2 a h4).

Errores comunes con encabezados HTML​

ErrorPor qué es un problema
Múltiples <h1> en una páginaConfunde a buscadores y lectores de pantalla; cada página debe tener un solo título principal
Saltar niveles (h2 → h4)Rompe la jerarquía semántica y dificulta la navegación por teclado
Usar headings para agrandar textoPara eso existe CSS (font-size, font-weight); los headings son para estructurar, no decorar
No usar headingsLos buscadores no entienden la estructura de tu contenido y penalizan la falta de jerarquía
Poner solo un <h1> y nada másUna página sin subtítulos es difícil de escanear tanto para humanos como para bots

Preguntas frecuentes​

¿Puedo tener más de un <h1> en una página?​

Técnicamente HTML5 lo permite si usás <section> o <article>, pero no se recomienda. La mejor práctica para SEO y accesibilidad es tener un solo <h1> por página que describa el tema principal. Los navegadores y lectores de pantalla usan el <h1> como punto de referencia principal.

¿Los headings afectan el SEO?​

Sí, y mucho. Google utiliza los headings (<h1> a <h6>) para entender la estructura jerárquica de tu contenido. Un <h1> claro y descriptivo con palabras clave relevantes es uno de los factores on-page más importantes. Los <h2> y <h3> ayudan a distribuir la relevancia semántica en subtemas. Una buena jerarquía de headings puede hacer la diferencia entre la posición 10 y la posición 3.

Practicá con DivZone AI

¿Ya dominás los encabezados? Creá una página web con DivZone AI y fijate cómo el generador organiza los títulos con h1, h2 y h3 automáticamente. ¡Vas a ver en acción todo lo que aprendiste!

info

📘 Conocé más a fondo este tema acá 👉 Elementos fundamentales en HTML.