Titres et cibles de liens HTML

La session Liens vous a donné des éléments a qui fonctionnent avec des valeurs href claires. Deux extras courants changent l’expérience sans remplacer href : un attribut title pour une courte info au survol, et un target qui peut ouvrir la destination dans un nouvel onglet. Utilisés avec soin, ils aident. Placés sur chaque élément de menu, ils agacent et créent des pièges de sécurité.

Ce que font ces attributs

href décide toujours où le lien mène. title, target et rel ajustent les indices et comment le navigateur ouvre cette destination. Apprenez-les comme des outils optionnels par-dessus un texte de lien solide — pas comme des substituts à un libellé descriptif.

Réponse directe

• title="…" — texte d’info-bulle consultatif optionnel au survol (le support et l’utilité varient ; ne vous y fiez jamais seul)
• target="_blank" — ouvrir dans un nouvel onglet ou une nouvelle fenêtre
• Avec _blank, définissez aussi rel="noopener noreferrer" pour que la nouvelle page ne puisse pas prendre le contrôle total de votre onglet d’origine via window.opener (habitude plus sûre au quotidien)
  Gardez la navigation interne au site dans le même onglet par défaut. Réservez _blank aux cas où rester sur votre page aide vraiment — souvent des références externes ou des téléchargements.

title, target et rel en un coup d’œil

Une info-bulle title utile

Utilisez title quand une courte info ajoute de la valeur au-delà du texte visible du lien. Ne collez pas exactement la même phrase aux deux endroits en espérant doubler la clarté — les expériences lecteurs d’écran et survol diffèrent, et la répétition vide gaspille l’attention.

Lire l’exemple title

• Le texte visible Beginner guide reste le libellé principal
• title ajoute une courte chaîne consultative au survol dans beaucoup de navigateurs de bureau
• Le mobile et les technologies d’assistance peuvent ne pas exposer title de la même façon — gardez le texte visible fort
• href pointe toujours vers guide.html ; title ne navigue pas tout seul

Nouvel onglet avec un rel plus sûr

Ouvrir un site externe dans un nouvel onglet peut laisser votre leçon ouverte. Associez _blank à rel="noopener noreferrer" comme habitude plus sûre par défaut pour ces cas.

Pourquoi noopener et noreferrer

• noopener réduit le risque que la nouvelle page manipule votre onglet d’origine via window.opener
• noreferrer évite aussi d’envoyer un référent dans beaucoup de navigateurs (effet latéral de confidentialité ; encore souvent enseigné avec ce modèle)
  Vous n’avez pas besoin d’une théorie profonde de sécurité navigateur dans ce cours — mémorisez les attributs appariés pour les liens externes _blank et passez à la suite.

Ne mettez pas blank partout

Les nouveaux onglets se multiplient. Si chaque lien de barre latérale ouvre _blank, les utilisateurs perdent l’histoire simple du bouton Retour et se retrouvent avec une pile d’onglets. Préférez les liens même onglet pour vos propres pages (about.html, leçon suivante, accueil). Utilisez _blank quand vous quittez votre site ou quand le produit le demande clairement.

title n’est pas le titre de la page

Le <title> du document dans head étiquette tout l’onglet. L’attribut title sur un a n’est qu’un indice sur ce lien. Rôles différents, mot anglais similaire — ne les confondez pas.

Pratiquer dans votre éditeur

1. Ajoutez un lien local avec un texte visible clair et un title utile qui ajoute un détail en plus.
2. Ajoutez un lien externe avec target="_blank" et rel="noopener noreferrer".
3. Survolez (sur bureau) pour voir l’info-bulle ; cliquez pour confirmer un nouvel onglet.
4. Gardez un troisième lien interne sans _blank et confirmez qu’il remplace l’onglet courant normalement.
5. Réécrivez tout title qui ne fait que répéter le texte du lien sans aucune information nouvelle.

Erreurs faciles

• Utiliser _blank sur chaque élément de menu interne
• Oublier rel="noopener noreferrer" sur les liens externes _blank
• Écrire un title inutile qui ne fait qu’écho au texte du lien
• Croire que title ou target peut remplacer un href manquant
• Confondre l’attribut title du lien avec l’élément document <title>

Résumé

• title peut ajouter une courte info au survol ; le texte visible du lien reste prioritaire
• target="_blank" ouvre un nouvel onglet ou une nouvelle fenêtre
• Associez _blank à rel="noopener noreferrer" pour des liens externes plus sûrs
• Préférez la navigation même onglet pour vos propres pages
• href reste la destination ; ces attributs ne font que raffiner l’expérience