Inhoudsopgave-generator voor HTML en Markdown | We.Inc
Plak een artikel in HTML of Markdown en krijg een geneste inhoudsopgave met ankerlinks, id's toegevoegd aan uw koppen en CSS voor een sticky zijbalk. In uw browser.
Inhoudsopgave-generator
Deze generator leest de koppen in uw artikel, geeft elke kop een unieke id en bouwt een geneste lijst met sprongkoppelingen die ernaar verwijzen. Plak HTML of Markdown, kies welke kopniveaus u wilt opnemen, en kopieer een kant-en-klaar nav-blok, een Markdown-lijst of uw HTML met de anker-id's al toegevoegd.
Wat u plakt en wat u krijgt
Invoer
Koppen gelezen uit
Uitvoer
HTML
<h1> tot <h6>-elementen
Nav-HTML, Markdown-lijst, artikel met toegevoegde id's
Markdown
Regels die beginnen met # tot ######
Nav-HTML, Markdown-lijst
Bestaande id's
id="..." of {#custom-id}
Blijven zoals ze zijn
Herhaalde koppen
Twee keer dezelfde tekst
Tweede id krijgt -1, daarna -2
Lange gidsen zijn makkelijker te scannen en te delen als lezers naar een sectie kunnen springen. De links geven ook elk deel van de pagina een eigen adres, zodat u iemand direct naar de alinea kunt sturen die hij nodig heeft.
Hoe de anker-id's worden gemaakt
De tekst van elke kop wordt in kleine letters gezet, leestekens vallen weg en spaties worden koppeltekens, dus Choose a layout wordt choose-a-layout. Letters met accenten en niet-Latijnse schriften blijven behouden in plaats van te worden verwijderd.
Een id moet uniek zijn in het document en mag geen spaties bevatten. Als dezelfde koptekst twee keer voorkomt, krijgt de tweede -1 erbij en de derde -2, zodat elke link precies één doel heeft.
Markdown-platforms maken hun eigen kop-id's, en hun regels verschillen iets. Publiceert u Markdown ergens waar al id's worden toegevoegd, controleer dan na het publiceren één link; voor HTML die u zelf beheert, gebruikt u de artikeluitvoer zodat de id's precies overeenkomen.
Het inhoudsblok plaatsen
Zet de inhoudsopgave na de inleiding, niet erboven, zodat lezers eerst leren waar de pagina over gaat. Op brede schermen houdt een sticky zijbalk hem binnen bereik terwijl ze scrollen.
Heeft uw site een vaste header, dan verbergt een sprongkoppeling de kop eronder. De eigenschap scroll-margin-top voegt ruimte toe boven het doel wanneer de browser ernaartoe scrolt, wat dit zonder JavaScript oplost.
Plak uw artikel. De tool herkent HTML zodra hij koptags ziet; anders leest hij Markdown-koppen en slaat hij afgebakende codeblokken over.
Kies het hoogste en het diepste kopniveau dat u wilt opnemen. De meeste artikelen tonen alleen H2 en H3.
Kies een lijst met opsommingstekens of nummers en stel het label in dat schermlezers voor de nav voorlezen.
Kopieer het inhoudsblok. Kopieer bij HTML-invoer ook het artikel met id's, zodat elke link zijn doel heeft.
Houd koppen kort en specifiek; ze worden zowel de linktekst als het anker in de adresbalk.
Sla geen niveaus over (een H4 direct onder een H2). De tool nest hem toch, maar gebruikers van schermlezers navigeren op kopniveau.
Een kop wijzigen verandert de id, waardoor links die mensen hebben gedeeld niet meer werken. Stel een vaste id in als er van elders naar een sectie wordt gelinkt.
Zet de H1 van de pagina niet in de inhoudsopgave; de lezer staat al bovenaan.
Veelgestelde vragen
Hoe maak ik een klikbare inhoudsopgave in HTML?
Geef elke kop een id en link er daarna naartoe met een hekje: <a href="#set-a-budget">Set a budget</a> springt naar het element met id="set-a-budget". Omhul de links met een nav-element met een lijst erin. Deze tool schrijft zowel de id's als de lijst.
Waarom komt mijn sprongkoppeling achter de header terecht?
Een vaste of sticky header bedekt de bovenkant van het venster, en de browser scrolt de kop naar die bovenrand. Voeg scroll-margin-top toe aan koppen, iets groter dan de hoogte van de header, en de kop stopt eronder.
Kan ik de inhoudsopgave sticky maken?
Ja. Zet de nav in een zijbalkkolom en geef hem position: sticky met een top-waarde. Hij scrolt normaal mee tot hij die offset bereikt en blijft daarna staan zolang zijn kolom in beeld is. Het voorbeeld hieronder toont de CSS.
Helpt een inhoudsopgave voor SEO?
Hij helpt lezers secties te vinden en geeft elke sectie een adres waarnaar u kunt linken. Zoekmachines tonen soms sprongkoppelingen naar secties, maar zij beslissen wanneer; er is geen instelling die dat garandeert.
Sticky zijbalk met inhoudsopgave
Een layout met twee kolommen waarin de inhoudsopgave in beeld blijft en koppen vrij blijven van een vaste header.
Sticky nav plus kopoffset
Het frame is kort, dus scrol erin: de kolom met de inhoudsopgave blijft vastgezet terwijl het artikel beweegt.
Maak een inhoudsopgave
Plak een artikel als HTML of Markdown. De koppen worden gelezen, krijgen unieke anker-id's, worden op niveau genest en omgezet in een HTML-nav, een Markdown-lijst en, bij HTML-invoer, een kopie van uw artikel met de ontbrekende id's toegevoegd.
Inhoud
Artikel (HTML of Markdown)
Vanaf niveau
Tot niveau
Nav-label
Lijststijl
Opsommingstekens
Nummers
Gelezen als {format}: {n} kop gevonden, {m} binnen bereik.
Gelezen als {format}: {n} koppen gevonden, {m} binnen bereik.
Geen koppen binnen dat bereik. Verbreed de niveaus of controleer of koppen beginnen met # of h-tags gebruiken.