Créer une table des matières générée automatiquement avec des emplacements HTML

La table des matières peut grandement améliorer l'expérience utilisateur de nombreux sites Web, par exemple des sites de documentation ou des encyclopédies en ligne comme Wikipedia. Une table des matières bien conçue donne un aperçu de la page et aide les utilisateurs à accéder rapidement à la section qui les intéresse.

Traditionnellement, vous pouvez créer une table des matières en HTML ou en JavaScript, mais les espaces HTML récemment normalisés offrent un moyen terme entre les deux . HTML Slot est un standard Web qui vous permet d' ajouter des espaces réservés à une page Web et de le remplir ensuite de contenu de manière dynamique .

Quand utiliser le marque

Vous pouvez placer balises dans la table des matières à l'intérieur de votre fichier HTML, de sorte que les emplacements plus tard peuvent être remplis avec les titres et sous-titres pertinents . Lorsque les en-têtes sont modifiés, les emplacements sont automatiquement mis à jour .

Avec cette technique, vous devez créer le code source HTML de la table des matières manuellement. JavaScript génère automatiquement le contenu textuel de la table des matières, en fonction des en-têtes ou des sous-titres de la page .

Si vous ne voulez pas que la table des matières soit présente dans le code HTML, vous devez générer la mise en page et le contenu avec JavaScript .

1. Créez le code HTML

Le code source HTML pour la table des matières sera situé dans un