Créer un lien hypertexte en HTML ou en JavaScript

Créer un lien hypertexte en HTML

Un lien HTML est un élément utilisé pour créer une référence hypertexte vers un autre document, une ressource ou une partie d'un document.

Les liens HTML sont généralement créés à l'aide de l'élément <a>; voici un exemple simple d'un lien HTML :

<a href="https://www.1formatik.com">Cliquez ici pour aller sur 1FORMATIK.com</a>

Dans cet exemple l'attribut href est utilisé pour spécifier l'adresse absolue du site internet vers laquelle le lien doit pointer : il s'agit de l'adresse complète, elle contient le protocole http:// ou https://, suivi du nom de domaine.

L'attribut href peut également être utilisé pour spécifier une adresse relative par rapport à l'emplacement du fichier HTML.

Dans l'exemple ci-dessous le lien pointe vers une page nommée page2.html qui se trouve dans un répertoire nommé test.

<a href="test/page2.html">Aller à la page 2</a>

Une autre possibilité est de créer un lien ancre, c'est à dire un lien hypertexte qui pointe vers une partie spécifique de la même page. Pour cela on utilise un identifiant unique (une ancre) au sein du document HTML vers lequel le lien pointe.

<p id="partie1">Titre 1</p>
<p>Ceci est le contenu de la partie 1.</p>
<a href="#partie1">Aller à la partie 1</a>

Dans cet exemple on crée un lien qui, lorsqu'il est cliqué, fait défiler la page jusqu'à la section avec l'identifiant partie1.

Lorsque le lien est cliqué, le navigateur fait défiler la page vers la section correspondante. C'est une méthode pratique pour créer une navigation interne qui permet aux utilisateurs d'accéder rapidement à des parties spécifiques du contenu.

Il est par ailleurs possible de créer un lien vers une partie spécifique d'une autre page :

<a href="test/page2.html#partie1">Aller à la partie 1 de la page 2</a>

Donner un titre au lien

Pour donner un titre à lien HTML on utilise l'attribut title. L'attribut title est un attribut HTML utilisé pour fournir des informations supplémentaires sous la forme d'une info-bulle qui apparaît lorsque l'utilisateur survole le lien avec la souris.

Voici comment l'attribut title est utilisé avec un lien HTML :

<a href="https://www.1formatik.com" title="Visitez 1FORMATIK.com">1FORMATIK.com</a>

Lorsqu'un utilisateur survole le lien avec la souris, une info-bulle apparaîtra avec le texte "Visitez 1FORMATIK.com". L'attribut title est utilisé pour fournir des informations contextuelles ou des détails supplémentaires sur le lien ; il améiore ainsi l'expérience utilisateur en fournissant des indications sur le but ou le contenu du lien.

L'attribut title est par ailleurs utile pour le référencement. Bien que les moteurs de recherche utilisent principalement le contenu de la page, l'attribut title peut avoir un impact sur le référencement de la page car il peut influencer le taux de clics des utilisateurs.

Définir où doit s'ouvrir le lien

On peut spécifier où doit s'ouvrir la cible du lien. Pour cela on utilise l'attribut target. Voici les deux principales valeurs de l'attribut target :

• La valeur _blank indique au navigateur d'ouvrir la cible du lien dans une nouvelle fenêtre ou un nouvel onglet.

<a href="https://www.1formatik.com" target="_blank">Ouvrir dans une nouvelle fenêtre</a>

• La valeur _self indique au navigateur d'ouvrir la cible du lien dans la même fenêtre ou le même onglet ; C'est la valeur par défaut si aucune autre n'est spécifiée.

<a href="https://www.1formatik.com" target="_self">Ouvrir dans la même fenêtre</a>

Spécifier aux moteurs de recherche s'ils doivent suivre le lien

Lorsque vous créez un lien hypertexte en HTML, vous pouvez demander aux moteurs de recherches de suivre ou de ne pas suivre votre lien.

Pour cela on utilise l'attribut rel avec la valeur nofollow pour indiquer aux moteurs de recherche de ne pas suivre le lien, ou bien avec la valeur dofollow pour q'ils suivent le lien ; dofollow est la valeur par défaut si aucune valeur n'est spécifiée.

<a href="https://www.1formatik.com" rel="nofollow">Lien avec attribut nofollow</a>

Définir si la cible du lien doit être téléchargée

Lorsque vous créez un lien vers un fichier ou un document qui doit être téléchargé, vous pouvez utiliser l'attribut download.

Cet attribut est utilisé pour indiquer au navigateur que le lien pointe vers un fichier téléchargeable.

