Si eres de los que les gusta escribir largos y detallados artículos, aquí te traigo una forma de como hacer una tabla de contenidos con enlaces dentro del mismo Post, para así poder facilitar la lectura y la navegación a través del mismo.
¿Que es una tabla de contenido?
Una tabla de contenido es un reflejo de la estructura de un documento y contiene los títulos de los temas y subtemas que forman el documento. Una tabla de contenidos puede contener o no el número de página y puede establecerse un enlace directo a los puntos contenidos en la tabla.
Ahora bien, que tal si ademas de hacer una tabla de contenido, le agregas enlaces para que con un simple clic te puedas dirigir hacia ese determinado título. Facilitando de esta forma el desplazamiento dentro del tu publicación.
Ejemplo de Tabla de contenido con enlaces.
Esto es útil cuando el contenido es largo y quieres saltar hacia un lugar especifico del post, de esta forma evitaremos usar el scroll down, simplemente haciendo clic en uno de los títulos enlazados. Si haces clic en uno de los títulos de la tabla de contenido, te llevará directamente hacia ese contenido de esta misma página.
Para lograr esto en la tabla de contenido hay que utilizar las etiquetas siguientes:
<p><a href="#NOMBRE DEL MARCADOR AQUÍ">TÍTULO DEL POST AQUI</a></p>
Para este ejemplo hice lo siguiente:
<a href="#Título1">Título del post 1</a>
<a href="#Título2">Título del post 2</a>
<a href="#Título3">Título del post 3</a>
<a href="#Título4">Título del post 4</a>
Sumado a eso también utilice viñetas (puntos de bala) que son los puntos del lado izquierdo.(Opcional)
<ul>
<li><a href="Título1">Título del post 1</a></li>
<li><a href="Título2">Título del post 2</a></li>
<li><a href="Título3">Título del post 3</a></li>
<li><a href="Título4">Título del post 4</a></li>
</ul>
Si lo haces adecuadamente obtendrás un resultado igual al ejemplo de arriba.
Nota: donde dice "Titulo1" "Titulo2" "Titulo3" "Titulo4" recuerda que estos son los marcadores y puedes ponerle el nombre que quieras, ya sean números, símbolos, letras o palabras claves. Teniendo en cuenta que estos marcadores no serán visibles en tu post y serán utilizados nuevamente como referencia para poder enlazarlos con los títulos que estarán mas adelante.
Marcadores en los titulos
Una vez que hayas terminado de elaborar tu tabla de contenido enumerando o mencionando los títulos o substitutos a mostrar en tu post, quedaría entonces enlazarlos con los títulos se mostraran en el mismo.
Las etiquetas para los marcadores de los títulos son las siguientes:
<a name="NOMBRE DEL MARCADOR AQUI"></a><h2>NOMBRE EL TITULO AQUI</h2>
El que hice para el ejemplo fue el siguente:
<a name="Título1"></a><h2>Título del post 1</h2>
Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo.
<a name="Título2"></a><h2>Título del post 2</h2>
Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo.
<a name="Título3"></a><h2>Título del post 3</h2>
Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo.
<a name="Título4"></a><h2>Título del post 4</h2>
Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo.
Este será el resultado
Título del post 1
Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo.
Título del post 2
Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo.
Título del post 3
Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo.
Título del post 4
Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo. Aquí escribes los detalles de tu titulo.
De esa manera los títulos quedarán enlazados con los mencionados en la tabla de contenido.
Principio y pies de página
Otro buen ejemplo es el de colocar un "Volver al principio de la pagina" o un "Ir al pies de la pagina" utilizando las misma etiquetas.
Ejemplo:
La siguiente etiqueta debe ser colocada en la parte superior de la página, teniendo en cuenta que no se mostrará este contenido ya que estará oculto.
<a name="inicio"></a>
La siguiente etiqueta debe ser colocada en la parte inferior de la página.
<a href="#inicio">Volver al principio de la pagina</a>
GRACIAS POR LEER!
SI ESTA INFORMACIÓN TE FUE DE GRAN AYUDA - VOTA, COMENTA, RESTEEM Y SÍGUEME @LILTTLEJOEL
Muy bueno estoy aprendiendo a escribir en el último post ya no use el editor normal 😎
Pues a la verdad que utilizando RAW HTML tienes mas flexibilidad. he ahí el ejemplo!
Muy buena guía, es bien de seguir.
Gracias!
Excelente post bro