0Pricing
HTML Academy · Leçon

Ouvrir des liens dans de nouveaux onglets et attribut download

Utilisez les attributs target et download pour contrôler le comportement des liens.

Ouvrir des liens dans de nouveaux onglets et attribut download est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

Ouvrir dans un nouvel onglet

L’attribut target contrôle l’emplacement où s’ouvre le document lié :

<a href="https://example.com" target="_blank">Open in new tab</a>

<!-- target values:
  _blank  → new tab (or window)
  _self   → same tab (default)
  _parent → parent frame
  _top    → full window (exits frames)
-->

Le risque de sécurité de _blank

target="_blank" utilisé sans précaution crée une faille de sécurité :

  • La nouvelle page peut accéder à la page qui l’a ouverte via window.opener
  • Une page malveillante pourrait rediriger l’onglet d’origine
  • Cette attaque est appelée détournement inversé d’onglet

rel=noopener noreferrer

Ajoutez toujours rel="noopener noreferrer" lorsque vous utilisez target="_blank" :

<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer">
  Open Safely
</a>
<!-- noopener: prevents access to window.opener -->
<!-- noreferrer: also hides referrer header + implies noopener -->
<!-- Modern browsers add noopener by default, but always include it -->

Quand ouvrir de nouveaux onglets

Recommandations d’expérience utilisateur pour target="_blank" :

  • Utilisez-le pour les sites externes lorsque les utilisateurs ne s’attendent pas à quitter votre application
  • Utilisez-le pour les documents de référence (PDF, guides)
  • Ne l’utilisez pas pour la navigation entre les pages internes
  • Prévenez toujours les utilisateurs — ajoutez une icône ou un titre indiquant « s’ouvre dans un nouvel onglet »

Indiquer le nouvel onglet aux utilisateurs

Informez les utilisateurs que le lien s’ouvre dans un nouvel onglet :

<a href="https://example.com"
   target="_blank"
   rel="noopener noreferrer"
   aria-label="Visit Example (opens in new tab)">
  Visit Example
  <span aria-hidden="true">↗</span>
</a>
<!-- aria-label covers screen reader announcement
     The arrow icon gives visual users a hint -->

L’attribut download

L’attribut download indique au navigateur de télécharger le fichier lié au lieu d’y accéder :

<a href="/reports/q4-report.pdf" download>
  Download Q4 Report
</a>

<!-- Optionally specify the filename: -->
<a href="/api/export" download="my-data-2025.csv">
  Export CSV
</a>

Restrictions de l’attribut download

L’attribut download comporte certaines restrictions :

  • Il ne fonctionne qu’avec des URL de même origine
  • Les téléchargements depuis une autre origine nécessitent que le serveur envoie Content-Disposition: attachment
  • Le nom de fichier indiqué dans download est une suggestion — les en-têtes du serveur peuvent le remplacer

Téléchargements avec des URI de données

Vous pouvez télécharger du contenu généré à l’aide d’URI de données :

<a href="data:text/plain;charset=utf-8,Hello%20World!"
   download="hello.txt">
  Download Text File
</a>
<!-- Generates a .txt file from inline data -->
<!-- Useful for generating small files client-side without a server -->

JavaScript et cibles des liens

Lorsque JavaScript gère la navigation, évitez l’utilisation abusive de target="_blank" :

// If you must open a new window programmatically:
const win = window.open('https://example.com', '_blank', 'noopener,noreferrer');
// noopener via window.open requires the features string
// Not via rel on window.open

Attribut ping

L’attribut ping envoie une requête POST lorsque l’utilisateur clique sur le lien (à des fins d’analyse) :

<a href="/destination" ping="/analytics/track">
  Track this click
</a>
<!-- Browser sends POST to /analytics/track when link is clicked -->
<!-- Rarely used — blocked by many browsers -->
<!-- Most analytics use JavaScript instead -->

Attribut type des liens

L’attribut type indique le type MIME de la ressource liée :

<a href="/report.pdf" type="application/pdf">
  Download PDF Report
</a>
<a href="/data.json" type="application/json">
  JSON Data
</a>
<!-- Informational hint only — browser does not enforce it -->

Vérification rapide

Quel attribut de sécurité doit toujours accompagner target="_blank" ?

Récapitulatif : target et download

Attributs qui contrôlent le comportement des liens :

  • target="_blank" — ouvre le lien dans un nouvel onglet
  • Ajoutez toujours rel="noopener noreferrer" avec _blank
  • Prévenez visuellement les utilisateurs lorsqu’un lien s’ouvre dans un nouvel onglet
  • download — déclenche le téléchargement du fichier au lieu de la navigation
  • download="filename" — suggère un nom de fichier pour le téléchargement

Questions Fréquemment Posées

La leçon « Ouvrir des liens dans de nouveaux onglets et attribut download » est-elle gratuite ?

Oui — le texte complet de « Ouvrir des liens dans de nouveaux onglets et attribut download » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Ouvrir des liens dans de nouveaux onglets et attribut download » ?

Utilisez les attributs target et download pour contrôler le comportement des liens. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer HTML Academy ?

Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Ouvrir des liens dans de nouveaux onglets et attribut download » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?

Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. L’élément anchor et l’attribut href
  2. URL absolues ou relatives
  3. Ouvrir des liens dans de nouveaux onglets et attribut download
  4. Créer des liens vers des sections avec les identifiants de fragment
← Retour à HTML Academy