l’élément anchor est utilisé pour créer des liens hypertexte entre une ancre source et une ancre destination. La source est le texte, l’image ou le bouton qui relie à une autre ressource et la destination est la ressource à laquelle l’ancre source est liée.,

les hyperliens sont l’une des technologies fondamentales qui font du web l’autoroute de l’information, et comprendre comment utiliser les éléments d’ancrage est l’une des premières choses que vous devez maîtriser lors de l’apprentissage du HTML.

L’élément D’ancrage

la balise de l’élément d’ancrage est la lettre « a” entourée de crochets comme ceci:<a>. Les attributs d’ouverture et de fermeture sont requis, et tout le contenu entre les balises constitue la source d’ancrage.,

bien que les exemples ci-dessus produisent des éléments d’ancrage, ils ne sont pas très utiles car nous n’avons inclus Aucune instruction supplémentaire. Pour l’instant, ce ancrage d’éléments de liaison pour rien. Pour lier une ancre source à une ancre destination, nous devons appliquer des attributs supplémentaires à l’élément d’ancre.

dans ce court tutoriel, nous allons couvrir les attributs que vous pouvez utiliser pour ajouter une ancre de destination à vos hyperliens, dire au navigateur quoi faire avec le lien, et ajouter une signification sémantique aux éléments d’ancrage pour les navigateurs et les robots d’exploration web à utiliser.,

les attributs D’ancrage les plus importants

Il existe trois attributs d’ancrage que vous devez connaître pour créer des hyperliens fonctionnels. Ces attributs sont href, target et download.

spécifier une cible de lien hypertexte: href

la référence hypertexte, ouhref, attribut est utilisé pour spécifier une cible ou une destination pour l’élément d’ancrage. Il est le plus souvent utilisé pour définir une URL vers laquelle l’élément d’ancrage doit être lié.,

In this example, the <a href="http://example.com">anchored text</a>links to the URL <em>www.example.com</em>.

Un href pouvez faire beaucoup plus que juste un lien vers un autre site web.

• Il peut être utilisé pour créer un lien direct vers n’importe quel élément d’une page web auquel unid a été attribué.
• Il peut être utilisé pour créer un lien vers une ressource en utilisant un protocole autre que http.
• Il peut être utilisé pour exécuter un script.

le code HTML suivant inclut des exemples de ces trois actions:

dans la case ci-dessous, vous verrez que le code HTML est affiché dans le navigateur. Essayez chaque lien pour voir ce qui se passe.,

Le href élément est assez facile à utiliser, mais nous pouvons obtenir beaucoup plus de kilométrage de notre ancrage des éléments d’apprendre à connaître la balise target attribut.

spécifiez un emplacement pour ouvrir le lien: target

revenons au lienmailto que nous avons créé dans l’exemple précédent. Voici à nouveau ce code:

We'd love for you to <a href="mailto:">get in touch</a> with us!

bien que ce lien soit utile, la façon dont il s’ouvre n’est pas idéale., Selon la façon dont votre ordinateur et votre navigateur sont configurés, il est possible que le fait de cliquer sur le lien créé par ce texte redirigera la fenêtre de votre navigateur de ce site web vers une application de messagerie web telle que Gmail ou Yahoo! Courrier. Bien que nous souhaitions certainement encourager nos visiteurs à nous contacter, nous ne voulons pas le faire au détriment de l’éloignement des visiteurs de notre site web.

La réponse à cette énigme est la balise target attribut jumelé avec la balise _blank valeur.,

We'd love for you to <a href="mailto:" target="_blank" rel="noopener">get in touch</a> with us!

lorsque nous ajoutons l’attributtarget et l’attribut_blank à notre lien, nous disons au navigateur des visiteurs d’ouvrir le lien dans un nouvel onglet ou une nouvelle fenêtre de navigateur (vide). Si nous rendons ce code dans le navigateur, lorsqu’un visiteur clique sur le lien, il s’ouvrira dans un nouvel onglet.

