Générateur de table des matières pour HTML et Markdown | We.Inc
Collez un article en HTML ou en Markdown et obtenez une table des matières imbriquée avec des liens d'ancre, des id ajoutés à vos titres et le CSS d'une barre latérale sticky. Dans votre navigateur.
Générateur de table des matières
Ce générateur lit les titres de votre article, attribue à chacun un id unique et construit une liste imbriquée de liens d'ancre qui pointent vers eux. Collez du HTML ou du Markdown, choisissez les niveaux de titre à inclure, et copiez un bloc nav prêt à l'emploi, une liste Markdown, ou votre HTML avec les id d'ancre déjà ajoutés.
Ce que vous collez et ce que vous obtenez
Entrée
Titres lus depuis
Résultats
HTML
Éléments <h1> à <h6>
HTML de nav, liste Markdown, article avec id ajoutés
Markdown
Lignes commençant par # à ######
HTML de nav, liste Markdown
id existants
id="..." ou {#custom-id}
Conservés tels quels
Titres répétés
Même texte deux fois
Le deuxième id reçoit -1, puis -2
Les longs guides se parcourent et se partagent plus facilement quand les lecteurs peuvent sauter directement à une section. Les liens donnent aussi à chaque partie de la page sa propre adresse, pour envoyer quelqu'un directement au paragraphe dont il a besoin.
Comment les id d'ancre sont créés
Le texte de chaque titre est mis en minuscules, la ponctuation est supprimée et les espaces deviennent des tirets, donc Choose a layout devient choose-a-layout. Les lettres accentuées et les écritures non latines sont conservées plutôt que supprimées.
Un id doit être unique dans le document et ne doit pas contenir d'espaces. Quand le même texte de titre apparaît deux fois, le deuxième reçoit -1, le troisième -2, pour que chaque lien ait exactement une cible.
Les plateformes Markdown créent leurs propres id de titre, et leurs règles diffèrent légèrement. Si vous publiez du Markdown sur une plateforme qui ajoute déjà des id, vérifiez un lien après publication ; pour du HTML que vous maîtrisez, utilisez l'article généré pour que les id correspondent exactement.
Où placer le bloc de sommaire
Placez la table des matières après l'introduction, pas au-dessus, pour que les lecteurs découvrent d'abord le sujet de la page. Sur les grands écrans, une barre latérale sticky la garde à portée de main pendant le défilement.
Si votre site a un header fixe, un lien d'ancre cachera le titre sous celui-ci. La propriété scroll-margin-top ajoute de l'espace au-dessus de la cible quand le navigateur y défile, ce qui règle le problème sans JavaScript.
Collez votre article. L'outil détecte le HTML quand il voit des balises de titre ; sinon il lit les titres Markdown et ignore les blocs de code délimités.
Choisissez le niveau de titre le plus haut et le plus bas à inclure. La plupart des articles ne listent que les H2 et H3.
Choisissez une liste à puces ou numérotée et définissez le libellé que les lecteurs d'écran annoncent pour la nav.
Copiez le bloc de sommaire. Pour une entrée HTML, copiez aussi l'article avec les id pour que chaque lien ait sa cible.
Gardez des titres courts et précis ; ils deviennent à la fois le texte du lien et l'ancre dans la barre d'adresse.
Évitez de sauter des niveaux (un H4 directement sous un H2). L'outil l'imbrique quand même, mais les utilisateurs de lecteurs d'écran naviguent par niveau de titre.
Modifier un titre modifie son id, ce qui casse les liens que les gens ont partagés. Définissez un id fixe si une section est liée depuis ailleurs.
Ne mettez pas le H1 de la page dans la table des matières ; le lecteur est déjà en haut.
Questions fréquentes
Comment créer une table des matières cliquable en HTML ?
Donnez un id à chaque titre, puis créez un lien vers lui avec un dièse : <a href="#set-a-budget">Set a budget</a> renvoie à l'élément ayant id="set-a-budget". Placez les liens dans un élément nav contenant une liste. Cet outil écrit à la fois les id et la liste.
Pourquoi mon lien d'ancre atterrit-il derrière le header ?
Un header fixe ou sticky couvre le haut de la fenêtre, et le navigateur fait défiler le titre jusqu'à ce bord supérieur. Ajoutez scroll-margin-top aux titres, avec une valeur un peu supérieure à la hauteur du header, et le titre s'arrête en dessous.
Peut-on rendre la table des matières sticky ?
Oui. Placez la nav dans une colonne latérale et donnez-lui position: sticky avec une valeur top. Elle défile normalement jusqu'à atteindre ce décalage, puis reste en place tant que sa colonne est à l'écran. L'exemple ci-dessous montre le CSS.
Une table des matières aide-t-elle le SEO ?
Elle aide les lecteurs à trouver les sections et donne à chaque section une adresse vers laquelle on peut créer un lien. Les moteurs de recherche affichent parfois des liens directs vers des sections, mais ce sont eux qui décident quand ; aucun réglage ne le garantit.
Barre latérale de sommaire sticky
Une mise en page en deux colonnes où le sommaire reste visible et où les titres ne passent pas sous un header fixe.
Nav sticky et décalage des titres
Le cadre est court, alors faites défiler son contenu : la colonne du sommaire reste épinglée pendant que l'article défile.
Générer une table des matières
Collez un article en HTML ou en Markdown. Les titres sont lus, reçoivent des id d'ancre uniques, sont imbriqués par niveau et transformés en nav HTML, en liste Markdown et, pour une entrée HTML, en une copie de votre article avec les id manquants ajoutés.
Sommaire
Article (HTML ou Markdown)
Du niveau
Au niveau
Libellé de la nav
Style de liste
Puces
Numéros
Lu comme {format} : {n} titre trouvé, {m} dans la plage.
Lu comme {format} : {n} titres trouvés, {m} dans la plage.
Aucun titre dans cette plage. Élargissez les niveaux ou vérifiez que les titres commencent par # ou utilisent des balises h.