Liens d'ancrage : Règles de navigation stable au sein d'une page

Les liens d’ancrage sont des liens intrapages qui envoient le lecteur vers une section nommée du document actuel. Ils transforment une longue page en un ensemble de réponses durables et adressables — mais seulement lorsque chaque destination possède un identifiant de titre stable.

Accédez à : Pourquoi les liens d’ancrage sont importants · Quand les utiliser · Anatomie d’un identifiant stable · Syntaxe d’implémentation · Liste de contrôle QA

La ligne ci-dessus représente l’élément rendu dans sa forme compacte en ligne. Chaque lien contient un identifiant de fragment, la partie après #, et chaque fragment renvoie à un titre de cette page.

Why this element matters

Les documents longs créent un problème de récupération avant même de créer un problème de lecture. Un visiteur arrivant depuis un moteur de recherche, un ticket d’assistance ou le message d’un collègue souhaite souvent une seule information plutôt que l’ensemble du raisonnement. Un lien de saut descriptif supprime le défilement et rassure le visiteur sur le fait que la réponse existe. Il permet également une lecture non linéaire : quelqu’un peut consulter les paramètres, revenir à l’anatomie, puis se rendre à la section QA sans faire semblant que chaque visite utile commence par l’introduction.

Le bénéfice psychologique repose sur la confiance. Le texte du lien fait une promesse sur la destination, et le clic doit la tenir immédiatement. Une étiquette vague comme « En savoir plus » oblige le lecteur à se souvenir du contexte environnant. Un lien qui atterrit sous un en-tête collant semble cassé même si le navigateur a techniquement atteint les bonnes coordonnées. Une liste de 25 entrées presque identiques crée une nouvelle tâche de balayage au lieu d’en réduire une.

Les liens d’ancrage améliorent également l’extractibilité par les machines : la capacité d’un logiciel à isoler une section et à préserver son sens en dehors de la page complète. Une URL telle que /guide/#renewal-terms identifie une zone de réponse plus petite que /guide/. Les systèmes de recherche, les extensions de navigateur, les outils de documentation et les systèmes d’extraction IA peuvent citer ou partager cette zone directement. Le fragment ne crée pas d’autorité ni ne garantit une citation, mais il donne à une section déjà utile une adresse publique précise.

Cette adresse est une interface, pas un sous-produit accidentel du titre. De nombreux systèmes de publication génèrent renewal-terms à partir du titre visible « Renewal terms ». Si un éditeur modifie ensuite le titre en « How renewals work », le générateur peut produire how-renewals-work. Chaque lien entrant qui se termine encore par #renewal-terms pointe désormais vers un identifiant qui n’existe plus. Cela inclut les liens dans d’autres articles, les signets du navigateur, les messages de campagne, les réponses du centre d’aide, les résultats de recherche et les réponses IA citées. L’URL de la page renvoie toujours un succès, ce qui peut masquer la régression, mais le visiteur perd la destination promise au niveau de la section.

Suivez les règles de rédaction des éléments avant d’ajouter la navigation. La règle de précédence s’applique toujours : les liens d’ancrage naviguent vers des éléments de contenu ; ils ne remplacent pas une définition, une comparaison, un avertissement, une FAQ ou tout autre bloc typé requis. Le système de titres gère la hiérarchie du document et les identifiants stables attachés aux titres. Les liens d’ancrage consomment ces identifiants.

When to use it

Utilisez des liens d’ancrage lorsqu’une page contient plusieurs destinations dont les lecteurs peuvent avoir besoin indépendamment. Les cas pertinents incluent une longue référence avec des paramètres distincts, une documentation avec des sections d’installation et de dépannage, un rapport avec une méthodologie et des résultats séparés, une politique avec des obligations nommées, et un centre FAQ avec des groupes de questions.

Utilisez un ensemble visible de liens de saut lorsqu’au moins une de ces conditions est vraie :