définir une Ressource à Télécharger: télécharger

les Liens sont également utilisés pour raconter un navigateur pour lancer le téléchargement d’un fichier., L’attributdownload est utilisé pour identifier un lien qui doit lancer un téléchargement et la valeur attribuée à l’attributdownload est le nom du fichier à télécharger.

l’attribut href entre également en jeu lors de la configuration d’un élément d’ancrage qui initie un téléchargement. Alors que l’attributdownload nomme le fichier, l’attributhref pointe vers l’emplacement où le fichier est hébergé.,

Voici un exemple de l’apparence d’un élément d’ancrage initiateur de téléchargement:

Si lehref dans l’exemple ci-dessus pointait vers un fichier réel, une fois le téléchargement terminé, le fichier téléchargé s’appellerait Example_File.ext où .ext serait le format du fichier téléchargé. Il n’est pas nécessaire d’inclure l’extension de type de fichier dans la valeur attribuée à l’attribut download. L’extension de fichier sera automatiquement identifiée lorsque le navigateur télécharge le fichier et automatiquement ajoutée au nom du fichier téléchargé.,

liens internes et externes

Il existe deux types de ressources auxquelles nous pouvons lier en utilisant l’élémenta: interne et externe. Les liens internes sont ceux qui pointent vers d’autres pages de notre site web. Les liens externes pointent vers des pages web qui ne font pas partie de notre site web.

la création de liens internes est importante pour différentes raisons:

• Les liens internes sont utilisés pour créer des menus de navigation qui aident les visiteurs du site web à naviguer sur notre site web.
• Les liens internes sont utilisés dans le texte du contenu du site web pour aider les visiteurs du site web à localiser le contenu connexe.,
• Les liens internes sont également utilisés par les moteurs de recherche pour localiser les pages d’un site web et pour partager l’autorité (également appelée jus de lien) avec les autres pages d’un site web.

lorsque vous écrivez des liens internes, assurez-vous de ne pas en faire trop. Le jus de lien d’une page Web donnée est partagé entre les liens sur la page. Ainsi, plus vous mettez de liens sur une page, plus le jus transmis à chaque lien devient dilué. Une bonne règle de base est de ne pas avoir plus de 100 Liens par page, bien qu’il existe des exceptions dans le cas de sites Web extrêmement volumineux et complexes.,

liens Externes sont également importants pour différentes raisons:

• liens Externes peut être recommandé, nécessaire, ou tout simplement les meilleures pratiques de l’attribution à la source d’une idée ou d’une ressource.
• Les Liens externes nous permettent de diriger les visiteurs du site vers des contenus connexes utiles.
• lorsque d’autres sites Web publient des liens externes pointant vers notre site web, ces liens appelés backlinks permettent à link juice de circuler vers notre site web et d’améliorer la position de notre site web sur les pages de résultats des moteurs de recherche (SERP).,

lors de la rédaction de liens externes, essayez d’éviter les liens vers des concurrents directs. Vous ne voulez pas aider leur classement SERP pour les termes de recherche que vous ciblez pour votre propre site web. C’est également une bonne idée d’utiliser l’attribut target="_blank" lors de l’écriture de liens externes. En ouvrant des liens externes dans un nouvel onglet, vous gardez les visiteurs sur votre site plus longtemps.,

ne dites jamais « Click Here”

Vous avez sûrement vu et peut-être même créé des liens qui ressemblent à ceci:

To learn more <a href="http://example.com">click here</a>!

Il y a au moins trois bonnes raisons pour lesquelles l’utilisation de texte d’élément d’ancrage générique tel que « Click Here” est

