Les liens hypertexte en HTML

1. A propos des liens hypertexte

Les liens hypertexte, communément appelés liens, sont un élément essentiel du Web qui permettent aux utilisateurs de naviguer entre différentes pages Web. En HTML, les liens sont créés à l'aide de la balise <a> (ancrages), qui peut être utilisée pour créer des liens vers d'autres pages, des fichiers, des images, des adresses e-mail et bien plus encore.

Syntaxe de base des liens hypertexte

  1. href: C'est l'attribut principal de la balise <a>, qui spécifie l'URL de la cible du lien.
  2. Texte du lien: C'est le texte visible du lien que l'utilisateur cliquera pour accéder à la cible.

2. Lien vers une page Web

Pour créer un lien vers une autre page Web, vous devez spécifier l'URL complète de la page cible dans l'attribut href.

Exemple

3. Lien vers une adresse e-mail

Vous pouvez également créer un lien pour ouvrir le client de messagerie de l'utilisateur avec une adresse e-mail pré-remplie en utilisant le préfixe "mailto:" dans l'attribut href.

Exemple




4. Lien vers un fichier téléchargeable

Pour créer un lien vers un fichier téléchargeable, il vous suffit de spécifier le chemin du fichier dans l'attribut href.

Exemple

5. Lien vers une ancre dans la même page

Vous pouvez créer des liens hypertextes qui pointent vers des ancres dans la même page en utilisant l'attribut href avec le nom de l'ancre précédé d'un dièse (#).

Exemple

6. Lien vers une nouvelle fenêtre ou un nouvel onglet

Pour ouvrir le lien hypertexte dans une nouvelle fenêtre ou un nouvel onglet, vous pouvez utiliser l'attribut target avec la valeur "_blank" dans la balise <a>.

Exemple

7. Lien avec des attributs supplémentaires

Vous pouvez également ajouter des attributs supplémentaires à la balise <a> pour personnaliser le comportement du lien. Par exemple, vous pouvez ajouter une classe, un titre ou d'autres attributs d'événements JavaScript etc.

Exemple




8. Les attributs de la balise de lien <a>

La balise <a> en HTML (ancrage) prend en charge plusieurs attributs qui permettent de personnaliser le comportement et l'apparence des liens hypertexte. Voici la liste des attributs de la balise <a> :

  1. href: Spécifie l'URL de la cible du lien.
  2. target: Définit où ouvrir la cible du lien. Les valeurs courantes sont "_blank" (nouvelle fenêtre ou nouvel onglet), "_self" (dans la même fenêtre ou onglet), "_parent" (dans le cadre parent) et "_top" (dans la fenêtre parent de tous les cadres).
  3. download: Indique que le lien doit être téléchargé lorsque cliqué. L'attribut download peut contenir le nom de fichier préféré pour le téléchargement.
  4. rel: Définit la relation entre la page courante et la page cible. Les valeurs courantes incluent "noopener" pour éviter les attaques de fenêtres contextuelles, "noreferrer" pour ne pas envoyer de référeur à la page cible, etc.
  5. type: Définit le type de média de la cible liée (par exemple, "text/html" pour une page HTML, "image/jpeg" pour une image, etc.).
  6. ping: Spécifie une liste d'URLs séparées par des espaces pour être requêtées par le serveur lorsque le lien est cliqué.
  7. media: Définit le type de média auquel s'applique le lien.
  8. hreflang: Indique la langue du contenu de la page cible liée.
  9. referrerpolicy: Contrôle la politique de transmission du Referer header lorsque le lien est suivi.
  10. shape et coords: Utilisés dans les anciennes cartes d'image pour spécifier la forme et les coordonnées de la zone de la carte liée.
  11. title: Fournit un texte descriptif (infobulle) qui s'affiche lorsque l'utilisateur survole le lien avec la souris.
  12. accesskey: Définit une touche de raccourci pour activer le lien. Lorsque l'utilisateur appuie sur la touche spécifiée (généralement en combinaison avec la touche Alt), le lien sera activé.
  13. tabindex: Spécifie l'ordre de tabulation du lien. Vous pouvez définir un ordre numérique pour les liens en utilisant cet attribut.
  14. rel, rev, charset, shape, coords, name, urn, archive, code, declare, standby, usemap: Ces attributs étaient utilisés dans des versions antérieures de HTML pour des fonctionnalités spécifiques, mais ils sont désormais obsolètes et ne sont plus recommandés pour une utilisation moderne.
  15. Attributs d'événements JavaScript : Vous pouvez également utiliser des attributs d'événements tels que onclick, onmouseover, onmouseout, etc., pour lier des scripts JavaScript spécifiques aux événements du lien.




Exemple (attribut target)

Exemple (attribut download)

Exemple (attribut rel)

Exemple (attribut type)

Exemple (attribut ping)

Exemple (attribut media)

Exemple (attribut hreflang)

Exemple (attribut referrerpolicy)

Exemple (attribut d'événements JavaScript)

 

 

 

Younes Derfoufi
CRMEF OUJDA

1 thought on “Les liens hypertexte en HTML

Leave a Reply