• La page comporte cinq sections H2 significatives ou plus et les lecteurs sont susceptibles d’arriver avec des objectifs différents.
• La page fait 1 800 mots ou plus et ses sections peuvent être comprises de manière non linéaire.
• Les équipes d’assistance, commerciales, juridiques ou éditoriales partagent régulièrement des liens vers des sections individuelles.
• Une section est susceptible d’être citée, mise en signet, revisitée ou mise à jour indépendamment.
• Les lecteurs mobiles auraient sinon besoin de défiler considérablement pour atteindre une réponse prévisible.

Chaque titre substantiel peut encore recevoir un identifiant même en l’absence de liste de liens de saut visible. Les destinations stables sont peu coûteuses à préserver et coûteuses à reconstruire après la circulation des liens.

Les cas limites méritent de la retenue. Une procédure linéaire en trois étapes doit généralement maintenir le lecteur dans l’ordre ; une liste de sauts peut inciter à sauter les prérequis. Une page courte dont les titres sont déjà visibles au-dessus de la ligne de flottaison ne gagne aucune navigation utile. Les onglets et les panneaux accordéon changent d’état d’interface plutôt que de naviguer vers des emplacements du document, ils ne remplacent donc pas les liens d’ancrage. Les liens de pagination se déplacent entre les documents. Un lien vers une autre page est un lien interne même si sa destination contient par hasard un fragment.

N’ajoutez pas d’ancres comme tactique de mots-clés et ne créez pas de titres supplémentaires pour obtenir plus d’URL fragmentaires. L’unité de navigation doit être une section réelle avec un objectif distinct et suffisamment de contenu pour satisfaire le libellé du lien.

Where to place it

Placez un groupe de liens de saut au niveau de la page après le héros, la réponse directe ou un bref énoncé de périmètre, et avant la première section de contenu principale. Le lecteur doit comprendre la page avant de choisir un chemin à travers elle. Lorsque la page utilise également un aperçu rapide et table des matières , n’ajoutez pas une seconde liste des mêmes destinations. La table des matières est une présentation des liens d’ancrage ; configurez ou simplifiez cet élément au lieu de dupliquer la navigation.

Placez un groupe de liens de saut local immédiatement avant la région délimitée qu’il contrôle, comme un répertoire alphabétique ou une référence API en plusieurs parties. Donnez-lui une étiquette qui nomme le périmètre : « Accéder à la gamme de produits » est plus clair qu’un autre « Sur cette page » générique. Placez une référence croisée en ligne dans la phrase où la destination devient utile, en utilisant des mots qui nomment la cible.

Ne placez pas la navigation par ancrage :

• Entre un titre et le paragraphe qui y répond.
• Entre une affirmation et sa preuve, sa qualification ou sa source.
• À côté d’un CTA, d’une publicité, d’un formulaire d’inscription ou d’une carte promotionnelle non liés qui rivalisent pour le même clic.
• À l’intérieur d’un autre lien, bouton, titre ou contrôle interactif.
• Dans une zone collante qui recouvre le titre cible après la navigation.
• Après le contenu qu’elle est censée aider les lecteurs à découvrir.

Si un en-tête de site collant mesure 72 pixels de haut, la cible a besoin d’au moins autant de décalage de défilement plus un espacement confortable. Résolvez cela sur la destination avec un scroll-margin-top cohérent, sans insérer d’éléments d’espacement vides ni modifier le fragment avec JavaScript.

Anatomy

Un système de liens d’ancrage comporte sept parties :

1. Libellé de navigation : nomme l’ensemble, généralement « Sur cette page » ou une alternative propre au périmètre.
2. Texte du lien : décrit la destination lorsqu’il est lu sans la phrase environnante.
3. Fragment href : commence par # pour la page courante, par exemple #renewal-terms.
4. Identifiant cible : la valeur unique sur la destination, correspondant exactement au href sans le #.
5. Titre de destination : indique au lecteur arrivant où il a atterri et ce qui suit.
6. Décalage d’arrivée : maintient le titre visible sous les éléments d’interface collants.
7. État d’interaction : rend perceptibles le survol, le focus clavier, l’état visité le cas échéant et l’emplacement actuel.

