Les prérequis :
Il est essentiel de comprendre ce qu’est une balise html pour mieux appréhender le contenu de cet article.
La balise <a> (Balise HTML) est utilisée pour créer un lien entre deux pages ou entre deux éléments de la même pages . Cette balise est la balise principale qui permet la navigation sur le web.
Les spécifications techniques :
Catégorie de la balise : Contenu de flux, Contenu de type interactif
Types de contenus : Contenu transparent sans qu’il aie de contenu de type interactif
Les attributs de la balise : Les attributs globaux, Les attributs spécifiques
Interface DOM :
[Exposed=Window]
interface HTMLAnchorElement : HTMLElement {
[HtmlConstructor] constructor();
[CEReactions] attribute DOMString target;
[CEReactions] attribute DOMString download;
[CEReactions] attribute USVString ping;
[CEReactions] attribute DOMString rel;
[SameObject, PutForwords=value] readonly attribute DOMTokenList relList;
[CEReactions] attribute DOMString hreflang;
[CEReactions] attribute DOMString type;
[CEReactions] attribute DOMString text;
[CEReactions] attribute DOMString referrerPolicy;
//A d’autre éléments obsolete
};
HTMLAnchorElement includes HTMLHyperlinkElementUtils;
Les caractéristiques de la balise <a>
La syntaxe de la balise <a> ressemble à ce qui suit :
<a href="www.google.com"> Page google </a>
Elle se compose de chevrons ouvrant « < » et fermant « > »
Son attribut principal est href : Sa fonctionnalité est celle de contenir l’adresse de la prochaine destination.
Elle fait partie des balises de type inline
Pour plus d’informations sur les composants des balises, consultez l’article » La balise en HTML « .
Sa création a marqué l’histoire du web :
Les hyperliens (comme l’est la balise « a ») ont été proposés comme solution de navigation dans la création de plusieurs programmes, mais ils ont été officiellement utilisés qu’en 1980, créés par Tim Berners-Lee dans son programme « ENQUIRE WITHIN UPON EVERYTHING » ( trad: cherchez dedans sur tous, un petit clin d’œil à une encyclopédie publié par Houlston and Sons en 1856 ) .
L’organisation du projet s’est inspiré de celle de dossiers incluant plusieurs document, chaque lien dans le projet mène vers un document virtualisé : Voir le document.
Lors de sa création, le projet de Tim était considéré comme une révolution technologique, où l’ère du partage du savoir accessible via un ordinateur branché à un réseau internet. Pour la présentation de son projet, Tim avait mis son rapport de recherche sur ce réseau, toujours existant jusqu’à nos jours.
Les types de lien hypertexte :
Il existe plusieurs manières de naviguer sur les pages web: Des liens qui naviguent vers des pages externes et des liens qui vous envoient à un emplacement précis sur la même page qu’on nome les ancres.
Les liens externes :
Ce type de lien mène d’une page web à une autre. C’est la manière classique de navigation utilisée depuis la création des 1eres pages web.
Les liens internes ou les ancres:
Ce type de lien mène d’un lien vers une balise dans la même page, on retrouve ce genre de liens dans les sites de type one-page où toute la navigation se passe sur la même page (avec quelque effets ajoutées en Javascript).
Voici quelques exemples de sites one-page :
En pratique
Pour mettre en place une ancre, on crée d’abord la balise qu’on veut cibler et on y ajoute un attribut « id » :
<h2 id="ma-cible"> Ma cible </h2>
On ajoute à la balise a, le contenu de l’ID de la balise qu’on vient de créer dans l’attribut href précédé par un # » :
<a href="#ma-cible"> Ma cible </a>
Les attributs de la balise a :
|
Attribut
|
Cas d'utilisation
|
|---|---|
|
href
|
Comporte le lien / url cible
|
|
hreflang
|
Définie la langue et la géolocalisation du lien cible, il prend comme valeur le code (2 Caractères) de la langue voulue.
|
|
download
|
Permet le téléchargement du lien indiqué sur l’attribut href
|
|
ping
|
Il prend comme valeur un lien ou plusieurs liens. Lors du clique, elle permet de notifier les liens indiquées par le biais d’une requête POST HTTP. Cet attribut est spécifiquement utilisé pour le tracking
|
|
media
|
Définie pour quel média/appareil le lien est optimisé
|
|
target
|
Définie où ouvrir la page de destination
|
|
rel
|
Définie la relation entre la page que contient le lien et la page de destination
|
|
Class
|
Permet d’ajouter un nom de class
|
