Lien

Les liens HTML sont des éléments essentiels pour connecter différentes pages web entre elles.
Ils permettent aux utilisateurs de naviguer facilement au sein du site ou vers d'autres sites.

Ils sont également utilisés pour créer des liens vers des ressources externes telles que des images, des fichiers PDF ou d'autres sites web.

Liens Internes

Les liens internes sont utilisés pour relier différentes pages au sein du même site web.
Ils sont définis par un chemin relatif ou absolu vers la page cible.

<p>See the Pen <a href="https://codepen.io/dendevs/pen/zYXJmrp">
html-link-01</a> by dendevs (<a href="https://codepen.io/dendevs">@dendevs</a>)
on <a href="https://codepen.io">CodePen</a>.</p>

Liens Externes

Les liens externes sont utilisés pour relier une page web à une ressource externe c'est à dire située sur un autre site web.
Ils sont définis par une URL complète.

<p>See the Pen <a href="https://codepen.io/dendevs/pen/vYMzVLP">
html-link-02</a> by dendevs (<a href="https://codepen.io/dendevs">@dendevs</a>)
on <a href="https://codepen.io">CodePen</a>.</p>

Attributs des Liens HTML

Les liens HTML peuvent être personnalisés à l'aide d'attributs pour spécifier leurs comportement.
On peut préciser l'ouverture dans une nouvelle fenêtre, le titre, etc.

href

L'attribut href spécifie l'URL de destination du lien.

<p>See the Pen <a href="https://codepen.io/dendevs/pen/rNbZqeY">
html-link-03</a> by dendevs (<a href="https://codepen.io/dendevs">@dendevs</a>)
on <a href="https://codepen.io">CodePen</a>.</p>

On peut aussi utiliser le href avec # ce qui permet de crée une navigation interne à la page.
Il faut au préalable ajouter un attribut id sur un des éléments de la page et ensuite on peut l'utiliser pour crée un lien vers ce contenu.

<p>See the Pen <a href="https://codepen.io/dendevs/pen/zYXJmKR">
html-link-05</a> by dendevs (<a href="https://codepen.io/dendevs">@dendevs</a>)
on <a href="https://codepen.io">CodePen</a>.</p>

target

L'attribut target spécifie comment le lien doit être ouvert.
La valeur _blank ouvre le lien dans une nouvelle fenêtre ou un nouvel onglet.

<p>See the Pen <a href="https://codepen.io/dendevs/pen/GRLXYZV">
html-link-04</a> by dendevs (<a href="https://codepen.io/dendevs">@dendevs</a>)
on <a href="https://codepen.io">CodePen</a>.</p>

title

L'attribut title fournit un texte supplémentaire qui apparaît lorsque l'utilisateur survole le lien avec la souris.

<p>See the Pen <a href="https://codepen.io/dendevs/pen/ZEZMqOJ">
html-link-05</a> by dendevs (<a href="https://codepen.io/dendevs">@dendevs</a>)
on <a href="https://codepen.io">CodePen</a>.</p>

Bonnes Pratiques

Utiliser des descriptions de liens descriptives pour améliorer l'accessibilité et l'utilisabilité.
Verifier que les liens internes et externes sont corrects et fonctionnent correctement.
Utiliser des liens relatifs pour les liens internes chaque fois que possible pour faciliter la maintenance du site.

Lien

Liens Internes​

Liens Externes​

Attributs des Liens HTML​

href​

target​

title​

Bonnes Pratiques​