Le titre visible et l’identifiant sont liés mais non identiques. Le titre peut changer pour plus de clarté. Une fois public, l’identifiant reste fixe tant que la section conserve le même objectif. Les identifiants utilisent des lettres ASCII minuscules, des chiffres lorsque cela a du sens et des traits d’union : #cancel-subscription est portable ; #Section 4! ne l’est pas.

Design examples

Chaque variante utilise le même contrat lien-vers-identifiant. Les variantes diffèrent par le contexte et la densité, non par l’invention d’un nouveau comportement de destination.

Compact en ligne : utilisez trois à six destinations de même niveau près de l’ouverture. Permettez le retour à la ligne et gardez les séparateurs hors des noms de liens accessibles.

Liste empilée : utilisez cinq à douze destinations lorsque les étiquettes ont besoin d’espace ou que le balayage importe plus que l’espace vertical. C’est la valeur par défaut pour les longs guides et politiques.

Liste imbriquée : utilisez les destinations H2 comme itinéraire principal et n’incluez que les enfants H3 substantiels. Limitez la profondeur à deux niveaux de navigation ; les arbres plus profonds appartiennent à la navigation de la documentation.

Index local : utilisez des lettres, des catégories ou des groupes de référence pour naviguer dans une région délimitée. Rendez les destinations qui n’existent pas sous forme de texte simple désactivé, pas de liens avec des cibles vides ou factices.

Permalien de titre : fournissez un petit contrôle de copie de lien à côté d’un titre lorsque les lecteurs citent couramment des sections individuelles. Son nom accessible doit inclure le titre, par exemple « Copier le lien vers Renewal terms ». Le titre reste du texte, pas un grand lien auto-référent.

Référence croisée en ligne : utilisez un lien de phrase normal lorsqu’un passage dépend d’une autre section. Préférez « consulter les conditions de renouvellement » à « aller ici ».

Parameters

La collection et chaque destination ont des champs séparés. Le premier titre dans un corps de directive portable correspond au libellé de navigation selon la règle de corps par défaut ; les éléments de liste suivants fournissent les liens.

Le nombre cible éditorial d’éléments est intentionnellement inférieur au maximum technique. Si une page a besoin de 18 destinations, regroupez d’abord les sections connexes, utilisez une table des matières générée ou divisez le document. Un index A–Z est l’exception étroite car son ordre et ses étiquettes sont déjà prévisibles.

Syntax and code examples

La source portable stocke le texte du lien et les fragments explicitement afin de pouvoir se déplacer entre les moteurs de rendu sans perdre les identifiants publiés.

Directive Markdown portable

:::anchor-links{variant=stacked depth=1}
### On this page

