Est-il correct d'utiliser target = "_ blank" dans HTML5?


165

Je me souviens avoir lu quelque part que dans HTML5, il n'était plus acceptable de l'utiliser target="_blank"en HTML5, mais je ne le trouve pas maintenant.

Est-il correct de continuer à utiliser target="_blank"?

Je sais que c'est généralement considéré comme une mauvaise idée, mais c'est le moyen le plus simple d'ouvrir une nouvelle fenêtre pour quelque chose comme un PDF, et cela ne vous oblige pas non plus à compter sur JavaScript.


5
En règle générale, si vous souhaitez ouvrir un site externe à partir de votre site, ouvrir une nouvelle fenêtre (qui est probablement un nouvel onglet sur la plupart des navigateurs de nos jours) est une meilleure idée à mon avis.
hobbes3

7
@ hobbes3, arrêtez de gâcher ma navigation et mon historique. C'est moi qui navigue, et c'est moi qui décide si un lien doit s'ouvrir dans un nouvel onglet (clic du milieu) ou dans le même (clic gauche). Quand je tombe sur un site Web qui me force à suivre sa «bonne pratique» en ouvrant chaque lien dans de nouveaux onglets, je partirai promptement et volontiers.
Albireo

9
@Albireo, c'est juste mon avis et certains services Web populaires intègrent également la même idée. Par exemple, cliquer sur un lien dans votre courrier dans Gmail ouvre une nouvelle fenêtre par défaut.
hobbes3

12
@Albireo, vous supposez que l'utilisateur est toujours aussi avancé et technophile que vous.
Mike Campbell

3
Il y a une raison pour laquelle targetet al. exister. Parfois, c'est une nécessité. Une page générée dynamiquement avec un JS avec état, par exemple, où une iframe est moins souhaitable qu'un nouvel onglet (par exemple, la visualisation d'un PDF, comme l'indique l'OP). Ou lorsqu'un site sécurisé (comme une banque) vous envoie vers un lien externe mais n'autorise pas l'utilisation du bouton de retour en raison de l'expiration du contenu. Comme toutes les choses, cet attribut HTML n'est pas une «mauvaise idée» à utiliser, mais il doit être utilisé avec réflexion et soin, comme avec chaque bibliothèque, classe, fonction et propriété dans toute la programmation.
s.co.tt

Réponses:


159

Il semble que target="_blank"tout va bien. Il est répertorié en tant que mot clé de contexte de navigation dans le dernier brouillon HTML5 .


54
target="_blank"provoquera l'ouverture d'une nouvelle fenêtre chaque fois que l'utilisateur cliquera sur le lien. À moins que ce ne soit vraiment ce que vous voulez (et c'est rarement le cas), envisagez de l'utiliser target="somethingUnique"pour que l'utilisateur n'obtienne qu'une seule fenêtre, même s'il clique sur le lien plusieurs fois. Cela fait un UX beaucoup plus agréable.
BanksySan

4
@BanksySan: Un exemple où je pense que target="_blank"c'est bien est celui des boutons de partage.
Martin Thoma

Si je lis un long article et qu'il y a une référence à des informations connexes sur un autre site (ou sur le même site). J'ai souvent envie de faire des va-et-vient entre les deux sans perdre ma place dans l'article original. target = "_ blank" est parfait pour cela. Quitter la page et devoir recharger chaque page en alternance (souvent perdre ma place dans l'une ou l'autre page), ne l'est pas. Oui, je sais que je peux faire un clic droit sur le lien et l'ouvrir dans un nouvel onglet, mais je ne veux pas car cela briserait ma concentration, et je soupçonne que la majorité des internautes ne savent pas comment.
Bob Ray

