La balise a

Les balises <a> et </a>

Les ancrages ou liens hypertextes sont des éléments d’une page html qui permettent de lier le lien (un texte, une image, un menu…) à un élément (une page, une ancre, une popup, un document, une image…). Le lien est généralement activé lorsque l’on clique dessus. C’est ce qui permet de lier des pages Web entre elles.

Les liens hypertextes permettent de naviguer :

  • vers un autre endroit du document
  • vers un fichier html situé à un emplacement différent sur la machine qui héberge la page
  • vers une autre machine

Avec du texte, les ancrages sont fréquemment soulignés (si aucun style ne l’empêche).

Les balises <a> et </a> permettent de définir un lien hypertexte vers un document en spécifiant l’URL de ce document au niveau de l’attribut href.

La page définie par le lien hypertexte s’affiche dans la page courante si l’attribut target n’est pas spécifié.

Il n’est pas possible de croiser ou d’insérer deux balises <a> et </a> l’une dans l’autre.

La balise <a> peut également définir des ancres au sein d’un document accessible depuis d’autre balise <a>.

Les liens hypertextes permettent de naviguer

  • vers un autre endroit du document
  • vers un fichier html situé à un emplacement différent sur la machine qui héberge la page
  • vers une autre machine

Ses attributs spécifiques

  • href : document cible ouvert lors du clic sur le lien
  • hreflang : langage du document
  • target : indique dans quelle page s’ouvre le document
  • title : texte affiché au survol du lien

L’attribut href

L’attribut principal des ancrages est href.

Il s’écrit sous la forme :

<a href="adresse ou url"> … </a>
Lien externe

Il crée un lien vers une page dont on spécifie l’URL
Par exemple :

<a href="http://www.web-ncy.com">Le site</a>
Lien local

On peut créer un lien vers une page située sur le même ordinateur en remplaçant l’URL par le fichier cible. Ce lien peut être fait de façon relative, en repérant le fichier ciblé par rapport au fichier source. Si le fichier cible est « index.html » situé dans le répertoire parent, son lien s’écrira :

<a href="../index.html"> … </a>

Un lien peut aussi mentionner une adresse absolue, en écrivant l’adresse du fichier cible de façon locale :
/!\ ne fonctionnera pas de la manière souhaitée sur un serveur web /!\

<a href="file:///lecteur:/répertoire/index.html"> … </a>

L’attribut target

target="_blank" >>> ouvre le lien dans une nouvelle fenêtre,
target="_parent" >>> dans un agencement de cadre, ouvre le lien dans le cadre supérieur,
target="_self" >>> dans un agencement de cadre, ouvre le lien dans le cadre contenant le lien,
target="_top" >>> dans un agencement de cadre, ouvre le lien dans la page courante,
target="nom du cadre" >>> dans un agencement de cadre, ouvre le lien dans le cadre spécifié.

<a href="http://www.web-ncy.com" target="_blank">Le site</a>

Résultat >>> Le site

target="VotreCible" >>> dans un agencement de cadre, ouvre dans le cadre qui porte le nom VotreCible si ce cadre n’existe pas, ouvre dans une nouvelle fenêtre.

Lien vers le haut de la page

Pour un lien de retour vers le haut de la page, vous pouvez saisir en bas de vos pages le code suivant :

<a href="#" target="_blank">Retour en haut de la page</a>

Résultat >>> Retour en haut de la page

Ce lien est direct, voir un peu trop brut.
Pour permettre à la page de défiler doucement vers le haut, vous pouvez ajouter une règle CSS à votre page :

html {scroll-behavior:smooth;}

/!\ Attention, cette règle n’est pas supportée par tous les navigateurs, elle n’aura aucun effet avec les navigateurs plus anciens /!\

Les signets

On peut créer un signet dans une page, c’est-à-dire marquer un endroit précis d’une page pour s’y rendre par hypertexte. Cela se fait grâce à l’attribut name ou id.
Par exemple :

<p id="signet"> ... </p>

On l’appellera grâce au lien suivant :

<a href="#signet"> Aller vers le signet </a>

On peut ainsi se déplacer à un endroit précis sur une autre page :

<a href="url/nom_du_fichier.html#signet"> Ouvrir la page et aller vers le signet </a>