- [Eligibility](#eligibility)
- [Required documents](#required-documents)
- [Renewal terms](#renewal-terms)
:::

## Eligibility {#eligibility}

Le premier titre du corps devient label ; la liste devient content et fournit items. Figez l’identifiant de destination lors de la première publication de la page.

Shortcode Hugo

{{< anchor-links variant="stacked" label="On this page" >}}
- [Eligibility](#eligibility)
- [Required documents](#required-documents)
- [Renewal terms](#renewal-terms)
{{< /anchor-links >}}

## Eligibility {#eligibility}

Ceci est le contrat d’adaptateur Hugo, pas une affirmation que ce dépôt enregistre déjà un shortcode anchor-links. Une implémentation Hugo peut générer la liste à partir de .TableOfContents ou rendre des liens Markdown ordinaires, à condition qu’elle préserve les mêmes identifiants, sémantique, limites et comportement d’accessibilité.

WordPress

<!-- wp:group {"tagName":"nav","ariaLabel":"On this page"} -->
<nav aria-label="On this page">
  <ul>
    <li><a href="#eligibility">Eligibility</a></li>
    <li><a href="#required-documents">Required documents</a></li>
    <li><a href="#renewal-terms">Renewal terms</a></li>
  </ul>
</nav>
<!-- /wp:group -->

<!-- wp:heading {"level":2,"anchor":"eligibility"} -->
<h2 id="eligibility">Eligibility</h2>
<!-- /wp:heading -->

Définissez explicitement le champ d’ancrage HTML avancé de WordPress pour les destinations publiées. Ne comptez pas sur un thème ou un plugin pour régénérer les identifiants à partir du texte visible modifié.

Examples

Bon : les libellés et les identifiants survivent aux améliorations éditoriales

**On this page**

- [Calculate the total cost](#calculate-total-cost)
- [Compare contract terms](#compare-contract-terms)
- [Choose a plan](#choose-plan)

## Compare annual and monthly contract terms {#compare-contract-terms}

Cela fonctionne parce que les libellés de navigation prédisent des réponses distinctes, l’identifiant est lisible et unique, et le titre peut devenir plus spécifique sans changer l’adresse publiée #compare-contract-terms. Une citation créée avant l’amélioration du libellé atteint toujours la section correcte.

Mauvais : les identifiants générés sont traités comme jetables

- [More information](#more-information)
- [Click here](#section-4)
- [Pricing](#pricing-2026)

## New pricing details

Cela échoue parce que deux libellés ont besoin de contexte environnant, section-4 encode la position plutôt que le sens, et pricing-2026 deviendra trompeur lorsque l’année changera. Le titre a également changé sans conserver l’ancien id="pricing-2026", donc les fragments entrants existants ne sont plus résolus. Renommer l’entrée de la liste ne peut pas réparer les liens déjà publiés ailleurs.

Schema markup and accessibility

Les liens d’ancrage n’alimentent pas un type Schema.org dédié. Ne marquez pas une liste de liens de saut comme ItemList simplement parce qu’elle utilise <ul> ; son but est la navigation, pas une collection classée ou organisée d’entités. Une section de destination peut contribuer du contenu visible à Article, FAQPage, HowTo ou un autre type de schéma de niveau page approprié, mais le fragment lui-même ne constitue pas des données structurées séparées.

Utilisez des liens natifs <a href="#target-id">. Encapsulez un groupe de page ou local dans <nav aria-label="Sur cette page"> lorsqu’il s’agit d’une région de navigation distincte. N’ajoutez pas role="link" à une ancre native. Chaque identifiant cible doit être unique, et le href doit correspondre exactement, y compris la casse.

Les utilisateurs de clavier ont besoin d’un indicateur de focus visible. Les cibles tactiles nécessitent suffisamment d’espacement pour éviter une activation accidentelle. Le texte du lien doit identifier la destination sans dépendre de la couleur, de la prose environnante ou d’un attribut title. Si un contrôle de copie de permalien utilise un bouton, annoncez le succès sans déplacer le focus de manière inattendue.

La navigation par fragment doit laisser le titre cible visible sous les en-têtes collants. Préférez le CSS scroll-margin-top sur les cibles. Le défilement fluide est facultatif et doit respecter les préférences de mouvement réduit. Évitez le JavaScript qui annule le comportement natif du lien, supprime le fragment de l’historique du navigateur ou modifie la position de défilement sans mettre à jour l’URL.

Ne déplacez pas automatiquement le focus pour chaque clic de fragment ordinaire ; le comportement natif du navigateur doit rester prévisible. Si un menu personnalisé ou une divulgation se ferme après l’activation et que le focus serait autrement perdu, déplacez délibérément le focus vers une cible qui peut le recevoir, comme le titre avec tabindex="-1", puis testez avec la navigation au clavier et au lecteur d’écran. Un contrôle de navigation persistant peut indiquer la destination actuelle avec aria-current="location", mais seulement lorsque l’état est mis à jour avec précision.

Writing rules

Rédigez les destinations après que le plan de la page est stable et avant que les liens ne circulent. Utilisez la casse de phrase et des noms ou verbes concrets. Un libellé doit avoir un sens en isolation car les liens copiés, les listes de liens des lecteurs d’écran et les citations automatiques peuvent le retirer de son contexte visuel d’origine.

• Utilisez trois à douze liens dans un groupe visible ; préférez cinq à huit pour un ensemble compact d’ouverture.
• Limitez les libellés à deux à dix mots et à moins de 70 caractères.
• Incluez les destinations H2 par défaut. N’incluez H3 que lorsqu’il répond à un besoin indépendant.
• Gardez un modèle grammatical cohérent au sein d’un groupe : toutes des questions, toutes des syntagmes nominaux ou tous des verbes à l’impératif.
• Utilisez des identifiants d’un à huit jetons en minuscules séparés par des traits d’union. Commencez par une lettre et omettez la ponctuation, les émojis, les diacritiques, les dates qui expireront et les numéros de position.
• Figez chaque identifiant public. Un titre visible peut changer sans changer son identifiant lorsque l’objectif de la section reste le même.
• Ne réutilisez jamais un identifiant retiré pour un contenu non lié. Un ancien lien ne doit pas sembler fonctionner tout en atterrissant sur une affirmation différente.
• Ne mettez jamais de citations, de marqueurs de note de bas de page, de prix, de badges promotionnels ou de mentions d’urgence dans un libellé de navigation.
• Ne placez jamais de boutons, de contrôles de formulaire, d’images ou d’un autre lien à l’intérieur d’un lien d’ancrage.
• N’utilisez jamais « cliquez ici », « lire plus », « détails » ou « section » comme libellé complet.

Lorsqu’une section est supprimée, décidez ce que l’ancien fragment promettait. Si son contenu a été déplacé vers une section équivalente sur la même page, conservez l’ancien identifiant comme un alias adjacent à la nouvelle destination lorsque la plateforme prend en charge plusieurs ancres. Si aucun équivalent n’existe, n’attachez pas silencieusement l’ancien identifiant à une section différente. Enregistrez la suppression et mettez à jour chaque référence interne connue.

Post types that use it

Le tableau postTypes dans le frontmatter pilote cette relation. L’inclusion signifie que le format bénéficie généralement de destinations de section stables ; elle n’exige pas une liste de sauts visible sur chaque instance courte.

QA checklist

• La page a un réel besoin de navigation non linéaire ; la liste n’est pas une décoration.
• Chaque libellé de lien visible décrit sa destination lorsqu’il est lu seul.
• Chaque href commence par # pour un lien sur la même page et correspond exactement à un identifiant cible existant.
• Chaque identifiant cible est unique, en minuscules, lisible et exempt de dates transitoires ou de numéros de position.
• Les identifiants publiés ont été comparés avec la version précédente et restent inchangés à moins qu’une migration ne soit documentée.
• Un renommage de titre visible conserve son ancien identifiant lorsque l’objectif de la section est inchangé.
• Les destinations supprimées ou fusionnées ne réutilisent pas d’anciens identifiants pour un contenu différent.
• Le groupe contient 3 à 12 éléments utiles, sauf pour un index local A–Z justifié.
• Les destinations H3 apparaissent uniquement lorsqu’elles sont substantielles et correctement imbriquées sous un H2.
• Le groupe n’est pas dupliqué par une table des matières ou un composant de navigation adjacent.
• La navigation n’interrompt pas un titre et sa réponse, une affirmation et ses preuves, ou une séquence requise.
• Le groupe utilise des liens natifs et, lorsqu’il est distinct, un repère de navigation nommé.
• Le focus clavier est visible et suit un ordre logique.
• Le titre cible reste visible sous les en-têtes collants aux largeurs de bureau et mobile.
• Les paramètres de mouvement réduit sont respectés lorsque le défilement fluide est présent.
• Les contrôles de copie de lien nomment la destination et annoncent le succès sans perdre le focus.
• Charger directement chaque URL complète plus le fragment atterrit sur la section prévue après un chargement de page frais.
• Les liens entrants internes connus, les signets utilisés dans le matériel d’assistance et les URL fragmentaires citées ont été testés par régression après les modifications.

Rejetez la publication lorsque la page elle-même se charge mais qu’un fragment connu n’est plus résolu. Une ancre cassée est un lien entrant cassé au niveau de la section, même lorsque la surveillance au niveau de la page signale une réponse réussie.

FAQ

Les questions ci-dessus couvrent les décisions de maintenance qui brisent le plus souvent la navigation par ancrage après la publication. Leurs réponses faisant autorité vivent dans le frontmatter structuré [[faq]] afin que la sortie FAQ visible et toute sortie de schéma éligible puissent utiliser la même source.