Attribut href du tag HTML <a>

Balise HTML <a>

Définition et utilisation

href L'attribut spécifie l'URL de la page vers laquelle le lien pointe.

href La valeur de l'attribut peut être une URL relative ou absolue vers un document valide, y compris des identifiants de fragments et des segments de code JavaScript. Si l'utilisateur sélectionne le contenu du tag <a>, le navigateur essaiera de rechercher et d'afficher href L'URL spécifiée par l'attribut représente un document, ou une liste d'expressions JavaScript, de méthodes et de fonctions à exécuter.

Si href Si l'attribut n'existe pas, le tag <a> ne sera pas un lien hypertexte.

Astuce :Vous pouvez lier à la partie supérieure de la page actuelle avec href="#top" ou href="#" !

Créer un lien de texte

Un simple <a> peut faire référence à un autre document sous la forme suivante :

<a href="http://www.codew3c.com/index.html">CodeW3C.com en ligne</a>

Les navigateurs affichent le terme "CodeW3C.com Cours en ligne" avec des effets spéciaux (généralement du texte bleu souligné), de sorte que les utilisateurs sachent qu'il s'agit d'un lien hypertexte qui peut se connecter à d'autres documents. Comme ceci :

CodeW3C.com Enseignement En Ligne

Les utilisateurs peuvent également utiliser les options du navigateur pour spécifier eux-mêmes la couleur du texte, la couleur du texte du lien avant et après.

Astuce :Vous pouvez utiliser Les pseudo-classes CSSAjouter des styles complexes et variés aux liens textuels.

Créer un lien image

Les ancres plus complexes peuvent également inclure des images. Ce logo ici est un lien image, cliquez sur l'image pour retourner à la page d'accueil de W3school :

<a href="http://www.codew3c.com/index.html">
<img src="/i/codew3c_logo_white.gif" />
</a>

Le code suivant ajoutera un lien retour à la page d'accueil pour le LOGO de CodeW3C.com :

CodeW3C.com Enseignement En Ligne

La plupart des navigateurs graphiques placent un cadre spécial autour de l'image lorsqu'elle fait partie d'un lien. En mettant l'image dans le tag <img>, vous pouvez l'attribut borderDéfinir à 0 peut supprimer la bordure des liens hypertextes. Vous pouvez également utiliser Les propriétés des bordures en CSSPour modifier globalement le style des bordures des éléments.

Exemple

Exemple 1

L'attribut href détermine la destination du lien :

<a href="https://www.codew3c.com">Visiter CodeW3C.com</a>

Essayer vous-même

Exemple 2

Comment utiliser une image comme lien :

<a href="https://www.codew3c.com">
<img border="0" alt="W3School" src="/i/logo/w3logo.png" width="400" height="225">
</a>

Essayer vous-même

Exemple 3

Comment lier à une adresse e-mail :

<a href="mailto:someone@example.com">Envoyer un e-mail</a>

Essayer vous-même

Exemple 4

Comment lier à un numéro de téléphone :

<a href="tel:+8613888888888">+86 138 8888 8888</a>

Essayer vous-même

Exemple 5

Comment lier à une autre partie de la même page :

<a href="#section2">Aller au chapitre 2</a>

Essayer vous-même

Exemple 6

Comment lier au JavaScript :

<a href="javascript:alert('Hello World!');">Exécuter JavaScript</a>

Essayer vous-même

Syntaxe

<a href="URL">

Valeur de l'attribut

Valeur Description
URL

L'URL du lien.

Valeurs possibles :

  • URL absolue - pointant vers un autre site (par exemple href="http://www.example.com/index.html")
  • URL relative - pointant vers un fichier du site (par exemple href="index.html")
  • Lien vers un élément de page spécifique par id (par exemple href="#section2")
  • Autres protocoles (par exemple https://, ftp://, mailto:, file:等)
  • Script (par exemple href="javascript:alert('Hello');")

Support du navigateur

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support

Balise HTML <a>