Liens HTML

Les sites web contiennent différents types de liens qui vous mènent directement vers d’autres pages ou vous permettent de naviguer vers une partie précise de la page. Les liens en HTML sont appelés hyperliens. Ils sont définis à l’aide de la balise <a>.

Les hyperliens s’appliquent à une phrase, un mot, une image ou à n’importe quel élément HTML.

La couleur par défaut des liens en HTML est :

liens non visités : soulignés et bleus
liens visités : soulignés et violets
liens actifs : soulignés et rouges

C’est le style par défaut des liens, mais vous pouvez supprimer le soulignement ou changer la couleur des liens à l’aide des styles CSS.

Syntaxe

La balise <a> se présente par paires : la balise ouvrante <a> indique où le lien doit commencer et la balise fermante </a> indique où le lien se termine.

Pour créer un hyperlien, vous devez utiliser la balise <a> et l’attribut href, dont la valeur est l’URL, ou l’emplacement, vers lequel le lien pointe.

Liens HTML

html

<a href="url">your text</a>.

Exemple de la balise HTML `<a>` avec l’attribut href :

Exemple de liens HTML|W3Docs.com|W3Docs

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Link example</h2>
    <a href="https://www.w3docs.com/">W3Docs.com</a>
  </body>
</html>

Try it Yourself »

Résultat

hyperlink

Dans l’exemple ci-dessus, nous avons utilisé <h2> pour définir des sous-titres et la balise <a> pour créer des liens. Entre les balises <a> et </a>, nous avons W3Docs.com. Cliquez dessus et vous serez redirigé vers la page d’accueil de notre site web.

Attribut target

Pour ouvrir un lien dans une nouvelle page, vous devez ajouter target="_blank" à votre code. L’attribut target précise exactement où ouvrir la page liée. Avec target="_blank", la page liée s’ouvrira dans une nouvelle fenêtre ou dans un nouvel onglet.

Liens HTML

html

<a href="https://www.w3docs.com/" target="_blank" rel="noopener noreferrer">W3Docs.com</a>

Attribut id

Pour naviguer vers une partie précise de la page, utilisez l’attribut id.

Voici comment procéder :

