Ago 302014
 
Artículo HTML

Cuando una página web contiene un documento de un tamaño considerable, su usabilidad mejora si el contenido se estructura en distintos apartados y subapartados. En este caso, una tabla de contenidos o TOC (por sus siglas en inglés: Table Of Contents) es un elemento que mejora sustancialmente la usabilidad de la página.

En este artículo examinamos las posibilidades que existen para generar una TOC en una página web.

Estructurar la página mediante encabezamientos <h1>…<h6>

El lenguaje HTML dispone de las etiquetas <h1> a <h6> que permiten marcar los titulares de las secciones de que consta el documento en seis niveles. Ejemplo:

Normalmente, los navegadores presentan los textos en el interior de estas etiquetas con tamaños superiores a los utilizados en el resto de los textos del documento. Casi todas las páginas web cargan también una hoja de estilo CSS en la que se suelen definir características adicionales como el tipo de letra, el color del texto o el color de fondo para cada una de estas etiquetas.

Añadir anclas a los encabezamientos de las secciones

Nuestro objetivo es crear una tabla de contenidos al comienzo de la página que contenga enlaces a las distintas secciones del documento. Para ello, debemos previamente añadir a cada una de estas secciones un “ancla” para poder hacer referencia a las mismas en los enlaces del TOC.

En lenguaje HTML, un ancla es una etiqueta <a> igual que la que se utiliza para crear enlaces, con la diferencia de que en lugar de un atributo “href” tiene un atributo “id” cuyo valor es un identificador único.

Una vez añadidas las anclas, el documento del ejemplo anterior quedaría así:

Crear manualmente la tabla de contenidos

Una vez que las secciones del documento han sido marcadas con anclas, la tabla de contenidos se puede crear fácilmente como un conjunto de enlaces apuntando a las distintas secciones. Se pueden utilizar listas HTML (elementos <ul>) para añadir un mínimo estilo a la TOC:

Como vemos, la sintaxis para que un enlace apunte a un ancla en la misma página es simplemente asignar al atributo “href” del enlace el identificador del ancla, precedido del símbolo “#”.

Esta sintaxis también se utiliza si el documento estuviera dividido en varias páginas. En este caso, hay que indicar también la url de la página en el atributo href. Por ejemplo, si el capítulo referido a la programación en PHP está una una segunda página cuya url es “/lenguajes-de-programacion-page-2”, el enlace en la tabla de contenidos del ejemplo quedaría así:

 Publicado por en 10:09 am

 Deja un comentario

(requerido)

(requerido)