Liens HTML

HTML utilise des hyperliens pour se connecter à un autre document sur le web.

Les liens peuvent être trouvés presque sur toutes les pages web. En cliquant sur un lien, vous pouvez passer d'une page à une autre.

Exemple

Créer un hyperlien
Dans cet exemple, nous montrons comment créer des liens dans un document HTML.
Utiliser une image comme lien
Dans cet exemple, nous montrons comment utiliser une image comme lien.

(Vous trouverez plus d'exemples en bas de cette page.)

Hyperlien HTML (lien)

Un hyperlien peut être un mot, un groupe de mots, ou une image. Vous pouvez cliquer sur ces éléments pour passer à un nouveau document ou à une partie spécifique du document en cours.

Quand vous déplacez le pointeur de la souris sur un lien dans une page web, la flèche devient une petite main.

Nous créons des liens en utilisant l'étiquette <a> dans HTML.

Il y a deux façons d'utiliser les balises <a> :

  1. En utilisant l'attribut href - Créer des liens vers un autre document
  2. En utilisant l'attribut name - Créer des signets dans le document

Lecture recommandée :Qu'est-ce que le hypertexte ?

Syntaxe des liens HTML

Le code HTML d'un lien est simple. Il ressemble à cela :

<a href="url">Texte du lien</a>

L'attribut href définit l'objectif du lien.

Le texte entre les balises de début et de fin est affiché comme un lien hypertexte.

Exemple

<a href="http://www.codew3c.com/">Visitez CodeW3C.com</a>

Le code suivant s'affiche ainsi :Visitez CodeW3C.com

Cliquez sur ce hyperlien pour emmener l'utilisateur vers la page d'accueil de CodeW3C.com.

Astuce :"Texte du lien" n'a pas besoin d'être du texte. Une image ou un autre élément HTML peut également être un lien.

HTML Liens - attribut target

Avec l'attribut Target, vous pouvez définir où le document lié doit s'afficher.

Cette ligne ouvrira le document dans une nouvelle fenêtre :

<a href="http://www.codew3c.com/" target="_blank">Visitez CodeW3C.com!</a>

Essayez-le vous-même

HTML Liens - attribut name

L'attribut name définit le nom de l'ancre (anchor).

Vous pouvez créer des signets dans les pages HTML en utilisant l'attribut name.

Les signets ne s'affichent pas de manière spéciale, ils sont invisibles aux lecteurs.

Lorsque nous utilisons des ancrages nommés (named anchors), nous pouvons créer des liens qui sautent directement vers cet ancre (par exemple, vers un sous-chapitre de la page), de sorte que l'utilisateur n'ait pas besoin de faire défiler constamment la page pour trouver l'information dont il a besoin.

Syntaxe de l'ancre nommée :

<a name="label">Ancre (texte affiché sur la page)</a>

Astuce :Le nom de l'ancre peut être ce que vous voulez.

Astuce :Vous pouvez utiliser l'attribut id à la place de l'attribut name, le nom de l'ancre est tout aussi valide.

Exemple

Tout d'abord, nous nommons l'ancre dans le document HTML (créons un signet) :

<a name="tips">Principales précautions - Conseils utiles</a>

Ensuite, nous créons un lien vers cet ancre dans le même document :

<a href="#tips">Conseils utiles</a>

Vous pouvez également créer un lien vers cet ancre sur d'autres pages :

<a href="http://www.codew3c.com/html/html_links.asp#tips"">Conseils utiles</a>

Dans le code ci-dessus, nous ajoutons le symbole # et le nom de l'ancre à la fin de l'URL, de sorte que nous pouvons directement lier à l'ancre nommée tips.

Effet spécifique :Conseils utiles

Précautions de base - Conseils utiles :

Remarque :Ajoutez toujours la barre oblique oblique à la sous-dossier. Si vous écrivez ainsi le lien : href="http://www.codew3c.com/html" il会产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.codew3c.com/html/"。

Astuce :Les ancrages nommés sont souvent utilisés pour créer des tableaux des matières au début des grands documents. Vous pouvez attribuer un ancre nommée à chaque chapitre et placer les liens vers ces ancrages en haut du document. Si vous visitez souvent la Wikipédia en chinois, vous remarquerez que presque chaque entrée utilise ce type de navigation.

Astuce :Si le navigateur ne trouve pas l'ancre nommée définie, il se positionnera au sommet du document. Aucune erreur ne se produira.

Plus d'exemples

Ouvrir un lien dans une nouvelle fenêtre du navigateur
Cet exemple montre comment ouvrir une page dans une nouvelle fenêtre du navigateur, de sorte que les visiteurs n'aient pas besoin de quitter votre site.
Lien vers une autre position de la même page
Cet exemple montre comment utiliser un lien pour sauter à une autre partie du document.
Sortir du cadre
Cet exemple montre comment sortir du cadre, si votre page est fixée dans un cadre.
Créer un lien e-mail
Cet exemple montre comment lier à un e-mail. (Cet exemple ne fonctionne qu'après l'installation d'un programme client de messagerie.)
Créer un lien e-mail 2
Cet exemple montre un lien e-mail plus complexe.

Balise de lien HTML

Balise Description
<a> Définir un ancre.