Docs HTML exécutables : Lien nouvel onglet

Q: Comment ouvrir un lien dans un nouvel onglet en HTML ?

Ajoutez target="blank" à la balise : Example . Le navigateur ouvre la page dans un nouvel onglet et garde la page actuelle ouverte.

Q: Quelle est la différence entre noopener et noreferrer ?

noopener coupe le lien entre les deux onglets (window.opener vaut null dans le nouveau). noreferrer fait la même chose et empêche aussi le navigateur d'envoyer l'URL de votre page comme référent, si bien que les statistiques de l'autre site voient la visite comme directe.

Q: Le HTML peut-il forcer l'ouverture d'un lien dans une nouvelle fenêtre plutôt qu'un onglet ?

Non. target="_blank" demande un nouveau contexte de navigation, et c'est le navigateur et les réglages de l'utilisateur qui décident s'il s'agit d'un onglet ou d'une fenêtre. Les navigateurs actuels ouvrent un onglet.

Q: Comment ouvrir tous les liens d'une page dans un nouvel onglet ?

Mettez dans le . Chaque lien sans target propre s'ouvre alors dans un nouvel onglet. Cela touche aussi les formulaires, donc ne l'utilisez que sur des pages où c'est vraiment ce que vous voulez.

Ouvrir un lien dans un nouvel onglet avec target="_blank"

Ajoutez target="_blank" au lien. Le navigateur ouvre la destination dans un nouvel onglet et laisse votre page là où elle était.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>New tab</title>
</head>
<body>
  <p>
    <a href="https://developer.mozilla.org/" target="_blank" rel="noopener">
      MDN web docs
    </a>
    opens in a new tab.
  </p>
</body>
</html>

C'est toute la technique : target="_blank" sur le <a>, plus rel="noopener", expliqué ci-dessous. Les lecteurs peuvent aussi ouvrir eux-mêmes n'importe quel lien dans un nouvel onglet avec Ctrl+clic (Cmd+clic sur Mac) ou un clic molette, donc n'utilisez target="_blank" que lorsque quitter la page leur coûterait quelque chose, comme un formulaire à moitié rempli ou une vidéo en cours de lecture.

Les aperçus de cette page ouvrent chaque lien externe dans un nouvel onglet, avec ou sans target, car un cadre d'exemple ne doit jamais changer de page. Pour voir la différence qu'apporte target, enregistrez l'exemple dans un fichier et ouvrez-le dans votre navigateur.

rel="noopener" et rel="noreferrer"

Une page ouverte avec target="_blank" recevait autrefois une référence vers votre page dans window.opener, et pouvait s'en servir pour envoyer votre onglet vers une autre URL (par exemple une fausse page de connexion). rel="noopener" supprime cette référence.

Valeur de `rel`	`window.opener` dans le nouvel onglet	Référent envoyé au nouveau site
aucune (anciens navigateurs)	Votre page	Oui
aucune (navigateurs actuels)	`null`	Oui
`noopener`	`null`	Oui
`noreferrer`	`null`	Non
`opener`	Votre page	Oui

Les versions actuelles de Chrome, Firefox et Safari traitent chaque lien target="_blank" comme noopener, sauf si vous écrivez rel="opener". Écrire quand même rel="noopener" protège les visiteurs sur les anciens navigateurs et rend l'intention visible dans le code.

noreferrer empêche aussi le navigateur d'envoyer le référent, donc le site vers lequel vous pointez ne voit pas de quelle page vient le visiteur. C'est un choix de confidentialité, pas de sécurité : utilisez-le quand votre URL doit rester privée, et omettez-le pour les partenaires qui ont besoin de voir votre trafic.

<!-- Safe, the other site still sees the referral -->
<a href="https://example.com" target="_blank" rel="noopener">Example</a>

<!-- Safe, and the other site does not see where the visit came from -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Example</a>

rel accepte plusieurs valeurs séparées par des espaces, donc noopener se combine avec les valeurs SEO : rel="noopener sponsored" pour un lien payant, rel="noopener nofollow" pour un lien dont vous ne vous portez pas garant.

Signaler que le lien ouvre un nouvel onglet

Un nouvel onglet qui s'ouvre sans prévenir est déroutant, surtout pour les utilisateurs de lecteurs d'écran, qui peuvent ne pas remarquer que la page a changé. Dites-le dans le lien. Une petite icône le montre aux utilisateurs voyants ; un texte masqué le dit aux utilisateurs de lecteurs d'écran :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>New tab hint</title>
  <style>
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    a[target="_blank"]::after {
      content: " \2197";
      font-size: 0.85em;
    }
  </style>
</head>
<body>
  <p>
    Read the
    <a href="https://www.w3.org/WAI/" target="_blank" rel="noopener">
      accessibility guidelines<span class="visually-hidden"> (opens in a new tab)</span></a>
    before you start.
  </p>
</body>
</html>

Le sélecteur a[target="_blank"] ajoute automatiquement la flèche à chaque lien qui ouvre un nouvel onglet, pour ne jamais en oublier. Le span masqué est lu comme une partie du nom du lien, « accessibility guidelines (opens in a new tab) », mais ne prend aucune place à l'écran.

Marquer automatiquement chaque lien externe

