Creaste tu página web pero, ¿no sabes cómo organizarla, optimizarla, mejorar la experiencia de usuario y lograr que posicione en Google? Tranquilo, es algo que nos pasa a todos. Por eso vengo a explicarte la jerarquía HTML, una práctica que te ayudará a lograr una estructura limpia, accesible y fácilmente entendible por los motores de búsqueda.

¿Qué encontrarás en este post?

¿Qué es la jerarquía HTML?

Te decía que la jerarquía HTML es la organización del contenido de una página web, por medio de etiquetas que sirven para diferenciar los niveles de importancia de la información. Debes saber que estas etiquetas no solo afectan cómo se ve el contenido en tu página, sino también cómo Google y otros motores de búsqueda lo interpretan y lo indexan.

Etiquetas de encabezado: ¿Qué papel cumplen?

Resulta que las etiquetas de encabezado (<h1>, <h2>, <h3>, <h4>, <h5>, y <h6>) te ayudan a establecer la jerarquía. Ellas definen los títulos y subtítulos de la página, por eso tanto los usuarios como los motores de búsqueda logran entender fácilmente la organización de la información. Conoce los headings HTML aquí.

<h1>: Representa el título principal de la página. Solo debe haber uno por página, ya que indica el tema principal de esa página web.
<h2>: Son los subtítulos que dividen el contenido principal en secciones.
<h3>, <h4>, <h5>, <h6>: Son etiquetas de menor jerarquía que se utilizan para subdividir aún más las secciones y proporcionar detalles adicionales.

La jerarquía HTML en la estructura de la página: Así funciona

La jerarquía HTML también influye en cómo se organiza la página en términos de su estructura general. En un documento HTML, todos los elementos están contenidos dentro de la etiqueta <html>.

Esta etiqueta se divide en dos partes principales:

<head>: Aquí se encuentran los metadatos de la página, como el título, enlaces a hojas de estilo y scripts.
<body>: Esta es la parte visible de la página web, donde se encuentra el contenido real.

¿Para qué sirve la jerarquía HTML?

Te sirve para mantener tu sitio web organizado y accesible. Un plus adicional es que es excelente para el SEO, porque los motores de búsqueda como Google, utilizan esta jerarquía para comprender el contenido de una página web y determinar su relevancia en relación con las consultas de búsqueda.

Cuando usas correctamente las etiquetas que te expliqué antes, ayudas a Google a identificar cuáles son los temas principales de tu página. Así los puede clasificar y posiciona mejor tu sitio web en los resultados de búsqueda.

Por ejemplo:

Si estás creando una página sobre recetas de cocina, el título principal de la página puede ser un <h1> que diga “Recetas de Cocina Fáciles”.
Luego, los <h2> pueden ser los nombres de diferentes categorías de recetas, como “Recetas de Pasteles” o “Recetas Saladas”.
Dentro de cada categoría, los <h3> podrían ser los nombres de recetas individuales, como “Tarta de Manzana” o “Pizza Casera”.

De esta manera es como Google entiende la relación entre los temas y el contenido de tu página.

Ejemplo práctico de jerarquía HTML: Blog de viajes

Imagina que estás diseñando una página web para un blog de viajes.

El <h1> será el título principal del blog, por ejemplo, “Guía de Viajes por Europa”.
Luego, cada sección de la página (como destinos, consejos, experiencias, etc.) tendrá un <h2>,
Dentro de cada sección, podrías tener subtítulos más específicos, usando <h3>.

La jerarquía HTML queda así:

<!DOCTYPE html>
<html>
  <head>
    <title>Guía de Viajes por Europa</title>
  </head>
  <body>
    <h1>Guía de Viajes por Europa</h1>
    <h2>Destinos Populares</h2>
    <h3>París, Francia</h3>
    <p>Detalles sobre París...</p>
    <h3>Roma, Italia</h3>
    <p>Detalles sobre Roma...</p>
    <h2>Consejos de Viaje</h2>
    <h3>Qué empacar</h3>
    <p>Detalles sobre qué llevar...</p>
  </body>
</html>

Puedes ver cómo cada nivel de encabezado ayuda a organizar la página de manera lógica y fácil de seguir.

¿Cómo aplicar la jerarquía HTML en tu página web? Sigue estos consejos

Usa un solo <h1> por página: El <h1> debe ser único y reflejar el tema principal de la página.
Usa las etiquetas <h2> a <h6> de manera secuencial: Cada subsección debe tener su propio título, comenzando por un <h2>, luego un <h3>, y así sucesivamente. Evita saltarte niveles, como ir directamente de un <h1> a un <h4>.
Mantén el contenido relevante: Asegúrate de que el contenido de cada sección esté relacionado con el título que la precede. Esto no solo mejora la experiencia del usuario, sino que también favorece el SEO.
No uses las etiquetas de encabezado solo para estilo: Las etiquetas <h1>, <h2>, etc., deben usarse exclusivamente para organizar el contenido. No las utilices solo para dar formato al texto.

Te invito a aprender a crear páginas web que no solo sean funcionales, sino también optimizadas para el SEO y la accesibilidad, con el Bootcamp de Desarrollo Web de KeepCoding. Durante este curso, aprenderás desde lo más básico hasta las técnicas más avanzadas para estructurar tus proyectos web y posicionarlos en los primeros lugares de los motores de búsqueda. ¡Apúntate hoy mismo y da el primer paso hacia tu futuro como desarrollador web!