L'attribut cible présente de nombreux avantages. Je ne vais pas dire ça. Les annonceurs contextuels ont détruit son objectif, mais aujourd'hui, avec tant de services en dehors de l'expérience de navigation, beaucoup de gens ne veulent pas quitter l'article ou l'onglet actuel, mais interagissent toujours avec le PDF ou la vidéo à télécharger. L'utilisation de _blank garantit que vous laissez l'utilisateur remplir un onglet vide - ne remplacez pas le contenu actuel, si vous servez de nombreux liens sur la même session / site. Les noms uniques sont juste désordonnés dans une liste audio avec 90 chansons .... Viva la target, viva la _blank ...
Jonas Lundman

91

Il est correct d'utiliser target="_blank"; Cela a été supprimé dans XHTML car le ciblage de nouvelles fenêtres affichera toujours l'alerte contextuelle dans la plupart des navigateurs. XHTML affichera toujours une erreur avec l'attribut cible dans une validation.

HTML 5 l'a ramené parce que nous l'utilisons toujours. C'est notre ami et nous ne pouvons pas lâcher prise.

N'abandonne jamais.


Ce que vous prétendez n'est valable que pour HTML strict.
qwertzman

Pour XHTML ainsi que pour HTML.
MEMark

15

Bien que le target="_blank"soit acceptable en HTML5 , j'essaie personnellement de ne jamais l'utiliser (même pour ouvrir des PDF dans une nouvelle fenêtre).

Le HTML devrait définir le sens et le contenu . Posez-vous la question: «La signification de l' aélément changerait-elle si l' targetattribut était supprimé?» Sinon, le code ne doit pas entrer dans le HTML. (En fait, je suis surpris que le W3C l'ait gardé ... Je suppose qu'ils ne peuvent vraiment pas lâcher prise.)

Le comportement du navigateur , en particulier le comportement interactif avec l'utilisateur , doit être implémenté avec des langages de script côté client comme JavaScript. Puisque vous voulez que le navigateur se comporte d'une manière particulière, c'est-à-dire en ouvrant une nouvelle fenêtre, vous devez utiliser JS. Mais comme vous l'avez mentionné, ce comportement oblige le navigateur à s'appuyer sur JS. (Bien que si votre site se dégrade gracieusement, ou s'améliore progressivement, ou quoi que ce soit , cela devrait toujours être bon. Les utilisateurs avec JS désactivé ne manqueront pas grand-chose.)

Cela étant dit, aucune de ces réponses n'est la bonne. Il y a quelque part l'opinion selon laquelle la façon dont un lien s'ouvre devrait finalement être décidée par l'utilisateur final . Prenons cet exemple.

Vous surfez sur Wikipedia, vous vous enfoncez de plus en plus dans un terrier de lapin. Vous rencontrez un lien dans votre lecture.

Supposons que vous souhaitiez parcourir la page liée très rapidement avant de revenir. Vous pouvez l'ouvrir dans un nouvel onglet, puis le fermer lorsque vous avez terminé (car appuyer sur le bouton «retour» et attendre le rechargement de la page prend trop de temps). Ou, que se passe-t-il si cela semble intéressant et que vous souhaitez le sauvegarder pour plus tard? Peut-être devriez-vous l'ouvrir dans un nouvel onglet d'arrière-plan et continuer à lire la page actuelle. Ou, peut-être que vous décidez que vous avez terminé de lire cette page, alors vous suivrez simplement le lien dans l'onglet actuel.

Le fait est que vous disposez de votre propre flux de travail et que vous souhaitez que votre navigateur se comporte en conséquence. Vous pourriez être assez frustré s'il prenait ce genre de décisions à votre place.

Cela étant dit, les développeurs Web devraient indiquer clairement où vont leurs liens, quels types et / ou formats de sources ils référencent et ce qu'ils font. Les info-bulles peuvent être votre ami (sauf si vous utilisez une tablette ou un téléphone; dans ce cas, spécifiez-les sur le site mobile). Nous savons tous à quel point il est nul d'être emmené dans un endroit auquel nous ne nous attendions pas ou de faire quelque chose que nous ne voulions pas.


