👨💻 Cómo crear una tabla de contenidos en una página web
| ⏩ Snippet: ⏪ |
|
👉 Snippet: 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:
<h1>Lenguajes de programación</h1> <h2>Introducción</h2> ... <h2>Lenguaje PHP</h2> ... <h3>Historia del lenguaje PHP</h3> ... <h3>Constantes</h3> ... <h3>Variables</h3> ... <h3>Operadores</h3> ... <h3>Funciones</h3> ... <h2>Lenguaje Java</h2> ... |
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í:
|
|
<h1>Lenguajes de programación</h1> <h2><a id="intro"></a>Introducción</h2> ... <h2><a id="PHP"></a>Lenguaje PHP</h2> ... <h3><a id="PHP_historia"></a>Historia del lenguaje PHP</h3> ... <h3><a id="PHP_Constantes"></a>Constantes</h3> ... |
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:
https://blog.openalfa.com/como-crear-una-tabla-de-contenidos-en-una-pagina-web
