Headings: dando orden a tu XHTML

XHTML es un lenguaje estructural, y aunque no todas sus etiquetas sean “humanamente semánticas”, existe un grupo indispensable para dar una forma lógica a tus páginas: las cabeceras (headings)

Una de las posibilidades que nos brinda el XHTML es la de estructurar lógicamente un documento, es decir, de poder otorgarle un orden comprensible a la información que queremos presentar en él. Dentro de los elementos que nos otorga este lenguaje de marcado, existe una serie que está especialmente pensada para este propósito: se trata de los headings (cabeceras o títulos, en español).

En XHTML 1, existen seis etiquetas de marcado para cabeceras: <h1>, <h2>, <h3>, <h4>, <h5>, y <h6>, donde la más importante es <h1>, y la menos importante <h6>. Según el W3, las cabeceras deberían reflejar la estructura lógica del documento; no deberían ser usadas simplemente para agregar énfasis o para cambiar el tamaño de la las cabeceras deberían reflejar la estructura lógica del documento; no deberían ser usadas simplemente para agregar énfasis o para cambiar el tamaño de la letra. Una forma de revisar esta estructura lógica es a través del outline (resumen o contorno, en español) que generan nuestros documentos, el cual es posible revisar al validar un documento XHTML con la herramienta del W3.

Según el W3, una estructura lógica correcta sería más o menos así:

  • h1
    • h2
      • h3
      • h3
        • h4
          • h5
            • h6
      • h3
    • h2
      • h3

Por supuesto, esto es un ejemplo: no hay necesidad de tener que ocupar todos los tags de cabeceras desde h1 a h6, sino que la única regla para marcar headings es ésta: un heading de menor nivel siempre debe ir bajo un heading del nivel inmediatamente superior. Por ejemplo, un h2 debe ir bajo un h1, un h4 bajo un h3, etc. En el caso anterior, pueden observar que el segundo h2 está bajo el h1 inicial, a pesar de que existan otras cabeceras bajo el h2 anterior. Una utilización errónea sería poner un h3 bajo un h1, sin un h2 de por medio.

Algunos problemas con los headings numerados: XHTML 2 al rescate

Hasta ahora, creo que todo va muy claro, sin embargo, existen algunos escenarios en que tener headings numerados (tal como los que hemos visto) presenta algunas complicaciones. Por supuesto, todo esto siempre dependerá de la utilización que le demos en función de la estructura lógica con que queramos marcar nuestros documentos, pero ¿qué pasa cuando la información de un documento se traspasa a otro contexto?

Pensemos en un ejemplo que probablemente les será común: un weblog (qué original, ¿no?). Típicamente, al pensar en un weblog podemos pensar en algunos elementos en común: una portada o índice, un archivo y páginas de posts individuales. Ahora bien, si deseamos estructurar lógicamente cada una de estas páginas, cabe la posibilidad de que en cada una de ellas debamos utilizar distintos niveles de cabeceras para los títulos de los entradas. Por ejemplo, en la portada del weblog los títulos de los posts podrían ir marcados con <h3>, mientras que en las páginas de post individuales, podrían ir marcados como <h2>, lo cual puede ser manejado con la plantilla que hayamos diseñado. Sin embargo, tendríamos un problema si dentro de un post nos vemos en la necesidad de crear una nueva sección, puesto que si bien en la portada podríamos marcarla como <h4>, respetando el orden del documento, en la página individual no existiría un <h3> entre el <h2> del título del post y el <h4> del subtítulo, rompiendo la estructura lógica del texto.

Hasta ahora, la opción más fácil era crear una estructura lógica similar entre todas las secciones, lo que puede llevar a situaciones artificiales como marcar como títulos algunas secciones que, dentro del orden del documento, no deberían ser marcados como tales. Sin embargo, esta solución es impracticable al considerar otros casos en que la información de un documento se ocupa en otros contextos: piensen en los lectores de feeds online (por ejemplo, Bloglines), en los que los contenidos sindicados vienen ya marcados con un determinado código, como puede ser un nivel de título, y se inserta dentro de otras páginas con su propia estructura lógica.

Con XHTML 2, la situación será distinta, pues en esta nueva recomendación del W3 todos los elementos de títulos se reducen a uno: <h>. De inmediato surge la pregunta: ¿cómo poder determinar el peso de cada título y cada sección?

La respuesta a esta pregunta viene de la mano de un nuevo elemento: se trata de <section>, el que como su nombre lo indica, permitirá determinar secciones dentro del documento, pero sin asignarles un valor determinado por la misma etiqueta de marcado; de esta manera, será posible insertar las secciones dentro de otras mayores, manteniendo la integridad de su estructura lógica.

2 thoughts on “Headings: dando orden a tu XHTML

  1. Super bueno el articulo, me ayudo a darme cuenta de algunos errores que he cometido como poner un h3 antes de haber colocado un h2 y cosas asi.

    Felicitaciones por el blog esta muy bueno en cuanto a contenido y diseño.

Comments are closed.

%d bloggers like this: