Tag HTML <a>
Dans le navigateur, les hyperliens se différencient avec ses formes et ses couleurs. Par défaut, les liens HTML sont affichés comme un bleu texte souligné. En déplaçant le curseur de la souris sur le lien, il devient rouge (lien actif). Les liens, sur lesquels on a déjà cliqué (les liens visité), deviennent violets.
On peut changer les couleurs des liens et enlever le soulignement à l’aide des styles de CSS.
Syntaxe
Tag <a> est apparié, le tag fermant </a> est obligatoire.
Attributs
Avec le tag <a> on utilise des attributs, des paramètres supplémentaires, qui donnent des opportunités additionnelles de la formation du texte. Voici quelques examples.
L’attribut href
L’attribut obligatoire du tag <a> href indique un lien sur le page web ou il décide le lieu sur ce navigateur, où l’utilisateur va se trouver après le clique sur le lien. La signification de l’attribut peut être URL, aussi bien que l’ancre. L’ancre indique sur ID (identifiant unique) part de page web, sur lequel le lien mène. Avant ID on met le symbol de croisillon (#).
C’est comme cela:
<a href="url">text du lien</a>
<a href="#a">text du lien</a>Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document </title>
</head>
<body>
<a href="https://fr.w3docs.com/">W3docs.com</a>
</body>
</html>Résultat
En cliquant sur le lien vous se trouverez sur le page d'accueil de notre page web.
Attribut target
Attribut target indique au navigateur dans quelle fenêtre ouvrir le document (par défaut les liens s’ouvrent dans la fenêtre courante).
Pour l’attribut target il existe les significations suivantes :
- _blank ouvre le lien dans la nouvelle fenêtre.
- _self ouvre le lien dans la fenêtre courante.
- _parent ouvre le document dans la la fenêtre parent des frames.
- _top annule tout les frames et ouvre en pleine fenêtre du navigateur.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document </title>
</head>
<body>
<a href="https://fr.w3docs.com/" target="_blank">W3docs.com</a>
</body>
</html>Résultat
Attribut rel
Cet attribut établit des relations entre le document courant et le lien. Les significations possibles de l’attribut peuvent être:
- alternate – indique la version alternative du document.
- author – lien sur l’auteur du document ou d’article.
- bookmark – lien constant, qui est utilisé pour les signets.
- nofollow - informe les moteurs de recherche qu’il ne faut pas passer par les liens ТИЦ и PR
Le tag <a> supporte aussi Les attributs globaux.
Comment styler le tag HTML <a> ?
Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <a>:
- La propriété CSS font-style définit le style de la police: normal | italic | oblique | initial | inherit
- La propriété CSS font-family spécifie une liste priorisée d’un ou plusieurs noms de famille de police et/ou noms de famille génériques pour l’élément sélectionné.
- La propriété CSS font-size définit la taille de la police.
- La propriété CSS font-weight définit si la police doit être en gras ou épaisse.
- La propriété CSS text-transform contrôle le cas de texte et la capitalisation.
- La propriété CSS text-decoration spécifie la décoration ajoutée au texte, et est une propriété raccourcie pour les propriétés CSS text-decoration-line, text-decoration-color, text-decoration-style.
Coloration du texte dans le tag HTML <a>:
- La propriété CSS color décrit la couleur du contenu et les décorations du texte.
- La propriété CSS background-color définit la couleur de fond d’un élément.
Styles de mise en page du texte pour la tag HTML <a>:
- La propriété CSS text-indent spécifie l’indentation de la première ligne dans un bloc de texte.
- La propriété CSS text-overflow spécifie comment le contenu qui n’est pas affiché doit être signalé à l’utilisateur.
- La propriété CSS white-space spécifie comment l’espace blanc à l’intérieur d’un élément est géré.
- La propriété CSS word-break spécifie où les lignes doivent être cassées.
Autres propriétés utiles pour le tag HTML <a>:
- La propriété CSS text-shadow ajoute des ombres au texte.
- La propriété CSS text-align-last définit l’alignement de la dernière ligne du texte.
- La propriété CSS line-height spécifie la hauteur d’une ligne.
- La propriété CSS letter-spacing définit les espaces entre les lettres/caractères d’un texte.
- La propriété CSS word-spacing permet de définir l’espacement entre les mots.
Support de Navigateurs
|
|
|
|
|
|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ |
Pratiquez vos connaissances