Et si quelqu'un était assez intelligent pour concevoir un widget utilisateur qui permettait d'exercer très facilement son droit de contrôle donné par Dieu avec chaque lien (facilement, comme inconsciemment), alors il devrait être ajouté aux navigateurs et toutes les balises <a> pourraient le fournir.
Mark Goldfain

Cette réponse est à mon avis la plus précise du point de vue logique et architectural. Dans un monde idéal, les auteurs devraient se préoccuper davantage de l'identification sémantique appropriée des morceaux, et moins de la prédétermination du comportement des morceaux. Dans l'univers émergent du contenu adaptatif, les comportements des fenêtres peuvent dépendre du thème réactif ou de la préférence de l'utilisateur en vigueur au moment de la demande; la "chose" sémantique sortante n'est modifiée que si nécessaire par transformation (DOM ou regex, serveur ou navigateur). De cette manière, les comportements de fenêtre PEUVENT être du ressort de l'utilisateur plutôt que d'un auteur dans un CMS.
Don Day

12

c'est par le moyen le plus simple d'ouvrir une nouvelle fenêtre pour quelque chose comme un PDF

C'est aussi le moyen le plus simple d'ennuyer les utilisateurs non Windows. Le PDF s'ouvre très bien dans les navigateurs sur d'autres plates-formes. L'ouverture d'une nouvelle fenêtre perturbe également l'historique de navigation et complique les choses sur les petites plates-formes comme les smartphones.

N'ouvrez PAS de nouvelles fenêtres pour des éléments comme PDF simplement parce que les anciennes versions de Windows étaient cassées.


11
Vous savez ce qui aide lorsque vous dites aux gens de ne pas utiliser quelque chose? En leur montrant ce qu'ils doivent utiliser, l'attribut de téléchargement HTML5: <a download="[nom du fichier ici[/href="file.ext"> etc </a>) .
John

5

La plupart des développeurs Web utilisent target="_blank"uniquement pour ouvrir des liens dans un nouvel onglet. Si vous utilisez target="_blank"uniquement pour ouvrir des liens dans un nouvel onglet, il est vulnérable à un attaquant. Lorsque vous ouvrez un lien dans un nouvel onglet ( target="_blank"), la page qui s'ouvre dans un nouvel onglet peut accéder à l'onglet initial et modifier son emplacement à l'aide de la window.openerpropriété.

Code Javascript:

window.opener.location.replace(malicious URL)

La prévention:

rel="nofollow noopener noreferrer"

Je ne suis pas sûr que nofollow soit lié à la sécurité - c'est pour les robots des moteurs de recherche.
Darryl Hein

4

Bien que la cible soit toujours acceptable en HTML5, elle n'est pas préférée. Pour créer un lien vers un fichier PDF, utilisez l' attribut de téléchargement au lieu de l'attribut cible.

Voici un exemple:

<a href="files/invoice.pdf" download>Invoice</a>

Si le nom de fichier d'origine est codé pour un stockage de fichier unique, vous pouvez spécifier un nom de téléchargement convivial en attribuant une valeur à l'attribut de téléchargement:

<a href="files/j24oHPqJiUR2ftK0oeNH.pdf" download="invoice.pdf">Invoice</a>

Gardez à l'esprit que si la plupart des navigateurs modernes prennent en charge cette fonctionnalité, certains ne le peuvent pas. Voir caniuse.com pour plus d'informations.



0

Vous pouvez le faire de la manière suivante avec jquery, cela l'ouvrira dans une nouvelle fenêtre:

<input type="button" id="idboton" value="google" name="boton" /> 

<script type="text/javascript">
    $('#idboton').click(function(){
        window.open('https://www.google.com.co');
    });

</script>

Pourquoi ne pas ajouter un formulaire autour du bouton avec target = "_ blank". Il semble que ce serait plus facile et supprimerait le besoin de JS.
Darryl Hein

-1

Je pense que l'attribut cible est obsolète pour l' <link>élément, non <a>, c'est probablement pourquoi vous avez entendu dire qu'il n'est plus censé être utilisé.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.