HTML: Encabezados

Los encabezados son elementos HTML que se utilizan para definir titulares o cabeceras de un documento o página web. Existen seis niveles de encabezados y van desde el <h1> hasta el <h6> (ordenados de mayor a menor importancia). El contenido va entre las etiquetas de apertura y cierre. Por ejemplo:

<h1>Esto es un título</h1>

El elemento <h1> es el encabezado más importante del documento, ya que permite establecer el título principal. Los encabezados secundarios (subtitulares) se introducen con los elementos <h2>, <h3>, <h4>, <h5> y <h6>, y permiten estructurar un artículo en varias secciones o apartados, según la importancia que tengan.

Por defecto, el encabezado de mayor importancia (<h1>) se verá con el tamaño de fuente más grande que el texto del resto de encabezados y de otros elementos de texto, como párrafos o citas. Los siguientes niveles de encabezado se verán cada vez más pequeños sucesivamente hasta llegar al encabezado <h6>.

Los encabezados son elementos de bloque, es decir, que empiezan en una línea nueva y ocupan todo el ancho posible, de manera que no cabe ningún otro elemento a su lado. La anchura ocupada por este tipo de elementos termina en los límites del elemento contenedor superior en la estructura del documento HTML.

Ejemplo de código de los seis elementos diferentes de encabezado:

<h1>Encabezado de primer nivel.</h1>
<h2>Encabezado de segundo nivel.</h2>
<h3>Encabezado de tercer nivel.</h3>
<h4>Encabezado de cuarto nivel.</h4>
<h5>Encabezado de quinto nivel.</h5>
<h6>Encabezado de sexto nivel.</h6>

Normas de uso

Dado que el <h1> es el más importante, es el primero que debe aparecer en el documento o página web. Después se utilizan los demás niveles, como el <h2>, el <h3>, etc., en caso de que sean necesarios, y así sucesivamente hasta el <h6>, que es el menos importante. Ejemplo de estructura:

<h1>Artículo sobre mascotas</h1>
  <h2>Los gatos</h2>
    <h3>El gato persa</h3>
    <h3>El gato siamés</h3>
  <h2>Los perros</h2>
    <h3>El pastor alemán</h3>
    <h3>El caniche</h3>
  <h2>Artículos relacionados</h2>

Debe existir un único elemento <h1> en la página o documento. Más de uno puede crear confusión sobre la temática principal de la página, ya sea de cara a los usuarios como de cara a los buscadores. Por tanto, debe evitar el uso de más de un <h1>. El resto de niveles pueden usarse en múltiples ocasiones.

Los encabezados deben tener un orden consecutivo, es decir, que se empieza con el <h1> y en caso de que sea necesario dividir el artículo usaremos el <h2> para crear secciones. En caso de que estas secciones necesiten dividirse, usaremos el <h3> y así sucesivamente. No es correcto usar un <h4> por encima de un <h3>, ni un <h2> como nivel superior de un <h1>.

Esto es incorrecto porque debería usarse el <h2> en vez del <h3>:

<h1>Encabezado de primer nivel</h1>
<h3>Encabezado de tercer nivel</h3>

Dado que el tamaño del texto de los encabezados cambia de más grande (<h1>) a más pequeño (<h6>), algunos diseñadores los utilizan por conveniencia con fines de diseño. Eso no debe hacerse. Para modificar el tamaño de la fuente debe usarse el código de las hojas de estilo CSS. Los encabezados deben usarse en los lugares que es necesario y no pensando en la estética.

Esto es incorrecto porque están desordenados:

<h3>Título del artículo</h3>
<h1>Texto más grande</h1>
← Artículo anterior
Artículo siguiente →