Para cumplir el objetivo de una correcta organización de la información en un documento HTML, es necesaria la jerarquización y agrupación de contenido. Por esta razón, queremos hablarte sobre los niveles jerárquicos de títulos en HTML y cuáles son las ventajas de usarlos.
Cuáles son los niveles jerárquicos de títulos en HTML
En HTML tenemos 6 niveles de títulos comprendidos como las etiquetas <h1>, <h2>, <h3>, <h4>, <h5> y <h6>, cuya función principal es la de poder jerarquizar los bloques de contenido. En este caso, la etiqueta <h1> corresponde al título principal del documento y en él se agrupan o contienen los siguientes bloques. Por su parte, es muy poco habitual emplear las etiquetas h5 y h6. En cuanto a las etiquetas h2 y h3, estas se usan con mayor frecuencia e incluso para SEO son casi obligatorias.
Si bien es posible que después de una etiqueta <h1> se introduzca una etiqueta <h3>, esta práctica no es recomendable. Ten en cuenta que estos niveles de títulos contribuyen a una estructura semántica de la información, por lo tanto, que no exista una correcta jerarquización genera confusiones, sobre todo a los softwares y motores de búsqueda.
Una de las formas comunes de establecer las diferencias y distinguir información importante es la tipografía. Por eso es común ver que los títulos tienen mayor tamaño que el texto y que los subtítulos (<h2> y <h3>) tienen otro color y tamaño. Sin embargo, esto no es un requisito ineludible. Según el estilo designado por el desarrollador, es posible que la información esté debidamente estructurada con las correspondientes etiquetas de h1-h6 y, aun así, que toda la página tenga un mismo tipo, color y tamaño de letra.
Ventajas de usar los niveles jerárquicos de títulos en HTML
La ventaja principal del uso correcto de los niveles jerárquicos de títulos en HTML es la correcta estructuración de la información. Aun así, esta no es la última ventaja, por lo que a continuación te mostramos de forma breve algunos otros beneficios:
- Mejora la accesibilidad: recuerda que muchos usuarios tienen ciertas limitaciones o discapacidades que obstaculizan su navegación en la web. Para ellos se han diseñado diferentes herramientas de acceso, como el caso de los lectores de pantalla que usan los internautas ciegos. El lector de pantalla, por ejemplo, requiere que la información del sitio web esté bien estructurada, porque de lo contrario no logrará descifrar qué leer primero y qué viene después. Ten en cuenta que si el texto lo estructuras con colores o cambios manuales de tamaño de la letra, estas variaciones no son descifrables para los softwares, que no ven con nuestros ojos, sino a través de los códigos.
- Permite una rápida lectura: en la actualidad, todo se mueve de manera muy rápida y los usuarios de los sitios web no somos la excepción. Por esto, queremos encontrar la información que necesitamos sin mayores distracciones. Así que si estamos haciendo una consulta, la mejor forma de saber si un artículo nos sirve o no, es con la tabla de contenido o una mirada veloz a los subtítulos del mismo.
- Mejora el posicionamiento del sitio web: si un artículo de tu página web es original y posee ciertas características afines a SEO, pero no incluye h2 o h3 que vincule las palabras clave o que estén bien construidos, difícilmente estará en los primeros lugares de Google.
En conclusión
Si quieres que tu sitio web esté posicionado en los primeros lugares de los motores de búsqueda, este debe estar estructurado semánticamente. Por esta razón, resulta importante que uses de forma adecuada las etiquetas de títulos HTML. Si deseas profundizar al respecto, te invitamos a inscribirte en nuestros cursos de desarrollo web.