• Les visiteurs du site web qui dépendent de technologies d’assistance telles que les lecteurs d’écran auront du mal à déchiffrer la signification des liens qui utilisent du texte de lien générique tel que « Cliquez ici”.,
• Les visiteurs du site web qui scannent une page devront prendre plusieurs secondes supplémentaires pour étudier le texte autour du lien afin d’avoir une idée de ce à quoi l’ancre renvoie.
• les robots d’exploration Web des moteurs de recherche associent le texte de l’élément d’ancrage à l’URL du lien. Un texte d’élément d’ancrage correctement sélectionné aide les moteurs de recherche à déterminer la pertinence d’une page web par rapport à des mots clés spécifiques. Le texte générique ne dit rien aux moteurs de recherche sur la page Web liée.

le texte de L’élément D’ancrage idéal est succinct et identifie un ou plusieurs mots clés pertinents pour la page web., Voici une phrase qui comprend deux exemples de texte de lien correctement sélectionné:

le premier lien indique aux robots d’exploration web et aux visiteurs du site web que le site web a quelque chose à voir avec les mots-clés « moteurs de recherche”. La seconde indique aux visiteurs et aux moteurs de recherche que la page trouvée à l’URL relative /seo/ est liée aux mots clés « tutoriel SEO”.

Absolue contre les Url Relatives

Il y avait deux liens dans notre dernier exemple: et /seo/. Le premier est un exemple d’URL absolue., Les URL absolues sont celles qui incluent une description complète (absolue) de la destination du lien. Les URL absolues incluent le protocole (http) et le nom de domaine complet et le chemin d’accès au fichier nécessaires pour atteindre l’ancre de destination.

la seconde est un exemple d’URL relative. Les URL relatives renvoient à une page web en décrivant la position de la page par rapport à la position de la page en cours. Lorsque vous écrivez des liens internes qui pointent vers d’autres pages du même site Web, nous avons la possibilité d’écrire des URL relatives plutôt que des URL absolues.,

par exemple, si nous sommes à cette adresse: , et que nous voulons créer un lien vers la page du produit Bleu, nous pouvons utiliser l’un des éléments d’ancrage suivants:

<a href="/products/blue-product/">Go check out the blue product!</a><a href="../blue-product/">Go check out the blue product!</a>

ce que dit la première syntaxe est: « recherchez dans le niveau le plus bas du répertoire de fichiers les produits du fichier, et recherchez les produits bleus dans ce fichier”. Ce que dit la deuxième syntaxe est: « recherchez dans le dossier parent du répertoire red-product un répertoire portant le nom blue-product., Ces deux éléments d’ancrage pointent vers L’URL:

disons que nous voulons créer un lien vers À propos de nous – une page qui existe en tant que descendant direct de la page d’accueil. Voici comment nous pourrions le faire:

<a href="/about-us/">Learn more about us.</a>

cette syntaxe dit « Revenez au niveau le plus bas de l’arborescence des répertoires de fichiers, puis recherchez un répertoire intitulé about-us ».

à titre d’exemple final, disons que nous sommes encore une fois à cette adresse:, et que nous voulons créer un lien vers une page de sous-catégorie qui existe dans la catégorie/red-products/.,

<a href="large.php">See all Red Products available in Large!</a>

cette URL relative indiquera au navigateur de rechercher dans le dossier actuel un fichier nommélarge.phpet se résoudra à cette URL:

To summarize, when we write relative URLs we have three options:

• When we start a relative URL with « /” we tell the browser to look for the specified file or folder in the lowest level of the file directory.
• If we start a relative URL with « ../” we tell the browser back up in the directory tree one level.
• If we start a relative URL with a file or folder name we tell the browser to look for the specified resources in the current file.

Why Are Relative URLs Used?

Relative URLs are very popular with web developers. It is common for websites to be developed on a staging server with a domain name that is not the same as the eventual permanent domain name. If relative URLs are used, when the site is transferred from the staging server to being live on the web all of the relative URLs will continue to work just fine. However, if absolute URLs are used the development team will have to go through the site fixing all of the URLs.

While the benefit of using relative URLs during the development of a site on a staging server not inconsiderable, it comes at a cost.

While you should know how relative URLs work, many experienced developers and SEO experts recommend sticking to absolute URLs as much as possible.

Other Useful Anchor Attributes