Voici comment utiliser l'attribut download dans un lien HTML :

<a href="fichier.zip" download>Télécharger le fichier ZIP</a>

Dans cet exemple le lien pointe vers un fichier ZIP nommé fichier.zip, et l'attribut download indique au navigateur qu'il doit télécharger le fichier plutôt que d'essayer d'ouvrir le fichier dans le navigateur.

Il est également possible de spécifier un nom de fichier différent pour le téléchargement en utilisant la valeur de l'attribut download.

<a href="fichier.zip" download="nouveau_nom.zip">Télécharger avec le nouveau nom</a>

Spécifier pour quel type de média le lien est destiné

Lorsque vous créez un lien HTML qui mène vers un média particulier, vous pouvez spécifier le type du média et son cadre d'utilisation avec l'attribut media.

Dans l'exemple ci-dessous le lien pointe vers une image nommée image.jpg, et l'attribut media indique que cette image est destinée à être affichée à l'écran via la valeur screen et dans le cadre de son impression via la valeur print.

<a href="image.jpg" media="screen, print">Lien vers une image à imprimer</a>

Protéger un lien contre les attaques par fenêtres contextuelles

L'une des attaques classiques exploitant les fenêtres contextuelles est l'attaque par tabnabbing. Cette attaque vise à tromper l'utilisateur en modifiant le contenu d'un onglet ouvert en arrière-plan après que l'utilisateur ait ouvert un lien vers un autre site. L'objectif est de faire en sorte que lorsque l'utilisateur revient à l'onglet initial, il saisisse des informations sensibles comme son nom d'utilisateur et son mot de passe, pensant toujours être sur le site d'origine.

Pour cela les sites malveillants utilisent JavaScript et la propriété opener et l'interface Window qui permettent de renvoier une référence à la fenêtre ayant ouvert la fenêtre courante.

setTimeout(function() 
{
   window.opener.location.href = "https://www.faux-1formatik.com";
}, 5000);

Pour protéger vos liens qui mènent vers une un site externe que vous ouvrez dans une nouvelle fenêtre avec target="_blank", vous devez utiliser l'attribut rel="noopener" ou rel="noreferrer". Cela a pour effet de limiter l'accès du script de la nouvelle fenêtre au contexte de la page d'origine.

Simuler un lien hypertexte en JavaScript

Si vous souhaitez créer un comportement de lien sans utiliser la balise HTML <a>, vous pouvez utiliser JavaScript.

Voici un exemple qui simule le comportement d'un lien en utilisant JavaScript :

<p>Un lien HTML en JavaScript vers <span id="lien" style="cursor:pointer">1FORMATIK.com</span></p>
<script>
document.getElementById('lien').addEventListener('click', function() 
{
   window.location.href = 'https://www.1formatik.com';
});
</script>

Dans cet exemple un gestionnaire d'événements est ajouté pour détecter le clic sur le contenu de la balise span et la méthode window.location.href permet d'effectuer le lien.

Détecter les URL et créer des liens avec JavaScript

Si vous avez un texte qui contient des adresses Web, vous pouvez avec JavaScript détecter ces URL et y ajouter automatiquement des liens hypertextes.

Voici un exemple :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemple de Page avec des URL</title>
</head>
<body>
<h1>Texte avec des URL</h1>
<p>Ceci est un exemple de texte avec des URL. Visitez ces liens :</p>
<ul>
  <li>Site Web : https://www.example.com</li>
  <li>Page de produit : https://www.example.com/produits/produit1</li>
  <li>Blog : https://www.example.com/blog/post123?id=22&categorie=125</li>
</ul>
<p>N'oubliez pas de cliquer sur les liens ci-dessus.</p>
</body>
<script>
function genererLiens(texte) 
{
  if(!texte) return;
  var urlRegex = /(((https?:\/\/)|(www\.))[^\s<]+)/g;
  return texte.replace(urlRegex, function (url) 
  {
     var hyperlien = url;
     if (!hyperlien.match('^https?:\/\/')) 
     {
        hyperlien = 'http://' + hyperlink;
     }
     url = url.replace(/<\/?[^>]+(>|$)/g, '');
     return '<a href="' + hyperlien + '" target="_blank" rel="noopener noreferrer">' + url + '</a>'
  });
}
document.body.innerHTML = genererLiens(document.body.innerHTML);
</script>
</html>

Cette fonction JavaScript genererLiens utilise des expressions régulières pour remplacer les occurrences d'URL du texte par des liens hypertextes ; elles utilisent les attributs target="_blank" et rel="noopener noreferrer"> comme explicité ci-avant.