En HTML, además de texto normal y corriente, podemos crear una serie de títulos o cabeceras para las diferentes secciones de nuestro documento. Existen hasta 6 encabezados distintos dependiendo de sus niveles de importancia.
Las etiquetas correspondientes son <h1>, <h2>, <h3>, <h4>, <h5> y <h6>. La letra “h” al principio del nombre de estas etiquetas proviene de la palabra inglesa ‘heading’ que significa “encabezado”. Detrás de la letra hay un número del uno al seis que indica la importancia del encabezado, de tal manera que <h1> es el más importante, <h2> es un poco menos importante, y así hasta <h6> que es el de menor importancia.
Ahora veamos un ejemplo de cómo funcionan:
- Abrimos un documento de texto con un editor de texto tal como el Bloc de Notas de Windows o similar.
- Seguimos los pasos para crear una estructura básica de una página web.
- Una vez tengamos esta estructura, detrás de la etiqueta <body> escribimos:
<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<h4>Encabezado 4</h4>
<h5>Encabezado 5</h5>
<h6>Encabezado 6</h6> - Guardamos el archivo en formato HTML, es decir, con la extensión .htm o .html.
Finalmente, abrimos el archivo en nuestro explorador de Internet. El resultado debería ser algo similar al siguiente:
Encabezado 1
Encabezado 2
Encabezado 3
Encabezado 4
Encabezado 5
Encabezado 6
El resultado depende además de si usamos CSS en nuestra página web (como es el caso que estáis viendo aquí).
Aparte de los atributos estándard, estos elementos admiten el siguiente atributo propio:
- align: sirve para alinear el texto y tiene como valor “left”, “right”, “center” o “justify” (ejemplo: <h1 align=”center”>. En HTML 4.01 dejó de usarse aunque es soportado por la mayoría de los navegadores actuales. En XHTML 1.0 este atributo no está admitido.
HTML sirve, entre otras cosas, para establecer un orden en el texto. Se deben marcar correctamente los encabezados de la página y no mezclar los niveles de encabezados aleatoriamente sólo para aprovechar los distintos tamaños de fuente ya que se considera una mala práctica y además afecta a la accesibilidad del sitio web. En otras palabras, aunque se puede hacer, y de hecho es habitual verlo, están mal vistas cosas tales como:
- Usar la etiqueta <h2> en lugar de <h1> porque el tamaño de fuente de <h2> se adecua mas al diseño de nuestra página.
- Usar como encabezados un texto normal al que se le ha modificado el tamaño de fuente.
- Usar el orden, por ejemplo, h1 > h4 > h2 > h4 > h1 saltándonos el orden lógico de los niveles (h1 > h2 > h3 > h2 > h1) solo porque el tamaño de fuente de un encabezado concreto no nos gusta.
En todos estos casos, lo correcto sería modificar el tamaño de fuente mediante la hoja de estilos CSS para adaptarlo a lo que nosotros queremos pero siempre manteniendo la estructura lógica del documento.
El correcto uso de estas etiquetas facilita la navegación mediante lectores de pantalla como JAWS, el navegador Opera nos permite saltar al siguiente encabezado pulsando la tecla “S” y retroceder al anterior con la tecla “W” y algunos buscadores como Google, evalúan de manera más alta las páginas bien estructuras y las palabras clave cuando aparecen en encabezados reales. Por eso es importante el contenido correcto de estos encabezados.