With just the three attributes we’ve covered so far, you can complete every hyperlinking task you will encounter on the web. However, there are additional attributes that can be used to tell a visitor’s web browser and search engines that index our website something about the meaning of the hyperlinks.

Specify the Language of the Anchor Destination: hreflang

This is optional tag can be used to tell a web browser the language of the document to which the anchor is linked. For example, if we were linking to a URL and wanted to tell the browser that the destination anchor was in Spanish we would use the appropriate language code in ISO 639-1 format as the value of the hreflang attribut.

spécifie la relation entre la Source et la Destination: rel

l’attribut relationship, ourel, est utilisé pour décrire la relation entre l’ancre source et l’ancre destination. Par exemple, nous pourrions utiliser le code suivant pour identifier la destination comme étant une ressource sur l’auteur du document.,

This artile was written by <a href="https://plus.google.com/+AuthorName" rel="author">Great Author</a>.

Il existe plusieurs valeurs différentes qui peuvent être utilisées pour décrire la relation entre le lien source et le lien de destination. Voici quelques-unes des plus courantes:

• rel="nofollow": Utilisez cet attribut si vous créez un lien vers une ressource à laquelle vous ne souhaitez pas prêter la réputation de votre site. Par exemple, si vous créez un lien vers un site de spam comme exemple de ce qu’il ne faut pas faire, vous voudrez utiliser cette valeur pour ne pas contribuer à la visibilité du moteur de recherche du site.,
• rel="alternate": si votre site a plusieurs versions – par exemple une traduction dans une langue différente – utilisez cette valeur pour identifier la ressource liée en tant que version alternative de la page en cours.
• rel="bookmark": cette valeur est utilisée pour identifier une formulation D’URL qui est permanente et peut être utilisée pour le bookmarking.
• rel="help": identifiez une ressource liée en tant que Fichier d’aide pour la page en cours avec cette valeur.
• rel="license": Utilisez cet attribut lors de la liaison à une licence de copyright reconnue.,
• rel="next": si le document actuel existe dans une série de documents, utilisez cette valeur lors de la liaison au document suivant de la série.
• rel="prev": si le document actuel existe dans une série de documents, utilisez cette valeur lors de la liaison au document précédent de la série.
• rel="noreferrer": si vous souhaitez créer un lien vers un site Web externe mais éviter de laisser le site Web de destination savoir qui est le référent, utilisez cette valeur.,

spécifiez le type de support Internet: type

l’attributtype est un attribut facultatif qui peut être utilisé pour identifier le type de support Internet, ou le type MIME, du document de destination. Par exemple, si vous créez un lien vers un site web rendu en HTML, vous pouvez ajouter l’attribut type="text/html" pour indiquer au navigateur d’un visiteur que le lien pointe vers un document HTML.,

à l’heure actuelle, cet attribut ne fait pas grand-chose, mais on pense qu’à l’avenir, les informations contenues dans cet attribut pourraient être utilisées pour communiquer d’une manière ou d’une autre au visiteur du site web le type de contenu auquel il est sur le point d’être lié avant de cliquer sur le lien.

la valeurtype doit être un type de support IANA valide. Certains de la plupart des valeurs couramment utilisées sont: text/html, text/css, application/javascript et multipart/form-data.,

un réseau de liens

le World Wide Web est mieux décrit comme une bibliothèque massive de documents hyperliés où les éléments d’ancrage sont utilisés pour créer des ponts entre les documents connexes. Dans cette définition, les éléments d’ancrage occupent leur place légitime en tant que colle qui relie le web et les ponts qui permettent aux internautes de passer d’un document à un document connexe.

Une façon courante d’utiliser les liens est de construire un menu de navigation qui expose la structure logique et hiérarchique d’un site web., Si vous voulez apprendre à créer des menus de navigation efficaces, lisez notre tutoriel sur ce sujet.

Jon est un écrivain freelance, amateur de voyage, de mari et de père. Il écrit sur les technologies web telles que WordPress, HTML et CSS.