¿Alguna vez has visto una página web que estaba tan desordenada que resultaba dificil de comprender?
¿O tal vez has leído un artículo que era un tocho de texto y no sabías por dónde empezar?
Pues eso es porque no se utilizan correctamente los encabezados en HTML, que es precisamente de lo que hablaremos a continuación.
Veremos qué son los encabezados en HTML y cómo los puedes utilizar de forma correcta.
Al final de este artículo, podrás crear páginas web y escribir artículos bien organizados y, lo más importante, fáciles de entender.
Por cierto, recuerda que este capítulo forma parte del diccionario HTML del canal Dropcoding, donde vemos todas las etiquetas de este lenguaje.
Y ahora, vamos al lío.
Qué son los encabezados
Los encabezados son etiquetas HTML que se utilizan para definir los títulos y subtítulos de una página web.
Seguramente has oído esto de h1, h2, h3, h100… (bueno, h100 no, que no existen…)
Hay seis niveles de encabezados, desde el más importante (h1), hasta el menos importante (h6).
Por qué son importantes los encabezados.
Los encabezados son importantes por varias razones:
- Ayudan a estructurar el contenido de una página web: Permiten a los usuarios entender rápidamente el contenido de una página, incluso si no leen todo el texto (Que normalmente suele ser lo habitual).
- Resaltan la información importante: Puedes utilizarlos para resaltar aquella información que es relevante dentro de una página. Por ejemplo el título de la página, o los subtítulos de las secciones.
- Mejoran la accesibilidad: Los encabezados pueden ayudar a que las páginas web sean más accesibles, sobre todo para aquellas personas que tienen algunas discapacidades visuales.
Cómo se usan los encabezados
Los encabezados se utilizan envolviendo el texto que se desea resaltar en una etiqueta de encabezado.
Por ejemplo, para crear un encabezado de nivel 1 (El título de la página web), se escribiría el siguiente código HTML:
Etiqueta de apertura → <h1>Este es un encabezado de nivel 1</h1> ← Etiqueta de cierreEl texto «Este es un encabezado de nivel 1» se mostrará en la página web como un título grande y destacado.
La importancia jerárquica
No puedes poner un h4 y luego un h1. Todo tiene que seguir una jerarquía: Primero un h1, luego un h2, luego un h3, h4, h5… y así hasta el h6. Evidentemente puedes intercalarlos, pero siempre siguiendo un orden jerárquico.
Vamos con un ejemplo para que lo veas más claro:
<body>
<h1>Este es un Encabezado H1</h1>
<h2>Este es un subencabezado</h2>
<p>Este es un párrafo que sigue al encabezado H1.</p>
</body>En este ejemplo puedes ver:
- El h1 sería el título de la página, el encabezado más importante del documento. Has de saber que solo puede haber un h1 por página. Puedes poner todos los sub-encabezados, o todos los subtítulos que quieras pero Título solo puede haber uno.
- Después del h1, tendrías que poner un <h2>: Si quieres crear una sección nueva tienes que poner un h2.
- Luego puedes poner un h3: Es lo ideal, es no saltar directamente a un h4 o un h5, o un h6. Todo tiene que seguir un orden jerárquico, como te he comentado anteriormente.
- Después de varios subtítulos, vuelves a tener un h2.
Esta es la forma correcta de hacerlo.
Ojo: No es lo mismo <title> que h1. La etiqueta <title> va dentro de la etiqueta head, y el h1 es el título que se mostraría en tu sitio web.
Encabezados responsive
Ten en cuenta que los encabezados pueden ser responsive, es decir, se pueden adaptar a los diferentes tamaños de la pantalla (móviles, tablets, ordenadores..) .
Para ello, puedes utilizar las propiedades CSS, por ejemplo media queries:
@media (max-width: 768px) {
h1 {
font-size: 22px;
}
}Si quisieras que el h1 tuviera varias medidas en función de la pantalla del usuario, simplemente colocarías un font: Size de 28 píxeles (por ejemplo). Y luego puedes ponerle un media querie en ccs con un max-width. Es decir, cuando la pantalla sea más pequeña que 768 px , tendrá una medida de 22 px.
De esta forma, el tamaño de la fuente es más pequeño en dispositivos móviles.
Esta es una manera de hacer el texto responsive y que se vea mucho mejor en pantallas más pequeñas, sino un título puede ocupar toda la pantalla del móvil, y claro, no mola.
Ahora sí que podrás crear páginas web bien organizadas y fáciles de entender.
Recuerda que si te has quedado con alguna duda, o tienes alguna sugerencia, puedes dejarla en los comentarios.
Nos vemos en la próxima lección. Adiós.