Lien vers une phrase : les URL à fragment de texte

Lien vers un texte surligné

Lien vers un texte : URL à fragment de texte et lien vers la sélection | We.Inc

Créez un lien qui fait défiler n'importe quelle page jusqu'à une phrase et la surligne grâce à #:~:text=. Syntaxe, règles d'encodage, compatibilité des navigateurs, style avec ::target-text, et un générateur de liens.

Un fragment de texte est un ajout à une adresse web, #:~:text= suivi de mots de la page, qui fait défiler le navigateur jusqu'à ces mots et les surligne. L'option de menu de Chrome pour copier le lien vers le texte sélectionné en écrit un pour vous, et vous pouvez les construire à la main avec des parties facultatives de début, de fin, de préfixe et de suffixe.

Premières versions des navigateurs compatibles avec les fragments de texte (caniuse, octobre 2026)

Navigateur
Compatible depuis

Chrome

Edge

Safari

Firefox

Envoyer un client sur la ligne exacte de votre politique de retour, ou diriger un client vers un paragraphe d'une longue proposition, vaut mieux que dire « descendez un peu ». Les liens à fragment de texte font cela avec une simple URL plus longue ; le propriétaire de la page n'a pas besoin d'ajouter d'ancres. Collez l'adresse d'une page et un passage dans le générateur pour en créer un.

Copiez l'adresse de la page vers laquelle vous voulez faire un lien.
Copiez les mots exacts à surligner sur cette page, en gardant chaque partie dans un seul paragraphe ou titre.
Pour un long passage, indiquez seulement les premiers mots comme début et les derniers comme fin.
N'ajoutez un préfixe ou un suffixe que si les mêmes mots apparaissent plusieurs fois sur la page.

La correspondance ignore les majuscules : la casse de vos mots n'a pas d'importance.
Si rien ne correspond, MDN indique que le fragment est ignoré et que la page s'ouvre en haut : un lien cassé échoue donc en douceur.
Si la page est modifiée plus tard, le lien peut ne plus surligner. Choisissez une formulation peu susceptible de changer.
Pour surligner deux passages distincts, reliez-les avec une esperluette : #:~:text=first&text=second.

Questions fréquentes

Comment copier un lien vers un texte surligné dans Chrome ?

Sélectionnez le texte sur la page, faites un clic droit et choisissez l'option pour copier le lien vers le texte sélectionné. L'aide de Chrome précise que si vous ne pouvez pas choisir cette option, la fonction peut ne pas marcher pour ce contenu.

Les liens à fragment de texte fonctionnent-ils dans Firefox et Safari ?

Oui, dans les versions actuelles. caniuse indique une compatibilité depuis Safari 16.1 et Firefox 131, ainsi que Chrome 81 et Edge 83. Les navigateurs plus anciens ouvrent simplement la page en haut.

Pourquoi mon lien à fragment de texte ne surligne-t-il rien ?

Les mots n'apparaissent peut-être pas exactement tels qu'écrits, une partie couvre peut-être deux paragraphes, ou un tiret du texte n'a pas été encodé en pourcentage. Selon MDN, le texte à l'intérieur d'une iframe n'est jamais recherché.

Mes propres scripts peuvent-ils lire le fragment de texte ?

Non. MDN explique que les navigateurs retirent la directive :~: de l'URL pendant le chargement, donc les scripts de la page ne peuvent pas la lire. Vous pouvez détecter la compatibilité avec document.fragmentDirective.

Puis-je empêcher d'autres personnes de créer ce type de lien vers mon site ?

Selon MDN, les navigateurs basés sur Chromium respectent un en-tête de réponse Document-Policy: force-load-at-top qui désactive le défilement par fragment de texte pour une page.

Les parties de la syntaxe

La forme complète est #:~:text=[prefix-,]textStart[,textEnd][,-suffix]. Seul textStart est obligatoire. Avec textEnd, le navigateur surligne tout ce qui va des mots de début aux mots de fin.
Le préfixe se termine par un tiret et le suffixe commence par un tiret. Ils ne sont pas surlignés ; ils indiquent seulement au navigateur de quelle occurrence d'une expression répétée il s'agit.

Règles d'encodage

Chaque partie doit être encodée en pourcentage, ce qui transforme les espaces en %20. MDN ajoute que le tiret lui-même doit être encodé en %2D, car un tiret nu serait lu comme un marqueur de préfixe ou de suffixe.
Les virgules et les esperluettes séparent les parties et les fragments : les encoder aussi, en %2C et %26, évite qu'ils soient mal interprétés. Le générateur de cette page fait tout cela pour vous.

Exemples de chaque forme

Formes de fragment de texte et ce qu'elles surlignent

Fragment
Surligne

La première occurrence de "opening hours"

De "Delivery takes" jusqu'à "business days"

"closed" uniquement après "Saturday"

Le premier "price" et le premier "deposit"

Styliser le surlignage sur votre propre site

Les navigateurs choisissent une couleur de surlignage par défaut. Le pseudo-élément ::target-text vous permet de l'accorder à votre marque.

Couleurs ::target-text personnalisées

Gardez un fort contraste entre le texte et la couleur de surlignage.

Détection de la compatibilité

document.fragmentDirective est un objet dans les navigateurs compatibles et undefined ailleurs.

Générateur de liens à fragment de texte

Adresse de la page

Mots à surligner (ou début d'un long passage)

Fin du passage (facultatif)

Mots juste avant (facultatif)

Mots juste après (facultatif)

Votre lien

Ouvrir le lien dans un nouvel onglet

Saisissez une adresse complète commençant par https://

Saisissez les mots à surligner.

Commencer gratuitement · Sans carte bancaire