h1, h2, h3… Estructuración jerárquica de documentos.

Tal vez uno de los errores más difundidos en el diseño web, sea la incorrecta utilización de los elementos h1, h2, h3, h4, h5 y h6.
Es muy común ver un mal uso de estos, y como consecuencia, la pérdida del objetivo principal de los mismos.

Veamos este asunto con más detalle.

La primera confusión es la de relacionar estos elementos con estilos de título/subtítulo, en realidad, es “casi” así, pero a la inversa. Estos elementos están, en primera instancia, para ayudarnos a estructurar el documento. Podrían compararse con una lista como esta.

  1. Curly
  2. Larry
  3. Moe

Como pueden ver, en este tipo de listas, es imposible que, sin romper la lógica, tengamos dos 1, así como el orden, siempre es correlativo, exactamente lo mismo pasa con los h’s, cada uno define un nivel de jerarquía en nuestro documento, y como efecto secundario, podemos asignar (de paso) a estos elementos, estilos determinados para vestir mejor nuestro trabajo.

Existen seis niveles de encabezados, y por una escasa o nula interpretación del rol de los mismos, rara vez vemos más de h3, tampoco quiero decir con esto que es “obligatorio” usar hasta el h6, sino que muchas veces no se toma el tiempo necesario para jerarquizar correctamente la información que vamos a mostrar, y existe la tendencia a utilizarlos solamente como recurso de asignación de estilos.

Por una cuestión de correlación lógica, como comentaba antes, si en tu documento no hay un h1 o un h2, no podés usar h3 directamente, solo porque el estilo que tiene asignado le queda perfecto a ese subtítulo que estás usando, TIENE que tener arriba, en su jerarquía dos elementos que lo precedan (h1 y h2).

Esta secuencia se puede reiniciar en cualquier punto aunque hemos de tener en cuenta por ej, que si ya existe un h1 que le da importancia al documento en general, no se podrá utilizar otro h1 en el mismo documento, sí es posible repetir h2, h3 etc… ya que son “hijos” del h1 general que define el documento.

Por ej:

  • h1 → Los 3 chiflados
  • h2 → Curly
  • h3 → Torpe
  • h2 → Larry
  • h3 → Gracioso
  • h2 → Moe
  • h3 → Irascible

Esto es correcto, tenemos un h1 definiendo la jerarquía general y luego varios contenidos que componen este documento.Este otro, sería un ejemplo de mala utilización:

  • h1 → Los 3 chiflados
  • h2 → Hemp
  • h4 → Substituto
  • h2 → Larry
  • h3 → Gracioso
  • h2 → Moe
  • h3 → Irascible

Al pasar por alto la jerarquía, entre h2 y h4, estamos rompiendo la estructura jerárquica del documento y por tanto ya podemos ir olvidándonos de una correcta validación.

El uso de encabezados es algo que no tendríamos que tomar a la ligera. Es un tema muy interesante e importante para la correcta estructuración de los trabajos, solo hay que tomarse un poco más de tiempo antes de pasar a código ese layout tan atractivo que tenemos y pensar mucho en cual es la jerarquía que le pretendemos dar al website.

One Response to

  1. Kto says:

    Me gustó el ejemplo de los Stooges, muy ilustrativo. Al fin me ha quedado claro el tema. Pensando en validar las paginas voy a tener que analizar el usar correctamente esto. Por otro lado en la teoría todo es perfecto pero en la práctica es otra cosa veremos como se aplican estas cosas en lo cotidiano, lo digo porque a veces me ha pasado tener que saltear un H, aunque admito pueda ser porque desde el vamos lo estaria usando mal.

Leave a Reply »