Linken naar een zin: URL's met text fragments

Linken naar gemarkeerde tekst

Linken naar tekst: text fragment-URL's en Link naar markering kopiëren | We.Inc

Maak met #:~:text= een link die naar een zin op elke pagina scrolt en die markeert. Syntaxis, coderingsregels, browserondersteuning, opmaak met ::target-text en een linkbouwer.

Een text fragment is een toevoeging aan een webadres, #:~:text= gevolgd door woorden van de pagina, waardoor de browser naar die woorden scrolt en ze markeert. Het menu-item Link naar markering kopiëren in Chrome maakt er een voor u, en u kunt ze ook met de hand bouwen met optionele delen voor begin, einde, prefix en suffix.

Eerste browserversies die text fragments ondersteunen (caniuse, oktober 2026)

Browser
Ondersteund vanaf

Chrome

Edge

Safari

Firefox

Een klant naar precies de juiste regel van uw retourbeleid sturen, of een opdrachtgever wijzen op één alinea van een lang voorstel, is beter dan zeggen "scroll een stukje naar beneden". Text fragment-links doen dat met niets meer dan een langere URL; de eigenaar van de pagina hoeft geen ankers toe te voegen. Plak een paginaadres en een passage in de bouwer om er een te maken.

Kopieer het adres van de pagina waarnaar u wilt linken.
Kopieer de exacte woorden die u wilt markeren van die pagina, en houd elk deel binnen één alinea of kop.
Geef bij een lange passage alleen de eerste paar woorden als begin en de laatste paar als einde.
Voeg alleen een prefix of suffix toe als dezelfde woorden meer dan eens op de pagina staan.

Bij het zoeken wordt hoofdlettergebruik genegeerd, dus het maakt niet uit of uw woorden met hoofdletters zijn geschreven.
Als er niets overeenkomt, zegt MDN dat het fragment wordt genegeerd en de pagina bovenaan opent, dus een kapotte link faalt netjes.
Wijzigt de pagina later, dan kan de link stoppen met markeren. Kies formuleringen die waarschijnlijk niet veranderen.
Om twee losse passages te markeren, verbindt u ze met een ampersand: #:~:text=first&text=second.

Veelgestelde vragen

Hoe kopieer ik in Chrome een link naar gemarkeerde tekst?

Selecteer de tekst op de pagina, klik er met de rechtermuisknop op en kies Link naar markering kopiëren. Chrome Help merkt op dat als u deze optie niet kunt kiezen, de functie mogelijk niet werkt voor die inhoud.

Werken text fragment-links in Firefox en Safari?

Ja, in de huidige versies. caniuse vermeldt ondersteuning vanaf Safari 16.1 en Firefox 131, naast Chrome 81 en Edge 83. Oudere browsers openen de pagina gewoon bovenaan.

Waarom markeert mijn text fragment-link niets?

De woorden staan misschien niet precies zo op de pagina, een deel loopt misschien over twee alinea's, of een streepje in de tekst is niet met procenttekens gecodeerd. Tekst binnen een iframe wordt volgens MDN nooit doorzocht.

Kunnen mijn eigen scripts het text fragment lezen?

Nee. MDN legt uit dat browsers de :~:-directive tijdens het laden uit de URL halen, zodat paginascripts die niet kunnen lezen. U kunt ondersteuning detecteren met document.fragmentDirective.

Kan ik voorkomen dat anderen zo naar tekst op mijn site linken?

Volgens MDN respecteren browsers op basis van Chromium een responseheader Document-Policy: force-load-at-top, waarmee een pagina zich afmeldt voor scrollen naar text fragments.

De onderdelen van de syntaxis

De volledige vorm is #:~:text=[prefix-,]textStart[,textEnd][,-suffix]. Alleen textStart is verplicht. Met textEnd erbij markeert de browser alles van de beginwoorden tot de eindwoorden.
De prefix eindigt met een streepje en de suffix begint ermee. Ze worden niet gemarkeerd; ze vertellen de browser alleen welk exemplaar van een herhaalde zin u bedoelt.

Coderingsregels

Elk deel moet met procenttekens worden gecodeerd, waardoor spaties %20 worden. MDN voegt toe dat het streepje zelf als %2D moet worden gecodeerd, omdat een los streepje als markering voor prefix of suffix zou worden gelezen.
Komma's en ampersands scheiden delen en fragmenten, dus ook die coderen, als %2C en %26, voorkomt dat ze verkeerd worden gelezen. De bouwer op deze pagina doet dit allemaal voor u.

Voorbeelden van elke vorm

Vormen van text fragments en wat ze markeren

Fragment
Markeert

De eerste overeenkomst met "opening hours"

Van "Delivery takes" tot en met "business days"

"closed" alleen waar het volgt op "Saturday"

De eerste "price" en de eerste "deposit"

De markering op uw eigen site opmaken

Browsers kiezen een standaardkleur voor de markering. Met het pseudo-element ::target-text laat u die aansluiten op uw merk.

Eigen kleuren voor ::target-text

Zorg voor sterk contrast tussen de tekst en de markeerkleur.

Feature detection

document.fragmentDirective is een object in browsers die het ondersteunen en elders undefined.

Bouwer voor text fragment-links

Paginaadres

Te markeren woorden (of het begin van een lange passage)

Einde van de passage (optioneel)

Woorden er direct voor (optioneel)

Woorden er direct na (optioneel)

Uw link

Link openen in een nieuw tabblad

Voer een volledig adres in dat begint met https://

Voer de woorden in die u wilt markeren.

Gratis beginnen · Geen creditcard nodig

Gerelateerd: Gidsen

Product

Voor wie

Functies

Bronnen

Bedrijf

Sitemap