Comment ouvrir un lien dans un nouvel onglet : comment et quand utiliser l’attribut HTML target= »_blank »

L’ouverture d’un lien dans un nouvel onglet est une fonction essentielle permettant de garder les visiteurs sur une page web tout en leur permettant de consulter parallèlement d’autres pages sans que la page d’origine soit fermée. En HTML, cela se fait avec l’attribut target= »_blank ». Comment utiliser concrètement cette fonctionnalité ? Nous y répondons dans cet article.

Comment créer un lien qui s’ouvre dans un nouvel onglet avec target_blank ?

En langage HTML, target= »_blank » se place dans la balise <a></a> des liens hypertextes que l’on souhaite ouvrir dans un nouvel onglet. Pour l’utiliser sur un lien précis de votre page web, il vous suffit d’insérer l’attribut target= »_blank » comme dans l’exemple suivant :

<a href= »https://page.com » target= »_blank »>visiter cette page</a>

À noter qu’à chaque fois que vous paramétrerez un ou plusieurs liens de votre page web avec target= »_blank », chacun d’eux s’ouvrira systématiquement dans un nouvel onglet lorsqu’un utilisateur clique dessus.

Ouvrir un lien dans un nouvel onglet : pourquoi et quand utiliser target_blank ?

L’ouverture d’un lien dans un nouvel onglet avec target= »_blank » en HTML a pour principal objectif de garder les internautes sur votre site. Il est à utiliser sur les liens externes, c’est-à-dire les liens que vous faites vers d’autres sites. Il n’est pas utile de l’utiliser sur les liens internes vers d’autres pages de votre site. Cet attribut permet, en effet, aux visiteurs de continuer à naviguer sur votre site tout en explorant le contenu du lien externe.

Par exemple, si vous proposez un article sur comment choisir un hébergeur web, vous pouvez insérer un lien vers les différents hébergeurs, mais il est préférable que ceux-ci s’ouvrent dans un nouvel onglet, permettant ainsi au lecteur de garder l’onglet de votre page web ouverte, tout en visitant le site de l’hébergeur en parallèle.

Plusieurs autres cas spécifiques peuvent justifier l’utilisation d’un lien qui s’ouvre dans un nouvel onglet.

Si par exemple l’utilisateur est en train de lire un contenu multimédia (vidéo, podcast, musique, etc.), le changement de page peut entraîner un arrêt de la lecture. Dans ce contexte, l’usage de l’attribut target avec la valeur _blank peut aider à maintenir la lecture en cours, tout en permettant à l’utilisateur de découvrir la page de destination du lien.

D’un autre côté, lorsqu’un utilisateur de votre site remplit une page de formulaire ou qu’il y effectue un travail précis (création de visuels, création de CV, etc.), il pourrait perdre son travail ou ses données en cliquant sur un lien qui ouvre une autre page.

Les paiements en ligne sont aussi un cas évident où les liens s’ouvrant dans un nouvel onglet trouvent toute leur utilité. Si le client est en train de faire un paiement sur votre site e-commerce, il est essentiel que tous les liens après les champs de saisie du numéro de carte bancaires, date d’expiration et code de contrôle ouvrent dans un nouvel onglet sinon toutes les données saisie vont être perdues. Ainsi les liens vers les conditions générales de vente, la politique de confidentialité, les options de livraisons doivent tous avoir l’attribut target= »_blank ».

Problème de sécurité de target= »_blank » avec les anciens navigateurs

Dans le passé (avant les années 2020), ouvrir un lien dans un nouvel onglet avec target= »_blank » comportait des risques de sécurité. Tout d’abord, sachez que les différents navigateurs ont dorénavant corrigé cette faille de sécurité. D’où la nécessité de bien faire toutes les mises à jour du navigateur que vous utilisez ou de le paramétrer pour que les mises à jour se fassent de façon automatique.

Cette faille concernait les sites sur lesquels les internautes avaient la possibilité d’insérer du texte et des liens (comme les forums ou les commentaires de blogs) et pouvaient utiliser l’attribut target= »_blank ».

En effet, la page du lien ouverte dans un nouvel onglet avait accès à la propriété JavaScript windows.opener.location de la page d’origine, c’est-à-dire de la page de votre site. Un script sur la page de destination du lien pouvait changer l’URL de la page d’origine en changeant la valeur de windows.opener.location.

Cela se passait sans que l’on s’en rende compte et l’objectif du hacker était de rediriger l’internaute vers un clone de votre site. Ainsi, en revenant à l’onglet de la page d’origine, l’internaute pensait être sur votre site mais se trouvait en fait sur le site du hacker. Et si c’était un site e-commerce, l’internaute pouvait vouloir acheter quelque chose et saisir son numéro de CB, sa date d’expiration et son code de contrôle. Et toutes ces informations étaient alors récupérées par le hacker. C’est ce qu’on appelle l’hameçonnage (ou phishing en anglais).

Pour contrer cela, il était recommandé d’utiliser des attributs additionnels de sécurité, comme rel= »noopener » qui interdit tout changement d’URL sur votre page. On pouvait aussi utiliser l’attribut rel= »noreferrer » qui a le même effet, mais qui, en plus, empêche le navigateur de transmettre l’information de votre page à la page cible, préservant ainsi la confidentialité de l’origine du trafic.

Pour une sécurité renforcée, ces deux attributs pouvaient être utilisés simultanément, comme suit :

<ahref=« https://page.com »target=« _blank »rel=« noopener noreferrer »>visiter cette page</a>

Cette faille de sécurité a été corrigée directement dans les navigateurs qui maintenant ouvrent une page dans un nouvel onglet ou une nouvelle fenêtre en appliquant rel= »noopener » et donc en empêchant toute modification sur la page d’origine.