Armonía | En definitiva...

Como ya dije hace un par de dias, pretendo escribir una serie de posts hablando sobre la carga semántica de algunas etiquetas XHTML. Pues bien, hoy es el turno de los headings, (<h1> <h2> <h3> <h4> <h5> <h6>), que, o bien se olvidan por completo, o bien se usan indebidamente solo por el hecho de que los navegadores lo renderizan con distintos tamaños, etc.

Hasta cierto punto comprendo por qué este elemento ha sido olvidado o mal utilizado hasta la saciedad, ya que en la actualidad, la mayoria de los diseños que se realizan no se hacen teniendo en cuenta el contenido que hay detrás, sino el aspecto externo que hay delante.

Como en el post anterior, voy a hacer uso del diccionario de la RAE para conocer el significado de la palabra "título".

título.

1. m. Palabra o frase con que se da a conocer el nombre o asunto de una obra o de cada una de las partes o divisiones de un escrito.

Veamos, ...cada una de las partes o divisiones de un escrito. ¿Eso qué significa? Siempre que tengo que explicar el uso de los headings uso el siguiente ejemplo. Imaginad que teneis que hacer un trabajo para el instituto, (los mas viejos que recuerden sus tiempos mozos). Una vez que teniais todo el trabajo redactado, para rellenar se metía un índice, enumerando las distintas secciones del trabajo. Pues bien, cada sección de ese trabajo equivaldría a un heading en un documento XHTML.

Además, cada sección de nuestros trabajos tiene una mayor o menor relevancia dependiendo del nivel que ocupe dentro de la lógica del documento. Pues para eso estan los distintos niveles de las etiquetas heading, desde el <h1> hasta el <h6>, donde la más importante es la <h1> y la menos la <h6>.

Atendiendo a esto último, e imaginando un documento cuya lógica fuese esta:

• Encabezado 1
  • Encabezado 1.1
  • Encabezado 1.2
• Encabezado 2
  • Encabezado 2.1
    • Encabezado 2.1.1

El código de nuestra página, usando de manera correcta los headings, sería:

<h1>Encabezado 1</h1>

<!-- Texto texto texto -->
	
<h2>Encabezado 1.1</h2>
<!-- Texto texto texto -->
	
<h2>Encabezado 1.2</h2>
<!-- Texto texto texto -->
	

<h1>Encabezado 2</h1>
<!-- Texto texto texto -->
	
<h2>Encabezado 2.1</h2>
<!-- Texto texto texto -->
	
<h3>Encabezado 2.1.1</h3>

<!-- Texto texto texto -->

Como se puede observar, para cada nivel usamos un heading distinto, a mayor nivel de profundidad en la lógica del documento, mayor será el tipo de heading que debamos usar. Por cierto, echandole un vistazo a la información que circula sobre XHTML 2.0, me doy cuenta de que los distintos niveles de esta etiqueta desaparecerán, dando paso a una sola, <h>, cuya profundidad se determinará atendiendo al anidamiento de la misma.

Espero que este post os sirva de algo, y que a partir de ahora pensemos un poco en la información que queremos dar en nuestras páginas para poder crear una estructura documental lógica. (Un truquito, comenzad a desarrollar las páginas dejando el CSS para el final).