Les sélecteurs d'attribut peuvent styliser les liens selon leur href. Ici, chaque lien qui commence par http reçoit la flèche, et les liens internes au site non :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>External links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    a[href^="http"]::after {
      content: " \2197";
      color: #2563eb;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="/pricing">Pricing</a> (same site)</li>
    <li><a href="/docs">Docs</a> (same site)</li>
    <li><a href="https://github.com/" target="_blank" rel="noopener">GitHub</a></li>
    <li><a href="https://www.w3.org/" target="_blank" rel="noopener">W3C</a></li>
  </ul>
</body>
</html>

^= signifie « commence par ». Le sélecteur ne fait que styliser les liens : les attributs target et rel doivent quand même figurer dans le HTML.

Les valeurs de target

target indique où le lien s'ouvre. Il y a quatre mots-clés, et toute autre valeur est un nom :

`target`	Ouvre le lien dans
`_self`	Le même onglet ou cadre. C'est la valeur par défaut.
`_blank`	Un nouvel onglet sans nom
`_parent`	Le parent du cadre actuel (comme `_self` hors des cadres)
`_top`	L'onglet entier, en sortant de tous les cadres
n'importe quel nom, p. ex. `help`	L'onglet ou le cadre qui porte ce nom, créé s'il n'existe pas

Une cible nommée est réutilisée. Chaque lien avec target="help" s'ouvre dans le même onglet, donc un lecteur qui clique sur cinq liens d'aide obtient un seul onglet, pas cinq. _top est celle à utiliser dans une <iframe> quand un lien doit remplacer toute la page plutôt que le cadre.

Ouvrir tous les liens dans un nouvel onglet avec l'élément base

<base target="_blank"> dans le <head> fixe la cible par défaut de chaque lien et formulaire de la page :

<head>
  <base target="_blank">
</head>
<body>
  <a href="https://example.com">Opens in a new tab</a>
  <a href="/about" target="_self">Opens in this tab</a>
</body>

Le target propre d'un lien l'emporte sur <base>. Utilisez-le rarement : une page où chaque lien ouvre un nouvel onglet est pénible à utiliser.

Ouvrir un nouvel onglet en JavaScript

window.open(url, '_blank') ouvre un onglet depuis un script. Passez 'noopener' comme troisième argument pour la même protection que l'attribut rel. Dans ce cas, window.open renvoie null au lieu d'une référence au nouvel onglet :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>window.open</title>
</head>
<body>
  <button type="button" id="open">Open example.com</button>
  <p id="out"></p>

  <script>
    document.querySelector('#open').addEventListener('click', () => {
      const win = window.open('https://example.com/', '_blank', 'noopener');
      document.querySelector('#out').textContent = 'window.open returned: ' + win;
    });
  </script>
</body>
</html>

Les navigateurs bloquent window.open sauf s'il s'exécute en réponse à un clic ou à une touche, alors appelez-le depuis un écouteur d'événement, pas au chargement de la page ni après un minuteur. Si la destination est une URL que le lecteur pourrait voir à l'avance, un lien avec target="_blank" est plus simple et marche sans JavaScript. Le lien lui-même est présenté dans lien HTML.

Erreurs fréquentes

target="blank" sans le tiret bas. C'est un nom, pas le mot-clé. Il ouvre bien un nouvel onglet la première fois, puis réutilise cet onglet pour chaque autre lien portant le même nom.
target="_new". Lui aussi n'est qu'un nom, avec le même effet : un seul onglet réutilisé.
Mettre target sur tous les liens. Les liens internes doivent s'ouvrir dans le même onglet. Les lecteurs qui veulent un nouvel onglet savent comment l'obtenir.
Aucune indication qu'un lien ouvre un nouvel onglet. Ajoutez une icône et un texte masqué.
Ajouter noreferrer aux liens de partenaires ou d'affiliation, puis se demander pourquoi le partenaire ne voit aucune visite venant de vous.

Questions fréquentes

Comment ouvrir un lien dans un nouvel onglet en HTML ?

Ajoutez target="_blank" à la balise <a> : <a href="https://example.com" target="_blank" rel="noopener">Example</a>. Le navigateur ouvre la page dans un nouvel onglet et garde la page actuelle ouverte.

Faut-il encore rel="noopener" avec target="_blank" ?

Les versions actuelles de Chrome, Firefox et Safari appliquent automatiquement noopener aux liens target="_blank", donc la nouvelle page ne peut pas revenir vers la vôtre via window.opener. Écrire rel="noopener" ne coûte rien et protège les visiteurs sur les anciens navigateurs, c'est pourquoi la plupart des guides de style le demandent encore.

Quelle est la différence entre noopener et noreferrer ?

noopener coupe le lien entre les deux onglets (window.opener vaut null dans le nouveau). noreferrer fait la même chose et empêche aussi le navigateur d'envoyer l'URL de votre page comme référent, si bien que les statistiques de l'autre site voient la visite comme directe.

Le HTML peut-il forcer l'ouverture d'un lien dans une nouvelle fenêtre plutôt qu'un onglet ?

Non. target="_blank" demande un nouveau contexte de navigation, et c'est le navigateur et les réglages de l'utilisateur qui décident s'il s'agit d'un onglet ou d'une fenêtre. Les navigateurs actuels ouvrent un onglet.

Comment ouvrir tous les liens d'une page dans un nouvel onglet ?

Mettez <base target="_blank"> dans le <head>. Chaque lien sans target propre s'ouvre alors dans un nouvel onglet. Cela touche aussi les formulaires, donc ne l'utilisez que sur des pages où c'est vraiment ce que vous voulez.

Concepts liés