La valeur target="_blank" dans HTML est utilisée pour spécifier que le lien doit s’ouvrir dans une nouvelle fenêtre ou un nouvel onglet du navigateur lorsque l’utilisateur clique dessus. Cette fonctionnalité permet de garder la page actuelle ouverte tout en naviguant vers une autre page. Cela offre une expérience utilisateur plus fluide et évite que les utilisateurs quittent complètement votre site web.

On peut procécer de plusieurs manières

Pour utiliser target="_blank", il suffit d’ajouter cet attribut à la balise <a> utilisée pour créer le lien. Voici un exemple de code HTML :

Articles relatifs :



<a href="https://www.example.com" target="_blank">Cliquez ici</a>

Dans cet exemple, le lien « Cliquez ici » ouvrira la page « https://www.example.com » dans une nouvelle fenêtre ou un nouvel onglet.

Notons quelques raisons

L’utilisation de target="_blank" dans HTML présente plusieurs avantages :

  • Meilleure expérience utilisateur : Les utilisateurs peuvent continuer à naviguer sur votre site web tout en consultant d’autres pages.

  • Facilité de navigation : Les utilisateurs peuvent rapidement revenir à votre site web en fermant simplement la nouvelle fenêtre ou l’onglet.

  • Contrôle de la navigation : Vous pouvez diriger vos utilisateurs vers des ressources externes tout en maintenant votre site web ouvert, ce qui peut être très utile pour les liens vers des documents à télécharger par exemple.

Bon à savoir:

L’utilisation de target="_blank" peut être appropriée dans différentes situations :

  • Lorsque vous souhaitez inclure des liens vers des ressources externes sans interrompre l’expérience de navigation sur votre site web.

  • Lorsque vous voulez permettre aux utilisateurs d’accéder à des documents ou des pages qui ne font pas partie de votre site web principal.

  • Lorsque vous voulez contrôler comment les utilisateurs interagissent avec les liens sortants.

Bon à savoir:

La valeur target="_blank" peut être utilisée dans n’importe quelle balise <a> du code HTML qui crée un lien.

Exemple :

Supposons que vous ayez un site web avec un article contenant un lien vers un document PDF externe. Vous pouvez utiliser target="_blank" pour que le lien s’ouvre dans une nouvelle fenêtre ou un nouvel onglet :



<a href="https://www.example.com/documents/document.pdf" target="_blank">Télécharger le document PDF</a>

Lorsque les utilisateurs cliqueront sur le lien « Télécharger le document PDF », le PDF s’ouvrira dans une nouvelle fenêtre ou un nouvel onglet sans interrompre leur navigation sur votre site web.

Autres questions similaires :

1. Quels sont les autres valeurs possibles pour l’attribut « target » en HTML

L’attribut target en HTML peut accepter différentes valeurs :

  • _self : Le lien s’ouvre dans la même fenêtre ou le même onglet (valeur par défaut).

  • _parent : Le lien s’ouvre dans la fenêtre parent (utile lorsque vous travaillez avec des cadres).

  • _top : Le lien s’ouvre dans la fenêtre la plus haute et remplace toute la structure des cadres actuels.

  • Un nom de fenêtre personnalisé : Vous pouvez spécifier le nom d’une fenêtre spécifique pour ouvrir le lien.

Par exemple :



<a href="https://www.example.com" target="_parent">Cliquez ici</a>

2. Est-il possible de spécifier la taille de la nouvelle fenêtre ou de l’onglet avec target= »_blank »

Non, l’utilisation de target="_blank" ne permet pas de spécifier la taille de la nouvelle fenêtre ou de l’onglet. La taille est généralement déterminée par les paramètres du navigateur web.

3. Comment puis-je m’assurer que le lien ouvrira dans une nouvelle fenêtre/onglet même si les paramètres du navigateur sont configurés autrement

Il n’y a pas de méthode standard pour forcer l’ouverture d’un lien dans une nouvelle fenêtre/onglet, même si les paramètres du navigateur sont configurés différemment. Cela dépend entièrement des préférences de l’utilisateur. Cependant, vous pouvez inclure une note à côté du lien indiquant aux utilisateurs de faire un clic droit et de choisir « Ouvrir dans une nouvelle fenêtre » ou « Ouvrir dans un nouvel onglet » pour ouvrir le lien dans une nouvelle fenêtre ou un nouvel onglet.

4. Comment puis-je styliser les liens qui s’ouvrent dans une nouvelle fenêtre/onglet

Vous pouvez styliser les liens qui s’ouvrent dans une nouvelle fenêtre/onglet en utilisant du CSS pour cibler la pseudo-classe :target. Par exemple :



a[target="_blank"]:after {

  content: " " url(target-icon.png);

}

Dans cet exemple, un icône « target-icon.png » sera ajouté après les liens qui utilisent target="_blank".

5. L’attribut target est-il conforme aux normes HTML

Oui, l’attribut target est conforme aux normes HTML et est pris en charge par tous les navigateurs modernes. Il est défini dans la spécification HTML5.

6. Comment puis-je vérifier si un lien s’ouvrira dans une nouvelle fenêtre/onglet à partir du code JavaScript

Vous pouvez vérifier la valeur de l’attribut target d’un élément <a> pour déterminer si le lien s’ouvrira dans une nouvelle fenêtre/onglet :



var linkElement = document.querySelector('a');

if (linkElement.target === '_blank') {

  console.log('Ce lien s'ouvrira dans une nouvelle fenêtre/onglet.');

} else {

  console.log('Ce lien s'ouvrira dans la même fenêtre/onglet.');

}

7. Est-il possible de sécuriser l’ouverture de liens externes dans une nouvelle fenêtre/onglet

Oui, vous pouvez ajouter une fonctionnalité de sécurité supplémentaire en utilisant un script JavaScript pour intercepter les clics sur les liens sortants et vérifier si le domaine de destination est approuvé avant de permettre l’ouverture du lien. Cela peut aider à prévenir les attaques de phishing et à améliorer la sécurité de vos utilisateurs.

8. Existe-t-il des alternatives à target= »_blank » pour ouvrir des liens dans une nouvelle fenêtre/onglet

Oui, il existe d’autres méthodes pour ouvrir des liens dans une nouvelle fenêtre/onglet, telles que l’utilisation de JavaScript pour manipuler le comportement du lien. Cependant, target="_blank" est la méthode la plus simple et la plus couramment utilisée, car elle ne nécessite pas de script supplémentaire.

Sources web consultées :

  1. The Anchor element – HTML: HyperText Markup Language External links and linking to non-HTML resources

  2. How To Use The To Make Links & Open Them Where

Date de consultation des sources : 2023-09-05