Utilisez l’attribut id pour donner un nom à la partie de la page vers laquelle l’utilisateur doit être redirigé après avoir cliqué sur le lien. La valeur de l’attribut peut être un mot ou une phrase qui décrit cette partie (si vous utilisez une phrase, il ne doit pas y avoir d’espaces — utilisez plutôt des underscores.)
Ex. <h2 id="jump">Link example with id attribute</h2>. Nous avons utilisé l’attribut id appelé "jump".
Créez un hyperlien en utilisant l’id de la cible du lien, précédé d’un dièse (#)
Ex. <a href="#jump">When you click on this link, you will be redirected to the part of the page with "jump" id</a>.

Voyons maintenant à quoi cela ressemblera dans le code HTML. Dans l’exemple ci-dessous, faites défiler jusqu’au lien en bas, cliquez sur le lien, et vous reviendrez en haut.

Exemple de la balise HTML `<a>` avec l’attribut id :

Exemple de lien avec un attribut id

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2 id="jump">Link example with id attribute</h2>
    <p>
      Here can be any part of the page you want to the user to end up clicking on hyperlink. We use attribute id called “jump”.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum ut ipsum quis elementum. Curabitur a sem a ante pulvinar tincidunt. Nullam posuere arcu in erat laoreet, vitae efficitur ex venenatis. Quisque in fermentum nunc, vel consequat risus. Suspendisse risus purus, semper quis tempus eget, iaculis euismod velit. Quisque mi nunc, cursus et suscipit eget, gravida et nisi. Duis eros massa, eleifend eget tincidunt in, porta sit amet ante. Nunc eu feugiat quam. Morbi vel sapien ac dolor ultricies dapibus quis quis libero. Cras et auctor leo.
    </p>
    <p>
      Donec accumsan sapien vitae diam commodo lobortis. Nam feugiat ullamcorper malesuada. Praesent fermentum nulla quis mauris consequat mollis. In lacus libero, laoreet nec aliquam in, vestibulum quis dui. Donec congue enim et lorem lobortis, ut suscipit augue congue. Integer efficitur ligula nec lectus aliquet, in luctus magna efficitur. Mauris euismod mauris viverra enim tincidunt efficitur. Ut imperdiet quis lorem in tincidunt. Nam magna orci, venenatis et felis rhoncus, semper maximus eros. Proin mauris mauris, sodales quis eleifend vel, convallis in leo. Curabitur vel auctor lacus. Integer vestibulum nisi magna, id malesuada erat consequat quis. Vivamus iaculis aliquam ullamcorper. Aenean faucibus posuere rhoncus. Mauris tincidunt magna velit, sed semper arcu venenatis non. Sed odio risus, luctus eget aliquam vel, elementum id sem.
    </p>
    <p>
      Ut imperdiet pharetra nisl ut mollis. Aenean neque odio, volutpat a imperdiet sit amet, sollicitudin non dolor. Donec velit odio, lacinia sed dui in, dignissim consequat sem. Nullam vel vestibulum mi, ornare lacinia diam. Vivamus sed vestibulum ligula, a tempor magna. Nulla vitae nisi ligula. Vivamus euismod tincidunt justo varius rhoncus. Aliquam vitae enim odio. Nunc pretium, odio in fermentum fringilla, ipsum nulla aliquet magna, ac aliquet dui tellus viverra lacus. In vel feugiat elit. Nulla a pretium nunc, consequat blandit tellus. Proin sit amet molestie eros. Aliquam sit amet quam tincidunt, egestas nunc ut, vehicula tellus. Donec ullamcorper, ipsum cursus rutrum fermentum, ipsum sem semper orci, quis ultrices odio turpis sit amet tortor.
    </p>
    <p>
      Phasellus ultrices at neque sit amet varius. Fusce molestie lacinia lorem, eu interdum urna tempor malesuada. Etiam nec ultricies nisi, ut fringilla nibh. Phasellus arcu metus, ultrices eu ipsum eu, fermentum fermentum tellus. Cras blandit massa turpis, eu condimentum purus suscipit ut. In hac habitasse platea dictumst. Sed nec magna sit amet mi congue aliquam. Integer tempor lobortis eros, ut finibus tortor fringilla id. Mauris mollis sollicitudin justo, et condimentum lacus. Nam tellus velit, efficitur nec efficitur eu, pharetra ac tortor. Mauris vitae sagittis purus.
    </p>
    <p>
      Donec accumsan sapien vitae diam commodo lobortis. Nam feugiat ullamcorper malesuada. Praesent fermentum nulla quis mauris consequat mollis. In lacus libero, laoreet nec aliquam in, vestibulum quis dui. Donec congue enim et lorem lobortis, ut suscipit augue congue. Integer efficitur ligula nec lectus aliquet, in luctus magna efficitur. Mauris euismod mauris viverra enim tincidunt efficitur. Ut imperdiet quis lorem in tincidunt. Nam magna orci, venenatis et felis rhoncus, semper maximus eros. Proin mauris mauris, sodales quis eleifend vel, convallis in leo. Curabitur vel auctor lacus. Integer vestibulum nisi magna, id malesuada erat consequat quis. Vivamus iaculis aliquam ullamcorper. Aenean faucibus posuere rhoncus. Mauris tincidunt magna velit, sed semper arcu venenatis non. Sed odio risus, luctus eget aliquam vel, elementum id sem.
    </p>
    <p>
      Ut imperdiet pharetra nisl ut mollis. Aenean neque odio, volutpat a imperdiet sit amet, sollicitudin non dolor. Donec velit odio, lacinia sed dui in, dignissim consequat sem. Nullam vel vestibulum mi, ornare lacinia diam. Vivamus sed vestibulum ligula, a tempor magna. Nulla vitae nisi ligula. Vivamus euismod tincidunt justo varius rhoncus. Aliquam vitae enim odio. Nunc pretium, odio in fermentum fringilla, ipsum nulla aliquet magna, ac aliquet dui tellus viverra lacus. In vel feugiat elit. Nulla a pretium nunc, consequat blandit tellus. Proin sit amet molestie eros. Aliquam sit amet quam tincidunt, egestas nunc ut, vehicula tellus. Donec ullamcorper, ipsum cursus rutrum fermentum, ipsum sem semper orci, quis ultrices odio turpis sit amet tortor.
    </p>
    <p>
      Fusce ultricies ex eros, et maximus est feugiat vel. Ut non nunc turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi viverra eu dui congue pulvinar. Donec tincidunt, nulla sed sodales iaculis, felis sem dapibus sem, et viverra justo massa sed magna. Vestibulum eleifend ex vitae mattis iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus.
    </p>
    <a href="#jump">When we click on this link, we will be redirected to the part of the page with “jump” id</a>
  </body>
</html>

Try it Yourself »

Comment appliquer un hyperlien à une image

Pour appliquer un hyperlien à une image, il suffit de placer l’image dans la balise <a>. Cela se fait avec la balise <img>, qui doit comporter certains attributs obligatoires :

src - la source de l’image
alt - texte alternatif pour l’image
width - largeur de l’image
height - hauteur de l’image

Exemple des balises `<a>` et `<img>` pour appliquer un hyperlien à une image :

Hyperlien appliqué à une image|Exemple de liens HTML|W3Docs

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="https://www.w3docs.com/">
    <img src="https://fr.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo" />
    </a>
  </body>
</html>

Try it Yourself »

Images HTML seront abordées en détail dans le chapitre suivant.

Titres de liens

L’attribut title est utilisé pour spécifier des informations supplémentaires sur un élément. Ces informations sont souvent affichées sous forme d’infobulle lorsque vous placez la souris sur l’élément.

Exemple de titres de liens :

Exemple de titres de liens

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Link Title Example</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>The <span class="attribute">title</span>  attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.</p>
    <a href="https://www.w3docs.com/learn-html.html" title="Learn HTML">Learn more about HTML</a>
  </body>
</html>

Try it Yourself »

Chemins externes

Vous pouvez faire référence à des pages externes avec une URL ou un chemin correspondant à la page web actuelle. L’exemple ci-dessous montre comment procéder :

Exemple de la balise HTML `<a>` pour faire référence à une page externe avec son URL :

Exemple de la balise HTML <a> pour faire référence à une page externe avec son URL :

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>External paths</h1>
    <div>Example of referencing an external page with its URL</div>
    <p><a href="https://en.wikipedia.org/wiki/HTML">More about HTML</a></p>
  </body>
</html>

Try it Yourself »

Liens HTML ​

Syntaxe ​

Exemple de la balise HTML <a> avec l’attribut href : ​

Résultat ​

Attribut target ​

Attribut id ​

Exemple de la balise HTML <a> avec l’attribut id : ​

Comment appliquer un hyperlien à une image ​

Exemple des balises <a> et <img> pour appliquer un hyperlien à une image : ​

Titres de liens ​

Exemple de titres de liens : ​

Chemins externes ​

Exemple de la balise HTML <a> pour faire référence à une page externe avec son URL : ​

Pratique ​

Liens HTML

Syntaxe

Exemple de la balise HTML `<a>` avec l’attribut href :

Résultat

Attribut target

Attribut id

Exemple de la balise HTML `<a>` avec l’attribut id :

Comment appliquer un hyperlien à une image

Exemple des balises `<a>` et `<img>` pour appliquer un hyperlien à une image :

Titres de liens

Exemple de titres de liens :

Chemins externes

Exemple de la balise HTML `<a>` pour faire référence à une page externe avec son URL :

Pratique