Te contamos por qué son tan importantes los encabezados en HTML y cómo utilizarlos de la mejor manera.

Los encabezados HTML o heading tags son etiquetas de código HTML que se utilizan para definir los títulos y subtítulos de una página. ¿Y cómo se definen estos encabezados? Con la etiqueta <Hn> donde “n” es un número entre 1 y 6 que indica la jerarquía de dicha cabecera.

Es decir, con esta etiqueta podemos implementar seis niveles de encabezado en el documento: <h1> es el más relevante y <h6> el menos relevante.

Además, son una potente herramienta de SEO (Search Engine Optimization) ya que, gracias a estos encabezados HTML podemos brindarle jerarquía a la información e indicarle a los motores de búsqueda de qué va el contenido de nuestra página web. Un artículo (¡como este!) puede tener cientos y cientos de palabras, pero un buscador como Google quiere saber cuáles son los temas principales, y para eso se fija en lo que pongamos en estos títulos.

Recordemos que una etiqueta es un fragmento de texto rodeado por paréntesis angulares <>, que tiene una función y uso específico y se utiliza para escribir código HTML. Estas etiquetas HTML suelen ser semánticas: describen cómo entender y mostrar lo que encierran. La jerarquía de dichas etiquetas HTML proveen estructuras semánticas anidadas y el navegador las usa para saber cómo interpretar y mostrar el contenido de la página web.

?Aprende más sobre etiquetas HTML en este artículo de nuestro blog

¿Para qué se usa la etiqueta “H”?

h1: Etiqueta de títulos

El <h1> es una etiqueta que permite identificar aquellas frases que conforman el título principal de un contenido de una página web. Es fundamental que este encabezado, por ser el más relevante, resuma en una frase el contenido de dicha página. También es esperable que, tanto para los motores de búsqueda como para los usuarios, esté situado en el primer tramo de un documento web.

h2: Etiqueta de subtítulos

El <h2> es la etiqueta que en HTML permite identificar a los subtítulos. Normalmente se utilizan para producir un corte en el contenido y por supuesto, brindarle más información a los motores de búsqueda.

Etiquetas h3, h4, h5 y h6

Las etiquetas <h3>, <h4>, <h5> y <h6> son utilizados para identificar subtítulos de menor jerarquía que se encuentran presentes dentro de secciones de <h2> y permite ser minucioso con el contenido de nuestra página web. Obviamente, a mayor número de etiquetas, menor relevancia para los motores de búsqueda.

Veamos un ejemplo:

El siguiente código muestra todos los niveles de encabezado:

<h1>Heading level 1</h1>

<h2>Heading level 2</h2>

<h3>Heading level 3</h3>

<h4>Heading level 4</h4>

<h5>Heading level 5</h5>

<h6>Heading level 6</h6>

Mira cómo se ve ;)

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

Ten en cuenta que la etiqueta <h> podemos escribirla tanto en mayúsculas como en minúsculas. Es lo mismo escribir <h1> que <H1> aunque lo convencional es hacerlo en minúsculas :)

¿Cómo utilizar correctamente las etiquetas de encabezado HTML?

Sigue estas buenas prácticas y optimiza el uso de las etiquetas de encabezado HTML en tu código ;)

• Evita omitir niveles de encabezado HTML. Es decir, comienza siempre con <h1>, después utiliza la <h2> y así sucesivamente.
• Evita utilizar el <h1> más de una vez en una página. Esta etiqueta se usa una vez para mostrar el título de la página, seguido por los demás encabezados HTML, que comienzan con <h2>.
• Tampoco debes utilizar niveles inferiores para reducir el tamaño de la fuente. Para esto, aplica la propiedad CSS font-size ;)

? ¿Quieres aprender más sobre HTML? Lee este artículo

Si te interesa aprender desde cero a programar en HTML, aplica a Henry y ¡acelera tu carrera en tecnología hoy! ?

Preguntas Frecuentes ?

¿Qué son los encabezados HTML?

Los encabezados HTML o heading tags son etiquetas de código HTML que se utilizan para definir la títulos y subtítulos de una página.

¿Para qué se usa la etiqueta “H1”?

El <h1> es una etiqueta que permite identificar aquellas frases que conforman el título principal de un contenido de una página web. Es fundamental que este encabezado, por ser el más relevante, resuma en una frase el contenido de dicha página.

¿Para qué se utiliza la etiqueta “H2”?

El <h2> es la etiqueta que en HTML permite identificar a los subtítulos. Normalmente se utilizan para producir un corte en el contenido y por supuesto, brindarle más información a los motores de búsqueda.

¿Cuál es la función de las etiquetas "H3", "H4", "H5" y "H6"?

Las etiquetas <h3>, <h4>, <h5> y <h6> son utilizados para identificar subtítulos de menor jerarquía que se encuentran presentes dentro de secciones de <h2> y permite ser minucioso con el contenido de nuestra página web. Obviamente, a mayor número de etiquetas, menor relevancia para los motores de búsqueda.

¿Cómo utilizar correctamente las etiquetas de encabezado HTML?

Para utilizar correctamente las etiquetas de encabezado HTML sigue alguna de estas prácticas: evita omitir niveles de encabezado HTML, evita utilizar el <h1> más de una vez en una página. Tampoco debes utilizar niveles inferiores para reducir el tamaño de la fuente, para esto, aplica la propiedad CSS font-size.