Signets HTML

Titres et cibles de liens ont changé comment un lien s’ouvre. Les signets (liens fragments) changent où sur une page vous arrivez. Les longues leçons, FAQ et documentations ont souvent besoin d’un saut vers « Tarifs », « FAQ » ou « Retour en haut » sans charger un tout nouveau document. Ce modèle associe un id unique sur la destination à un href qui commence par #.

Qu’est-ce qu’un signet dans la page

Un identifiant de fragment est la partie d’une URL après #. En HTML, vous créez le point d’arrivée en donnant un id à un élément. Ensuite, tout lien dont le href est #cet-id demande au navigateur de faire défiler jusqu’au premier id correspondant sur la page (ou sur la page nommée avant le # si vous incluez un chemin).

Réponse directe

1. Donnez à la destination un id, par exemple <h2 id="pricing">.
2. Liez avec href="#pricing".
   Le # signifie « trouve cet id ». Les id doivent être uniques sur la page. Préférez des noms courts sans espaces : pricing, pas Our Pricing!!.

Table des matières sur la page

Une mini navigation en haut d’une longue page est la démo classique pour débutants : liens fragments au-dessus, id correspondants sur les titres en dessous, plus un lien de retour.

Lire l’exemple sur la page

• #intro et #pricing sont des liens fragments, pas des fichiers séparés
• L’id de chaque titre doit correspondre au fragment après #
• La nav peut se placer n’importe où ; les tables des matières en haut de page sont courantes pour un long contenu
• « Back to intro » montre que les signets fonctionnent vers le bas et vers le haut sur le même document

Lier vers une section sur une autre page

Vous pouvez combiner un chemin relatif (ou absolu) avec un fragment. Le navigateur charge la page, puis saute vers l’id s’il existe.

Quand utiliser path#id

• Sauts sur la même page : #pricing suffit
• Un autre fichier HTML de votre projet : guide.html#pricing
• Documentation externe de confiance : une URL complète se terminant par #section-name lorsque ce site expose des id stables
  Si l’id manque sur la page de destination, le navigateur ouvre en général la page en haut et ignore le fragment inconnu.

Habitudes de nommage des id

• Une seule valeur d’id par page — jamais de doublon
• Commencez par une lettre si possible ; évitez les espaces et la ponctuation bizarre
• Utilisez des tirets pour les noms à plusieurs mots : getting-started
• Gardez les noms stables si d’autres pages y feront des liens profonds
  Les id sont pour les machines et les URL ; le texte visible du titre peut rester lisible et différent de la chaîne d’id.

Signets vs « favoris » du navigateur

On dit aussi « bookmark » pour enregistrer une page dans le menu des favoris du navigateur. Cette leçon désigne les liens fragments dans la page. Les favoris du navigateur utilisent l’URL du document (et parfois un fragment si vous en avez copié un). Même mot, emplois quotidiens différents — gardez clair le sens HTML quand vous enseignez.

Notes d’accessibilité et d’expérience

Les liens de saut aident les utilisateurs au clavier et les lecteurs d’écran à parcourir de longues pages quand les destinations sont de vrais repères (titres, sections). N’empilez pas des dizaines d’id vides. Assurez-vous que la cible est visible après le saut — les en-têtes collants peuvent masquer les titres plus tard quand vous apprendrez le CSS ; pour l’instant, vérifiez que la bonne section apparaît.

Pratiquer dans votre éditeur

1. Créez deux titres avec des valeurs id différentes.
2. Au-dessus, ajoutez des liens fragments avec href="#…".
3. Cliquez chaque lien et confirmez que la page saute vers le titre correspondant.
4. Ajoutez un lien « Retour en haut » pointant vers un id sur votre premier titre ou un repère en haut.
5. Depuis un second fichier, liez avec other.html#intro et confirmez le saut entre pages.
6. Dupliquez temporairement un id, observez la confusion, puis rétablissez l’unicité.

Erreurs faciles

• Utiliser le même id deux fois sur une page
• Oublier le # dans href pour que le navigateur cherche un nom de fichier à la place
• Mettre des espaces ou des symboles bizarres dans les id
• Lier vers un id qui n’existe pas
• Confondre les signets fragments avec target="_blank" (emplois différents)
• S’attendre que #pricing seul ouvre un autre fichier sans chemin

Résumé

• Les signets sur la même page utilisent id plus href="#id"
• Les id doivent être uniques, courts et sans espaces
• Idéal pour les longues pages et les mini tables des matières
• Utilisez page.html#id pour sauter dans une section d’une autre page
• Les fragments manquants échouent en général sans bruit en restant en haut