diff options
| author | tristantheb <tristantheb@users.noreply.github.com> | 2021-06-19 10:25:05 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-06-19 10:25:05 +0200 |
| commit | a47584de1bd47788cb5aa6178fa88b31977b2a8e (patch) | |
| tree | 1c153a5dd0e939a3ef819df87d6b988da950352f /files/fr/web/html/element/a | |
| parent | 1b0940218952a8132ceb9e4b56792ad47e94d552 (diff) | |
| download | translated-content-a47584de1bd47788cb5aa6178fa88b31977b2a8e.tar.gz translated-content-a47584de1bd47788cb5aa6178fa88b31977b2a8e.tar.bz2 translated-content-a47584de1bd47788cb5aa6178fa88b31977b2a8e.zip | |
UPDATE: Update translation of the HTML elements â đ Priority work area (#500)
* UPDATE: Updating pages starting with A
* FIX: Update missing KS to html anchor
* Review HTML Element a
* Review HTML Element abbr
* Review HTML Element acronym
* Review HTML Element address
* Review HTML Element applet
* Review HTML Element area
* Review HTML Element article
* Review HTML Element aside
* Review HTML Element audio
* UPDATE: Updating pages wtarting with B
* Review HTML Element b
* Review HTML Element base
* Review HTML Element basefont
* Review HTML Element bdi
* Review HTML Element bdo
* Review HTML Element big
* Review HTML Element blink
* Review HTML Element blockquote
* Review HTML Element body
* Review HTML Element br
* Review HTML Element button
* Review HTML Element button - rm HTMLRef
* Review HTML Element button - lint link
* UPDATE: Updating pages starting with C
* UPDATE: Updating pages starting with D
* UPDATE: Refresh the reference page
* UPDATE: Updating pages starting with E
* Review HTML Element canvas
* Review HTML Element caption
* Review HTML Element center
* Review HTML Element cite
* UPDATE: Updating pages starting with F
* BCD: Update all updated pages with new BCD format
* FIX: add missing bracket
* Review - HTML element - code
* Review - HTML Element - col
* Review - HTML Element - colgroup
* Review - HTML Element - content
* Review - HTML Element - data
* Review - HTML Element - datalist
* Review - HTML Element - dd
* Review - HTML Element - del
* Review - HTML Element
* Review - HTML Element - dfn
* Review - HTML Element - dialog
* Review - HTML element - dir
* Review - HTML Element div
* Review - HTML Element - dl
* Review - HTML Element - dt
* Review - HTML Element - em
* Review - HTML Element - embed
* Review - HTML Element - fieldset
* Review - HTML Element - figcaption
* Review - HTML Element - figure
* Review - HTML Element - font
* Review - HTML Element - footer
* Review - HTML Element - form
* Review - HTML Element - frame
* Review - HTML Element - frameset
* Review updates since PR start - A
* Review updates since PR start - B
* Review updates since PR start - C
* Review updates since PR start - D
* Review updates since PR start - F
Co-authored-by: julieng <julien.gattelier@gmail.com>
Diffstat (limited to 'files/fr/web/html/element/a')
| -rw-r--r-- | files/fr/web/html/element/a/index.html | 568 |
1 files changed, 339 insertions, 229 deletions
diff --git a/files/fr/web/html/element/a/index.html b/files/fr/web/html/element/a/index.html index e9ea38803c..ef41ac41a5 100644 --- a/files/fr/web/html/element/a/index.html +++ b/files/fr/web/html/element/a/index.html @@ -2,332 +2,442 @@ title: '<a> : l''Ă©lĂ©ment d''ancre' slug: Web/HTML/Element/a tags: - - Contenu + - Content - Element - HTML + - HTML text-level semantics + - HTML:Flow content + - HTML:Interactive content + - HTML:Palpable Content + - HTML:Phrasing content + - Inline element - Reference - Web translation_of: Web/HTML/Element/a +browser-compat: html.elements.a --- <div>{{HTMLRef}}</div> -<p>L'Ă©lĂ©ment <strong><code><a></code></strong> (pour ancre ou <em>anchor</em> en anglais) dĂ©finit un hyperlien vers un autre endroit de la mĂȘme page ou vers une autre page sur le Web.</p> +<p class="summary">L'Ă©lĂ©ment HTML <strong><code><a></code></strong> (pour ancre ou <i>anchor</i> en anglais), avec <a href="#href">son attribut <code>href</code></a>, crĂ©e un lien hypertexte vers des pages web, des fichiers, des adresses e-mail, des emplacements se trouvant dans la mĂȘme page, ou tout ce qu'une URL peut adresser. Le contenu de chaque Ă©lĂ©ment <code><a></code> <b>doit</b> indiquer la destination du lien. Si <a href="#href">l'attribut <code>href</code></a> est prĂ©sent, appuyer sur la touche entrĂ©e en se concentrant sur l'Ă©lĂ©ment <code><a></code> l'activera.</p> <div>{{EmbedInteractiveExample("pages/tabbed/a.html")}}</div> -<div class="hidden">Le code source de cet exemple interactif est disponible dans un dĂ©pĂŽt GitHub. Si vous souhaitez contribuez Ă ces exemples, n'hĂ©sitez pas Ă cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et Ă envoyer une <em>pull request</em> !</div> +<h2 id="attributes">Attributs</h2> -<h2 id="Attributs">Attributs</h2> - -<p>Cet Ă©lĂ©ment inclut les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>.</p> +<p>Cet Ă©lĂ©ment inclut les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>.</p> <dl> - <dt>{{htmlattrdef("download")}} {{HTMLVersionInline(5)}}</dt> - <dd>Cet attribut indique au navigateur de tĂ©lĂ©charger l'objet vers lequel pointe l'URL plutĂŽt que d'y diriger l'utilisateur. Cela ouvre une invite pour enregistrer la cible du lien comme un fichier local. Si l'attribut a une valeur, le navigateur doit l'interprĂ©ter comme le nom de fichier par dĂ©faut pour l'invite qui s'ouvre (l'utilisateur pourra bien entendu modifier le nom de fichier avant de cliquer sur « Enregistrer »). Il n'y a aucune limitation sur les valeurs autorisĂ©es, mais il faut se souvenir ici que la plupart des systĂšmes de fichiers ont des limitations concernant la ponctuation dans les noms de fichier, et que les navigateurs procĂ©deront sĂ»rement Ă des ajustements en consĂ©quence (par exemple, les barres obliques et barres obliques inversĂ©es seront sans doute converties en tirets bas). - <div class="note"> - <p><strong>Note :</strong></p> - - <ul> - <li>Cet attribut ne fonctionne que pour les URL partageant <a href="fr/docs/Web/Security/Same_origin_policy_for_JavaScript">la mĂȘme origine</a> mais jamais pour les URI utilisant le schĂ©ma <code>file:</code>.</li> - <li>Bien que les URL HTTPS doivent provenir de la mĂȘme origine, les URL <a href="/fr/docs/Web/API/URL/createObjectURL"><code>blob:</code></a>, <code>data:</code> et <code>filesystem:</code> peuvent ĂȘtre utilisĂ©es afin de simplifier le tĂ©lĂ©chargement de contenus gĂ©nĂ©rĂ©s par un programme JavaScript (ex. : une image gĂ©nĂ©rĂ©e automatiquement).</li> - <li>Si l'en-tĂȘte HTTP {{HTTPHeader("Content-Disposition")}} est prĂ©sent et fournit un nom de fichier diffĂ©rent que celui fourni par l'attribut alors ce sera l'en-tĂȘte HTTP qui aura la prioritĂ© sur l'attribut.</li> - <li>Si l'attribut est prĂ©sent et que <code>Content-Disposition:</code> vaut <code>inline</code>, Firefox donnera la prioritĂ© Ă l'en-tĂȘte, Chrome donnera la prioritĂ© Ă l'attribut.</li> - <li>Cet attribut est uniquement respectĂ© pour les liens des ressources de la mĂȘme origine.</li> - </ul> - </div> - </dd> - <dt>{{htmlattrdef("href")}}</dt> - <dd>L'attribut <code>href</code> indique la cible du lien sous la forme d'une URL ou d'un fragment d'URL. Un fragment d'URL est un nom prĂ©cĂ©dĂ© par un diĂšse (#), qui indique une cible interne au document (un <a href="/fr/docs/Web/HTML/Attributs_universels/id">ID</a>). Les URL ne se limitent pas au documents web sur HTTP. Les URL peuvent utiliser n'importe quel protocole supportĂ© par le navigateur. Par exemple, <code>file</code>, <code>ftp</code> et <code>mailto</code> fonctionnent avec la plupart des agents-utilisateur. - <div class="note"> - <p><strong>Note :</strong> Le fragment spĂ©cial <code>href="#top"</code> ou le fragment vide <code>href="#"</code> peuvent ĂȘtre utilisĂ©s pour crĂ©er un lien de retour vers le haut de la page ; par exemple <code><a href="#top">Retourner en haut</a></code>. <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#scroll-to-fragid">Ce comportement est dĂ©fini par HTML5</a>.</p> - </div> - </dd> - <dt>{{htmlattrdef("hreflang")}}</dt> - <dd>Cet attribut indique la langue de la ressource liĂ©e. Il est purement indicatif. Les valeurs permises pour HTML5 sont dĂ©finies par <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a> et pour HTML 4 par la <a class="external" href="https://www.ietf.org/rfc/rfc1766.txt">RFC1766</a>. Cet attribut ne doit ĂȘtre utilisĂ© que si l'attribut {{htmlattrxref("href", "a")}} est prĂ©sent.</dd> - <dt>{{htmlattrdef("ping")}}</dt> - <dd>Contient une liste d'URL sĂ©parĂ©es par des espaces vers lesquelles sont envoyĂ©es des requĂȘtes {{HTTPMethod("POST")}} avec le corps <code>PING</code> lorsque l'utilisateur suit le lien. Cet attribut est gĂ©nĂ©ralement utilisĂ© pour tracer un utilisateur.</dd> - <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> - <dd>Une chaĂźne de caractĂšres qui indique le rĂ©fĂ©rent Ă utiliser lors de la rĂ©cupĂ©ration de la ressource : - <ul> - <li><code>'no-referrer'</code> indique que l'en-tĂȘte <code>Referer</code> ne sera pas envoyĂ©.</li> - <li><code>'no-referrer-when-downgrade'</code> indique que l'en-tĂȘte <code>Referer</code> ne sera pas envoyĂ© lorsque l'utilisateur navigue depuis une origine sans TLS/HTTPS. C'est le comportement par dĂ©faut de l'agent utilisateur si aucune autre politique n'est spĂ©cifiĂ©e.</li> - <li><code>'origin'</code> indique que le rĂ©fĂ©rent sera l'origine de la page (ce qui correspond au schĂ©ma utilisĂ©, Ă l'hĂŽte et au port).</li> - <li><code>'origin-when-cross-origin'</code> indique que lorsqu'on navigue sur d'autres origines, seule l'origine du document sera envoyĂ©e. Lorsqu'on navigue sur la mĂȘme origine, le chemin de la ressource sera inclus dans le rĂ©fĂ©rent.</li> - <li><code>'strict-origin-when-cross-origin'</code> fonctionne comme <code>origin-when-cross-origin</code> mais les en-tĂȘtes d'origine sont envoyĂ©s via HTTPS plutĂŽt que par HTTP.</li> - <li><code>'unsafe-url'</code> indique que le rĂ©fĂ©rent envoyĂ© inclura l'origine et le chemin (mais pas le fragment, le mot de passe ou le nom d'utilisateur). Ce cas n'est pas considĂ©rĂ© comme sĂ»r car il peut laisser fuiter des origines et des chemins de ressources protĂ©gĂ©es par TLS vers des origines non-sĂ©curisĂ©es.</li> - </ul> - </dd> - <dt>{{htmlattrdef("rel")}}</dt> - <dd>Cet attribut indique la relation entre la cible du lien et l'objet faisant le lien. La valeur est une liste de <a href="/fr/docs/Web/HTML/Link_types">types de liens</a> sĂ©parĂ©s par des espaces.</dd> - <dt>{{htmlattrdef("target")}}</dt> - <dd>Cet attribut indique oĂč afficher la ressource liĂ©e. Il s'agit du nom, ou du mot-clĂ©, d'un <em>contexte de navigation</em> (par exemple, un onglet, une fenĂȘtre, ou une {{HTMLElement("iframe")}}). Les mots-clĂ©s suivants ont un sens particulier : - <ul> - <li><code>_self</code> : charge la rĂ©ponse dans le contexte de navigation courant. Il s'agit de la valeur par dĂ©faut quand l'attribut n'est pas renseignĂ©.</li> - <li><code>_blank</code> : charge la rĂ©ponse dans un nouveau contexte de navigation. - <ul> - <li>Ajouter un lien vers une autre page en utilisant <code>target="_blank"</code> exĂ©cutera la page dans le mĂȘme processus que la page courante. Si la nouvelle page consomme de nombreuses ressources, les performances de la page courante pourront en pĂątir. Pour Ă©viter ce problĂšme, on pourra utiliser <code>rel="noopener"</code>.</li> - </ul> - </li> - <li><code>_parent</code> : charge la rĂ©ponse dans le {{HTMLElement("frameset")}} HTML4 parent de la frame courante ou dans le contexte de navigation HTML5 parent relativement au contexte courant). S'il n'y a pas de parent, l'option se comporte de la mĂȘme façon que <code>_self</code>.</li> - <li><code>_top</code> : En HTML4 : charge la rĂ©ponse dans la fenĂȘtre originale, annulant toutes les autres frames. En HTML5 : charge la rĂ©ponse dans le contexte de navigation de plus haut niveau (c'est Ă dire, le contexte de navigation parent par rapport Ă l'actuel, et qui n'a lui-mĂȘme aucun parent). S'il n'y a pas de parent, l'option se comporte de la mĂȘme façon que <code>_self</code>.</li> - </ul> - - <p>Lorsque <code>target</code> est utilisĂ©, on pourra ajouter <code>rel="noopener noreferrer"</code> afin d'Ă©viter la fuite de donnĂ©es via l'API <code><a href="/fr/docs/Web/API/Window/opener">Window.opener</a></code>.</p> - </dd> - <dt>{{htmlattrdef("type")}}</dt> - <dd>Cet attribut indique le type de mĂ©dia de la cible du lien, sous la forme d'un type MIME. GĂ©nĂ©ralement, il s'agit d'une information purement indicative.</dd> + <dt><strong id="attr-download"><code>download</code></strong></dt> + <dd> + <ul> + <li>Sans valeur, le navigateur proposera un nom de fichier/extension, gĂ©nĂ©rĂ© Ă partir de diverses sources : + <ul> + <li>L'en-tĂȘte HTTP <a href="/fr/docs/Web/HTTP/Headers/Content-Disposition"><code>Content-Disposition</code></a></li> + <li>Le segment final dans l'URL : <a href="/fr/docs/Web/API/URL/pathname">path</a></li> + <li>Le <a href="/fr/docs/Glossary/MIME_type">Type MIME</a> (de l'en-tĂȘte <a href="/fr/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type</code></a>, le dĂ©but d'une URL <a href="/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code></a>, ou <a href="/fr/docs/Web/API/Blob/type"><code>Blob.type</code></a> pour une URL <a href="/fr/docs/Web/API/URL/createObjectURL"><code>blob:</code></a>).</li> + </ul> + </li> + <li>La dĂ©finition d'une valeur la suggĂšre comme nom de fichier. Les caractĂšres <code>/</code> et <code>\</code> sont convertis en caractĂšres de soulignement (<code>_</code>). Les systĂšmes de fichiers peuvent interdire d'autres caractĂšres dans les noms de fichiers, les navigateurs ajusteront donc le nom suggĂ©rĂ© si nĂ©cessaire.</li> + </ul> + <div class="notecard note"> + <p><b>Note :</b></p> + <ul> + <li><code>download</code> ne fonctionne que pour <a href="/fr/docs/Web/Security/Same-origin_policy">les URLs de mĂȘme origine</a>, ou les schĂ©mas <code>blob:</code> et <code>data:</code>.</li> + <li> + <p>Si l'en-tĂȘte <code>Content-Disposition</code> comporte des informations diffĂ©rentes de celles de l'attribut <code>download</code>, le comportement rĂ©sultant peut diffĂ©rer :</p> + <ul> + <li>Si l'en-tĂȘte spĂ©cifie un <code>nom de fichier</code>, il a prioritĂ© sur un nom de fichier spĂ©cifiĂ© dans l'attribut <code>download</code>.</li> + <li>Si l'en-tĂȘte spĂ©cifie une disposition de <code>inline</code>, Chrome, et Firefox 82+, donnent la prioritĂ© Ă l'attribut et le traitent comme un tĂ©lĂ©chargement. Les versions de Firefox antĂ©rieures Ă 82 donnent la prioritĂ© Ă l'en-tĂȘte et affichent le contenu en ligne.</li> + </ul> + </li> + </ul> + </div> + </dd> + <dt><strong id="attr-href"><code>href</code></strong></dt> + <dd> + <p>L'URL vers laquelle pointe l'hyperlien. Les liens ne sont pas limitĂ©s aux URL basĂ©es sur HTTP - ils peuvent utiliser n'importe quel schĂ©ma d'URL pris en charge par les navigateurs :</p> + <ul> + <li>Sections d'une page avec des fragments d'URL</li> + <li>Des morceaux de fichiers mĂ©dias avec des fragments de mĂ©dias</li> + <li>Les numĂ©ros de tĂ©lĂ©phone avec l'URL <code>tel:</code>.</li> + <li>Les adresses Ă©lectroniques avec l'URL <code>mailto:</code>.</li> + <li>Bien que les navigateurs web puissent ne pas prendre en charge d'autres schĂ©mas d'URL, les sites web le peuvent avec <a href="/fr/docs/Web/API/Navigator/registerProtocolHandler"><code>registerProtocolHandler()</code></a>.</li> + </ul> + </dd> + <dt><strong id="attr-hreflang"><code>hreflang</code></strong></dt> + <dd>Donne des indications sur le langage humain de l'URL liĂ©e. Aucune fonctionnalitĂ© intĂ©grĂ©e. Les valeurs autorisĂ©es sont les mĂȘmes que <a href="/fr/docs/Web/HTML/Global_attributes/lang">l'attribut global <code>lang</code></a>.</dd> + <dt><strong id="attr-ping"><code>ping</code></strong></dt> + <dd>Contient une liste d'URL sĂ©parĂ©es par des espaces vers lesquelles sont envoyĂ©es des requĂȘtes <a href="/fr/docs/Web/HTTP/Methods/POST"><code>POST</code></a> avec le corps <code>PING</code> lorsque l'utilisateur suit le lien. Cet attribut est gĂ©nĂ©ralement utilisĂ© pour tracer un utilisateur.</dd> + <dt><strong id="attr-referrerpolicy"><code>referrerpolicy</code></strong> {{experimental_inline}}</dt> + <dd>La portion du <a href="/fr/docs/Web/HTTP/Headers/Referer">referrer</a> envoyer lors du suivi du lien. Voir <a href="/fr/docs/Web/HTTP/Headers/Referrer-Policy"><code>Referrer-Policy</code></a> pour les valeurs possibles et leurs effets.</dd> + <dt><strong id="attr-rel"><code>rel</code></strong></dt> + <dd>Cet attribut indique la relation entre la cible du lien et l'objet faisant le lien. La valeur est une liste de <a href="/fr/docs/Web/HTML/Link_types">types de liens</a> sĂ©parĂ©s par des espaces.</dd> + <dt><strong id="attr-target"><code>target</code></strong></dt> + <dd>OĂč afficher l'URL liĂ©e, comme nom d'un <em>contexte de navigation</em> (un onglet, une fenĂȘtre ou un <a href="/fr/docs/Web/HTML/Element/iframe"><code><iframe></code></a>). Les mots-clĂ©s suivants ont des significations spĂ©ciales pour l'endroit oĂč charger l'URL : + <ul> + <li><code>_self</code> : le contexte de navigation actuel. (Par dĂ©faut)</li> + <li><code>_blank</code> : gĂ©nĂ©ralement un nouvel onglet, mais les utilisateurs peuvent configurer les navigateurs pour ouvrir une nouvelle fenĂȘtre Ă la place.</li> + <li><code>_parent</code> : le contexte de navigation parent de celui en cours. S'il n'y a pas de parent, il se comporte comme <code>_self</code>.</li> + <li><code>_top</code> : le contexte de navigation le plus haut (le contexte "le plus haut" qui est un ancĂȘtre du contexte actuel). S'il n'a aucun ancĂȘtre, il se comporte comme <code>_self</code>.</li> + </ul> + <div class="notecard note"> + <p><b>Note :</b></p> + <p>DĂ©finir <code>target="_blank"</code> sur les Ă©lĂ©ments <code><a></code> fournit implicitement le mĂȘme comportement <code>rel</code> que dĂ©finir <a href="/fr/docs/Web/HTML/Link_types/noopener"><code>rel="noopener"</code></a> qui ne dĂ©finit pas <code>window.opener</code>. Voir la <a href="#browser_compatibility">compatibilitĂ© des navigateurs</a> pour le support.</p> + </div> + </dd> + <dt><strong id="attr-type"><code>type</code></strong></dt> + <dd>Donne des indications sur le format de l'URL liĂ©e avec un <a href="/fr/docs/Glossary/MIME_type">Type MIME</a>. Aucune fonctionnalitĂ© intĂ©grĂ©e.</dd> </dl> -<h3 id="Attributs_obsolĂštes">Attributs obsolĂštes</h3> +<h3 id="deprecated_attributes">Attributs obsolĂštes</h3> <dl> - <dt>{{htmlattrdef("charset")}} {{Obsolete_Inline("HTML5")}}</dt> - <dd>Cet attribut dĂ©finit le jeu de caractĂšres de la ressource liĂ©e. La valeur est une liste de jeux de caractĂšres (dĂ©fini dans <a class="external" href="https://tools.ietf.org/html/rfc2045">RFC 2045</a>) sĂ©parĂ©s par des espaces ou des virgules. La valeur par dĂ©faut est ISO-8859-1. - <div class="note"> - <p><strong>Note d'utilisation : </strong>Cet attribut est obsolĂšte en HTML5, et <strong>ne doit plus ĂȘtre utilisĂ©</strong> par les auteurs. Pour obtenir le mĂȘme effet, utiliser l'entĂȘte HTTP Content-Type sur la ressource liĂ©e.</p> - </div> - </dd> - <dt>{{htmlattrdef("coords")}} {{HTMLVersionInline(4)}} seulement, {{Obsolete_Inline("HTML5")}}</dt> - <dd>Pour utiliser avec des formes gĂ©omĂ©triques. Cet attribut utilise une liste de nombres sĂ©parĂ©s par des virgules, dĂ©finissant les coordonnĂ©es de l'objet sur la page.</dd> - <dt>{{htmlattrdef("name")}} {{HTMLVersionInline(4)}} seulement, {{Obsolete_Inline("HTML5")}}</dt> - <dd>Cet attribut est utilisĂ© pour dĂ©finir une ancre cible au sein de la page. La valeur de <code><strong>name</strong></code> est similaire Ă la valeur de l'attribut global <code><strong>id</strong></code>, et doit ĂȘtre un identifiant alphanumĂ©rique unique au document. Sous la spĂ©cification HTML 4.01, <code><strong>id</strong></code> et <code><strong>name</strong></code> peuvent ĂȘtre tous les deux utilisĂ©s sur un Ă©lĂ©ment <code><a></code> s'ils ont des valeurs identiques. - <div class="note"> - <p><strong>Note d'utilisation </strong><strong>:</strong> Cet attribut est obsolĂšte en HTML5, il faut utiliser l'<a href="/fr/docs/Web/HTML/Attributs_globaux#id">attribut global <strong>id</strong></a> Ă la place.</p> - </div> - </dd> - <dt>{{htmlattrdef("rev")}} {{HTMLVersionInline(4)}} seulement, {{Obsolete_Inline("HTML5")}}</dt> - <dd>L'attribut indique un lien inversĂ© : la relation inverse de l'attribut <strong><code>rel</code></strong>. Il est utile pour indiquer l'origine d'un objet, tel que l'auteur d'un document. - <div class="note"> - <p><strong>Note </strong><strong>:</strong> La spĂ©cification actuelle de HTML 5.2 du W3C n'indique plus l'attribut <code>rev</code> comme obsolĂšte. En revanche, la spĂ©cification du WHATWG le considĂšre toujours comme obsolĂšte. Tant que cette incohĂ©rence n'est pas rĂ©solue, mieux vaut considĂ©rer cet attribut comme obsolĂšte.</p> - </div> - </dd> - <dt>{{htmlattrdef("shape")}} {{HTMLVersionInline(4)}} seulement, {{Obsolete_Inline("HTML5")}}</dt> - <dd>Cet attribut est utilisĂ© pour dĂ©finir une zone cliquable pour un lien associĂ© Ă une image, pour crĂ©er une image map. Les valeurs pour cet attribut sont <code>circle</code>, <code>default</code>, <code>polygon</code>, et <code>rect</code>. Le format de l'attribut <code>coords</code> dĂ©pend de la valeur de <code>shape</code>. Pour <code>circle</code>, la valeur est <code>x,y,r</code> oĂč <code>x</code> et <code>y</code> sont les coordonnĂ©es en pixel pour le centre du cercle et <code>r</code> est le rayon du cercle en pixel. Pour <code>rect</code>, l'attribut <code>coords</code> doit ĂȘtre <code>x,y,w,h</code>. Les valeurs <code>x,y</code> dĂ©finissent le coin supĂ©rieur gauche du rectangle, pendant <code>w</code> et <code>h</code> dĂ©finissent respectivement la largeur et la hauteur. Une valeur <code>polygon</code> pour <strong>shape</strong> nĂ©cessite les valeurs <code>x1,y1,x2,y2,...</code> pour <code>coords</code>. Chaque paire de <code>x,y</code> dĂ©finissent un point du polygone, avec les points successifs joints par des lignes droites, et le dernier point joint au premier. La valeur <code>default</code> pour <code>shape</code> nĂ©cessite que la totalitĂ© de la zone, habituellement une image, soit utilisĂ©e. - <div class="note"><strong>Note :</strong> Il est prĂ©fĂ©rable d'utiliser l'attribut {{htmlattrxref("usemap","img")}} de l'Ă©lĂ©ment {{HTMLElement("img")}} et l'Ă©lĂ©ment {{HTMLElement("map")}} associĂ©, pour dĂ©finir des zones d'actions, Ă la place de l'attribut <code>shape</code>.</div> - </dd> + <dt id="charset"><strong id="attr-charset"><code>charset</code></strong> {{Deprecated_Inline}}</dt> + <dd>Fait allusion aux <a href="/fr/docs/Glossary/character_encoding">encodages des caractĂšres</a> de l'URL liĂ©e. + <div class="notecard note"> + <p><b>Note :</b></p> + <p>Cet attribut est dĂ©prĂ©ciĂ© et <strong>ne doit pas ĂȘtre utilisĂ© par les auteurs</strong>. Utilisez l'en-tĂȘte HTTP <a href="/fr/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type</code></a> sur l'URL liĂ©e.</p> + </div> + </dd> + <dt id="coords"><strong id="attr-coords"><code>coords</code></strong> {{Deprecated_Inline}}</dt> + <dd>UtilisĂ© avec <a href="#shape">l'attribut <code>shape</code></a>. Une liste de coordonnĂ©es sĂ©parĂ©es par des virgules.</dd> + <dt id="name"><strong id="attr-name"><code>name</code></strong> {{Deprecated_Inline}}</dt> + <dd>Ătait nĂ©cessaire pour dĂ©finir un emplacement cible possible dans une page. En HTML 4.01, <code>id</code> et <code>name</code> pouvaient tous deux ĂȘtre utilisĂ©s sur <code><a></code>, pour autant qu'ils aient des valeurs identiques. + <div class="notecard note"> + <p><b>Note :</b></p> + <p>Utilisez l'attribut universel <a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a> Ă la place.</p> + </div> + </dd> + <dt id="rev"><strong id="attr-rev"><code>rev</code></strong> {{Deprecated_Inline}}</dt> + <dd>SpĂ©cifiait un lien inverse ; l'opposĂ© de <a href="#rel">l'attribut <code>rel</code></a>. DĂ©prĂ©ciĂ© pour avoir Ă©tĂ© trĂšs confus.</dd> + <dt id="shape"><strong id="attr-shape"><code>shape</code></strong> {{Deprecated_Inline}}</dt> + <dd>La forme de la rĂ©gion de l'hyperlien dans une carte d'image. + <div class="notecard note"> + <p><b>Note :</b></p> + <p>Utilisez plutĂŽt l'Ă©lĂ©ment <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a> pour les cartes d'images.</p> + </div> + </dd> </dl> -<h2 id="Exemples">Exemples</h2> +<h2 id="properties">PropriĂ©tĂ©s</h2> -<h3 id="Hyperlien_vers_une_ressource_externe">Hyperlien vers une ressource externe</h3> +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">CatĂ©gories de contenu</a></th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu du flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasĂ©</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content">contenu interactif</a>, contenu palpable.</td> + </tr> + <tr> + <th scope="row">Contenu autorisĂ©</th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#transparent_content_model">Transparent</a>, contenant soit le <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu du flux</a> (Ă l'exclusion du <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content">contenu interactif</a>), soit <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasĂ©</a>.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td> + </tr> + <tr> + <th scope="row">Parents autorisĂ©s</th> + <td>Tout Ă©lĂ©ment qui accepte <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">la formulation du contenu</a>, ou tout Ă©lĂ©ment qui accepte <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">le contenu du flux</a>, mais pas les autres Ă©lĂ©ments <code><a></code>.</td> + </tr> + <tr> + <th scope="row">RĂŽle ARIA implicite</th> + <td><a href="https://w3c.github.io/aria/#link">lien</a> lorsque l'attribut <code>href</code> est prĂ©sent, sinon <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">pas de rĂŽle correspondant</a>.</td> + </tr> + <tr> + <th scope="row">RĂŽles ARIA autorisĂ©s</th> + <td> + <p>Lorsque l'attribut <code>href</code> est prĂ©sent :</p> + <ul> + <li><a href="https://w3c.github.io/aria/#button">button</a></li> + <li><a href="https://w3c.github.io/aria/#checkbox">checkbox</a></li> + <li><a href="https://w3c.github.io/aria/#menuitem">menuitem</a></li> + <li><a href="https://w3c.github.io/aria/#menuitemcheckbox">menuitemcheckbox</a></li> + <li><a href="https://w3c.github.io/aria/#menuitemradio">menuitemradio</a></li> + <li><a href="https://w3c.github.io/aria/#option">option</a></li> + <li><a href="https://w3c.github.io/aria/#radio">radio</a></li> + <li><a href="https://w3c.github.io/aria/#switch">switch</a></li> + <li><a href="https://w3c.github.io/aria/#tab">tab</a></li> + <li><a href="https://w3c.github.io/aria/#treeitem">treeitem</a></li> + </ul> + <p>Lorsque l'attribut <code>href</code> n'est pas prĂ©sent :</p> + <ul> + <li>tout</li> + </ul> + </td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLAnchorElement"><code>HTMLAnchorElement</code></a></td> + </tr> + </tbody> +</table> -<pre class="brush: html notranslate"><a href="https://www.mozilla.com/"> -Lien externe -</a></pre> +<h2 id="examples">Exemples</h2> -<h4 id="RĂ©sultat">RĂ©sultat</h4> +<h3 id="linking_to_an_absolute_url">CrĂ©er un lien vers une URL absolue</h3> -<p>{{EmbedLiveSample("Hyperlien_vers_une_ressource_externe")}}</p> +<h4 id="html">HTML</h4> -<h3 id="CrĂ©er_une_image_cliquable">CrĂ©er une image cliquable</h3> +<pre class="brush: html notranslate"><a href="https://www.mozilla.com"> + Mozilla +</a></pre> -<p>Ce petit exemple utilise une image qui redirige vers la page d'accueil de MDN. La page d'accueil s'ouvrira dans un nouveau contexte de navigation, c'est une nouvelle page ou un nouvel onglet.</p> +<h4 id="result">RĂ©sultat</h4> -<div class="blockIndicator note"> -<p>Dans le cas d'une image cliquable, le texte alternatif doit contenir l'objet du lien, tel qu'indiquĂ© dans <a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-content">l'exemple 9 des WCAG 1.1.1 relatives aux alternatives textuelles</a>.</p> -</div> +<p>{{EmbedLiveSample("linking_to_an_absolute_url", "100%", 50)}}</p> -<pre class="brush: html notranslate"><a href="https://developer.mozilla.org/fr/" target="_blank"> - <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="Documentation du web - MDN" /> -</a></pre> +<h3 id="linking_to_relative_urls">CrĂ©er des liens vers des URL relatives</h3> -<h4 id="RĂ©sultat_2">RĂ©sultat</h4> +<h4 id="html_2">HTML</h4> -<p>{{EmbedLiveSample("Exemple_Cr%C3%A9er_une_image_cliquable", "320", "64")}}</p> +<pre class="brush: html"><a href="//example.com">URL relative au schĂ©ma</a> +<a href="/fr/docs/Web/HTML">URL relative Ă l'origine</a> +<a href="./p">URL relative au rĂ©pertoire</a></pre> -<h3 id="CrĂ©er_un_lien_vers_un_numĂ©ro_de_tĂ©lĂ©phone">CrĂ©er un lien vers un numĂ©ro de tĂ©lĂ©phone</h3> +<div class="hidden"> +<h4 id="css">CSS</h4> -<p>Lorsqu'on utilise des appareils connectĂ©s Ă des tĂ©lĂ©phones, il peut ĂȘtre pratique d'utiliser des liens avec le schĂ©ma <code>tel:</code> :</p> +<pre class="brush: css">a { display: block; margin-bottom: 0.5em }</pre> +</div> -<pre class="brush: html notranslate"><a href="tel:+615701564">+6 15 70 15 64</a> -</pre> +<h4 id="result_2">RĂ©sultat</h4> -<p>Pour plus de dĂ©tails sur ce schĂ©ma, se rĂ©fĂ©rer Ă la RFC {{RFC(3966)}}.</p> +<p>{{EmbedLiveSample("linking_to_relative_urls", "100%", 120)}}</p> -<h3 id="CrĂ©er_un_lien_pour_Ă©crire_un_e-mail">CrĂ©er un lien pour Ă©crire un e-mail</h3> +<h3 id="linking_to_an_element_on_the_same_page">CrĂ©er un lien vers un Ă©lĂ©ment de la mĂȘme page</h3> -<p>Il est courant de crĂ©er des boutons ou des hyperliens qui vont ouvrir l'application de messagerie de l'utilisateur pour lui permettre d'envoyer un nouveau message. Cela est possible en utilisant un lien <code>mailto</code>. Voici un exemple simple:</p> +<pre class="brush: html"><!-- <a> Ă©lĂ©ment liens vers la section ci-dessous --> +<p><a href="#section_further_down"> + Passez Ă la rubrique ci-dessous +</a></p> -<pre class="brush: html notranslate"><a href="mailto:personne@mozilla.org">Envoyer un courriel Ă personne</a></pre> +<!-- Rubrique Ă relier --> +<h2 id="section_further_down">Section plus bas</h2></pre> + +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Vous pouvez utiliser <code>href="#top"</code> ou le fragment vide (<code>href="#"</code>) pour crĂ©er un lien vers le haut de la page actuelle, <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-the-fragment-identifier">comme dĂ©fini dans la spĂ©cification HTML</a>.</p> +</div> -<p>Cela produit comme rĂ©sultat, un lien qui ressemble Ă ceci: <a href="mailto:nowhere@mozilla.org">Envoyer un courriel Ă personne</a>.<br> - Pour plus de dĂ©tails sur le schĂ©ma URL de <code>mailto</code>, comme comment inclure un sujet, un corps de texte, ou tout autre contenu prĂ©dĂ©terminĂ©, voir les <a href="/fr/docs/Web/Guide/HTML/Email_links">liens Emails</a> ou {{RFC(6068)}}.</p> +<h3 id="linking_to_an_email_address">CrĂ©er un lien avec une adresse Ă©lectronique</h3> -<h3 id="Utiliser_lattribut_download_pour_sauvegarder_un_canvas_en_PNG">Utiliser l'attribut <code>download</code> pour sauvegarder un canvas en PNG</h3> +<p>Pour crĂ©er des liens qui s'ouvrent dans le programme de messagerie de l'utilisateur, pour lui permettre d'envoyer un nouveau message, utilisez le schĂ©ma <code>mailto:</code> :</p> -<p>Si on souhaite permettre Ă un utilisateur de tĂ©lĂ©charger un canvas HTML comme une image, on peut crĂ©er un lien avec un attribut download et lui associer les donnĂ©es liĂ©es au {{HTMLElement('canvas')}} pour construire une URL de fichier.</p> +<pre class="brush: html"><a href="mailto:nowhere@mozilla.org">Envoyer un courriel nulle part</a></pre> -<pre class="brush: js notranslate">var link = document.createElement('a'); -link.textContent = 'TĂ©lĂ©charger une image'; -link.addEventListener('click', function(ev) { - link.href = canvas.toDataURL(); - link.download = "maToile.png"; -}, false); -document.body.appendChild(link);</pre> +<p>Pour plus de dĂ©tails sur les URL <code>mailto:</code>, comme l'inclusion d'un sujet ou d'un corps de message, voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#e-mail_links">Liens de courrier Ă©lectronique</a> ou <a href="https://tools.ietf.org/html/rfc6068">RFC 6068</a>.</p> -<p>Vous pouvez voir le rĂ©sultat de ce code ici <a href="https://jsfiddle.net/codepo8/V6ufG/2/">https://jsfiddle.net/codepo8/V6ufG/2/</a></p> +<h3 id="linking_to_telephone_numbers">CrĂ©er un lien avec les numĂ©ros de tĂ©lĂ©phone</h3> -<h2 id="Notes">Notes</h2> +<pre class="brush: html"><a href="tel:+49.157.0156">+49 157 0156</a> +<a href="tel:+1(555)5309">(555) 5309</a></pre> + +<p><code>tel:</code> le comportement du lien varie en fonction des capacitĂ©s du pĂ©riphĂ©rique :</p> <ul> - <li>Les raccourcis clavier suivants sont rĂ©servĂ©s par deux des principaux navigateurs, et ne doivent pas ĂȘtre utilisĂ©s comme valeur pour <code>accesskey</code> : a, c, e, f, g, h, v, flĂšche droite et flĂšche gauche.</li> + <li>Les appareils cellulaires composent automatiquement le numĂ©ro.</li> + <li>La plupart des systĂšmes d'exploitation disposent de programmes permettant de passer des appels, comme Skype ou FaceTime.</li> + <li>Les sites web peuvent passer des appels tĂ©lĂ©phoniques avec <a href="/fr/docs/Web/API/Navigator/registerProtocolHandler"><code>registerProtocolHandler</code></a>, comme <code>web.skype.com</code>.</li> + <li>Les autres comportements comprennent l'enregistrement du numĂ©ro dans les contacts, ou l'envoi du numĂ©ro Ă un autre appareil.</li> </ul> -<h2 id="SĂ©curitĂ©_et_vie_privĂ©e">SĂ©curitĂ© et vie privĂ©e</h2> +<p>Voir <a href="https://tools.ietf.org/html/rfc3966">RFC 3966</a> pour la syntaxe, les fonctionnalitĂ©s supplĂ©mentaires et d'autres dĂ©tails sur le schĂ©ma URL <code>tel:</code>.</p> + +<h3 id="using_the_download_attribute_to_save_a_canvas_as_a_png">Utilisation de l'attribut de tĂ©lĂ©chargement pour enregistrer un <canvas> au format PNG.</h3> + +<p>Pour enregistrer le contenu d'un Ă©lĂ©ment <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a> sous forme d'image, vous pouvez crĂ©er un lien avec un attribut <code>download</code> et les donnĂ©es du canvas sous forme d'une URL <code>data:</code> :</p> + +<h4 id="example_painting_app_with_save_link">Exemple d'application de peinture avec lien de sauvegarde</h4> + +<h5 id="html_3">HTML</h5> + +<pre class="brush: html"><p> + Peignez en maintenant le bouton de la souris enfoncĂ© et en le dĂ©plaçant. + <a href="" download="my_painting.png">TĂ©lĂ©charger ma peinture</a> +</p> + +<canvas width="300" height="300"></canvas></pre> + +<h5 id="css_2">CSS</h5> + +<pre class="brush: css">html { + font-family: sans-serif; +} +canvas { + background: #fff; + border: 1px dashed; +} +a { + display: inline-block; + background: #69c; + color: #fff; + padding: 5px 10px; +}</pre> + +<h5 id="javascript">JavaScript</h5> + +<pre class="brush: js">var canvas = document.querySelector('canvas'), + c = canvas.getContext('2d'); +c.fillStyle = 'hotpink'; + +function draw(x, y) { + if (isDrawing) { + c.beginPath(); + c.arc(x, y, 10, 0, Math.PI*2); + c.closePath(); + c.fill(); + } +} + +canvas.addEventListener('mousemove', event => + draw(event.offsetX, event.offsetY) +); +canvas.addEventListener('mousedown', () => isDrawing = true); +canvas.addEventListener('mouseup', () => isDrawing = false); + +document.querySelector('a').addEventListener('click', event => + event.target.href = canvas.toDataURL() +);</pre> + +<h5 id="result_3">RĂ©sultat</h5> + +<p>{{EmbedLiveSample('example_painting_app_with_save_link', '100%', '420')}}</p> + +<h2 id="security_and_privacy">SĂ©curitĂ© et vie privĂ©e</h2> -<p>Bien que l'Ă©lĂ©ment <code><a></code> soit la plupart du temps utilisĂ© innocemment, les informations qu'il peut transporter peuvent avoir des effets indĂ©sirables sur la sĂ©curitĂ© et sur la vie privĂ©e des utilisateurs. Pour plus d'informations, voir <a href="/fr/docs/Web/Security/Referer_header:_privacy_and_security_concerns">cet article sur l'en-tĂȘte <code>Referer</code> et les problĂ©matiques qu'il soulĂšve</a>.</p> +<p>Les Ă©lĂ©ments <code><a></code> peuvent avoir des consĂ©quences sur la sĂ©curitĂ© et la vie privĂ©e des utilisateurs. Voir <a href="/fr/docs/Web/Security/Referer_header:_privacy_and_security_concerns"><code>Referer</code> header : privacy and security concerns</a> pour plus d'informations.</p> -<p>L'utilisation de <code>target="_blank"</code> sans <code>rel="noreferrer"</code> et sans <code>rel="noopener"</code> peut rendre un site vulnĂ©rable Ă certaines formes d'attaques utilisant l'API <code>window.opener</code> (voir <a href="https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/">ce billet</a>).</p> +<p>L'utilisation de <code>target="_blank"</code> sans <a href="/fr/docs/Web/HTML/Link_types/noreferrer"><code>rel="noreferrer"</code></a> et <a href="/fr/docs/Web/HTML/Link_types/noopener"><code>rel="noopener"</code></a> rend le site web vulnĂ©rable aux attaques d'exploitation de l'API <a href="/fr/docs/Web/API/Window/opener"><code>window.opener</code></a> (<a href="https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/">description de la vulnĂ©rabilitĂ©</a>), bien qu'il faille noter que, dans les versions plus rĂ©centes du navigateur, la dĂ©finition de <code>target="_blank"</code> fournit implicitement la mĂȘme protection que la dĂ©finition de <code>rel="noopener"</code>. Voir la <a href="#browser_compatibility">compatibilitĂ© des navigateurs</a> pour plus de dĂ©tails.</p> <h2 id="AccessibilitĂ©">AccessibilitĂ©</h2> -<h3 id="ĂvĂšnements_onclick">ĂvĂšnements <code>onclick</code></h3> +<h3 id="strong_link_text">Texte de lien fort</h3> + +<p><strong>Le contenu d'un lien doit indiquer oĂč va le lien</strong>, mĂȘme hors contexte.</p> + +<h4 id="inaccessible_weak_link_text">Texte inaccessible, lien faible</h4> + +<p>Une erreur tristement courante consiste Ă ne relier que les mots « cliquez ici » ou « ici » :</p> + +<pre class="brush: html example-bad"><p> + En savoir plus sur nos produits <a href="/products">ici</a>. +</p> +</pre> + +<h4 id="strong_link_text_2">Texte de lien fort</h4> + +<p>Heureusement, il s'agit d'une solution facile, et elle est en fait plus courte que la version inaccessible !</p> + +<pre class="brush: html example-good"><p> + En savoir plus <a href="/products">Ă propos de nos produits</a>. +</p></pre> + +<p>Les logiciels d'assistance disposent de raccourcis permettant de lister tous les liens d'une page. Cependant, un texte de lien fort profite Ă tous les utilisateurs â le raccourci « liste de tous les liens » imite la façon dont les utilisateurs voyants parcourent rapidement les pages.</p> + +<h3 id="onclick_events">ĂvĂšnements <code>onclick</code></h3> <p>Les ancres sont souvent dĂ©tournĂ©es avec l'Ă©vĂšnement <code>onclick</code> afin de crĂ©er des pseudo-boutons avec l'attribut <code>href</code> qui vaut <code>"#"</code> ou <code>"javascript:void(0)"</code> pour empĂȘcher le rafraĂźchissement de la page.</p> <p>Ces valeurs produisent des rĂ©sultats inadĂ©quats lorsqu'on copie/dĂ©place des liens, qu'on ouvre des liens dans de nouveaux onglets ou fenĂȘtres, qu'on ajoute des marque-pages ou lorsque le JavaScript est encore en train d'ĂȘtre tĂ©lĂ©chargĂ©. De plus, la sĂ©mantique exposĂ©e par le document, utilisĂ©e par les outils d'assistance, est incorrecte.</p> -<p>Dans ces cas, on privilĂ©giera plutĂŽt l'utilisation d'un bouton {{HTMLElement("button")}}. De façon gĂ©nĂ©rale, une ancre ne doit ĂȘtre utilisĂ©e que pour naviguer vers une URL correcte.</p> +<p>Dans ces cas, on privilĂ©giera plutĂŽt l'utilisation d'un bouton <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a>. De façon gĂ©nĂ©rale, une ancre ne doit ĂȘtre utilisĂ©e que pour naviguer vers une URL correcte.</p> -<h3 id="Liens_externes_liens_vers_des_ressources_non-HTML">Liens externes, liens vers des ressources non-HTML</h3> +<h3 id="external_links_and_linking_to_non-html_resources">Liens externes, liens vers des ressources non-HTML</h3> -<p>Les liens qui ouvrent un nouvel onglet ou une nouvelle fenĂȘtre grĂące Ă <code>target="_blank"</code>, ainsi que le liens qui ouvrent des fichiers devraient fournir une indication sur ce qui se produira lorsqu'on cliquera sur ces liens.</p> +<p>Les liens qui ouvrent un nouvel onglet ou une nouvelle fenĂȘtre grĂące Ă <code>target="_blank"</code>, ainsi que les liens qui ouvrent des fichiers devraient fournir une indication sur ce qui se produira lorsqu'on cliquera sur ces liens.</p> <p>Les personnes qui utilisent des outils d'assistance Ă la navigation comme des lecteurs d'Ă©cran et/ou qui souffrent de troubles de la vision, cognitifs peuvent ĂȘtre confuses lorsqu'un nouvel onglet, fichier ou une nouvelle fenĂȘtre s'ouvre de façon inattendue. Les anciennes versions des lecteurs d'Ă©cran peuvent Ă©galement ne pas annoncer ce comportement.</p> -<h4 id="Lien_vers_un_nouvel_onglet_ou_une_nouvelle_fenĂȘtre">Lien vers un nouvel onglet ou une nouvelle fenĂȘtre</h4> +<h4 id="link_that_opens_a_new_tabwindow">Lien vers un nouvel onglet ou une nouvelle fenĂȘtre</h4> -<pre class="brush: html notranslate"><a target="_blank" href="https://www.wikipedia.org/">WikipĂ©dia (s'ouvre dans une nouvelle fenĂȘtre)</a> -</pre> +<pre class="brush: html"><a target="_blank" href="https://www.wikipedia.org/"> + WikipĂ©dia (s'ouvre dans une nouvelle fenĂȘtre) +</a></pre> -<h4 id="Lien_vers_une_ressource_non-HTML">Lien vers une ressource non-HTML</h4> +<h4 id="link_to_a_non-html_resource">Lien vers une ressource non-HTML</h4> -<pre class="brush: html notranslate"><a target="_blank" href="2017-rapport-annuel.ppt">Rapport annuel 2017 (PowerPoint)</a> -</pre> +<pre class="brush: html"><a target="_blank" href="2017-rapport-annuel.ppt"> + Rapport annuel 2017 (PowerPoint) +</a></pre> <p>Si une icĂŽne est utilisĂ©e en lieu et place du texte pour indiquer ce comportement, on s'assurera qu'elle contient bien <a href="/fr/docs/Web/HTML/Element/Img#attr-alt">une description alternative</a>.</p> +<pre class="brush: html"><a target="_blank" href="https://www.wikipedia.org"> + WikipĂ©dia + <img alt="(s'ouvre dans un nouvel onglet)" src="newtab.svg"> +</a> + +<a href="2017-annual-report.ppt"> + Rapport annuel 2017 (PowerPoint) + <img alt="(fichier PowerPoint)" src="ppt-icon.svg"> +</a></pre> + <ul> - <li><a href="https://webaim.org/techniques/hypertext/hypertext_links">WebAIM : Liens et hypertexte (en anglais)</a></li> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_â_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">Comprendre les rĂšgles WCAG 3.2</a></li> - <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html">G200 : Ouvrir de nouvelles fenĂȘtres et onglets Ă partir d'un lien lorsque c'est strictement nĂ©cessaire - WCAG 2.0 (en anglais)</a></li> - <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G201.html">G201 : Fournir un avertissement aux utilisateurs lorsqu'ils ouvrent une nouvelle fenĂȘtre WCAG 2.0 (en anglais)</a></li> + <li><a href="https://webaim.org/techniques/hypertext/hypertext_links">WebAIM : Liens et hypertexte (en anglais)</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline_3.2_â_predictable_make_web_pages_appear_and_operate_in_predictable_ways">Comprendre les rĂšgles WCAG 3.2</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html">G200 : Ouvrir de nouvelles fenĂȘtres et onglets Ă partir d'un lien lorsque c'est strictement nĂ©cessaire - WCAG 2.0 (en anglais)</a></li> + <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G201.html">G201 : Fournir un avertissement aux utilisateurs lorsqu'ils ouvrent une nouvelle fenĂȘtre WCAG 2.0 (en anglais)</a></li> </ul> -<h3 id="Skip_links_-_liens_pour_laccĂšs_rapide_au_contenu"><em>Skip links</em> - liens pour l'accĂšs rapide au contenu</h3> +<h3 id="skip_links"><i>Skip links</i> - liens pour l'accĂšs rapide au contenu</h3> + +<p>Un <i>skip link</i> (aussi appelĂ© <i>skipnav</i> en anglais) est un Ă©lĂ©ment <code>a</code> qui est placĂ© le plus prĂšs possible de l'Ă©lĂ©ment <a href="/fr/docs/Web/HTML/Element/body"><code><body></code></a> et qui renvoie au dĂ©but du contenu principal de la page.</p> -<p>Un <em>skip link</em> (aussi appelĂ© <em>skipnav</em> en anglais) est un Ă©lĂ©ment <code>a</code> qui est placĂ© le plus prĂšs possible de l'Ă©lĂ©ment {{HTMLElement("body")}} et qui renvoie au dĂ©but du contenu principal de la page.</p> +<pre class="brush: html"><body> + <a href="#content">Skip to main content</a> + + <header> + ⊠+ </header> + + <main id="content"> <!-- Le lien "skip" renvoie vers ici --></pre> <p>Ce lien permet alors de passer plus facilement le contenu qui se rĂ©pĂšte sur l'ensemble des pages (l'en-tĂȘte et la barre de navigation par exemple).</p> -<p>Les <em>skip links</em> sont particuliĂšrement utiles pour les personnes qui naviguent Ă l'aide d'outils d'assistance (commande vocale, stylets buccal ou frontal) pour lesquels devoir passer par des liens rĂ©pĂ©tĂ©s peut freiner la lecture du document.</p> +<p>Les <i>skip links</i> sont particuliĂšrement utiles pour les personnes qui naviguent Ă l'aide d'outils d'assistance (commande vocale, stylets buccal ou frontal) pour lesquels devoir passer par des liens rĂ©pĂ©tĂ©s peut freiner la lecture du document.</p> <ul> - <li><em><a href="https://webaim.org/techniques/skipnav/">WebAIM: "Skip Navigation" Links</a></em><a href="https://webaim.org/techniques/skipnav/"> (en anglais)</a></li> - <li><a href="https://a11yproject.com/posts/2013-05-11-skip-nav-links/">Comment utiliser les <em>skip links</em> - <em>The A11Y Project</em> (en anglais)</a></li> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">Comprendre les rĂšgles WCAG 2.4 (en anglais)</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html"><em>Understanding Success Criterion 2.4.1 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li> + <li><em><a href="https://webaim.org/techniques/skipnav/">WebAIM: "Skip Navigation" Links</a></em> (en anglais)</li> + <li><a href="https://a11yproject.com/posts/2013-05-11-skip-nav-links/">Comment utiliser les <i>skip links</i> - <i>The A11Y Project</i> (en anglais)</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.4_%e2%80%94_navigable_provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">Comprendre les rĂšgles WCAG 2.4</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html"><i>Understanding Success Criterion 2.4.1 - W3C Understanding WCAG 2.0</i> (en anglais)</a></li> </ul> -<h3 id="Dimensionnement_et_proximitĂ©">Dimensionnement et proximitĂ©</h3> +<h3 id="size_and_proximity">Dimensionnement et proximitĂ©</h3> -<h4 id="Dimensionnement_-_taille">Dimensionnement - taille</h4> +<h4 id="size">La taille</h4> <p>Les Ă©lĂ©ments interactifs tels que les liens doivent fournir une surface suffisamment grande pour qu'il soit facile de les activer. Cela facilitera la tĂąche Ă une variĂ©tĂ© de personnes : celles qui ont des problĂšmes moteur, celles qui utilisent des dispositifs de pointage peu prĂ©cis (doigt ou stylet). La taille interactive minimale recommandĂ©e est de 44x44 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">pixels CSS</a>.</p> +<p>Les liens en texte seul dans le contenu en prose sont exemptĂ©s de cette exigence, mais il est toujours bon de s'assurer qu'il y a suffisamment de texte hyperliĂ© pour ĂȘtre facilement activĂ©.</p> + <ul> - <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Comprendre le critĂšre d'accessibilitĂ© 2.5.5 sur la taille des cibles - Comprendre WCAG 2.1 (en anglais)</a></li> - <li><a href="http://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Taille des cibles et critĂšre 2.5.5, billet en anglais de Adrian Roselli (an anglais)</a></li> - <li><a href="https://a11yproject.com/posts/large-touch-targets/">Test rapide : cibles tactiles suffisamment grande - Projet A11Y (billet en anglais)</a></li> + <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Comprendre le critĂšre d'accessibilitĂ© 2.5.5 sur la taille des cibles - Comprendre WCAG 2.1 (en anglais)</a></li> + <li><a href="https://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Taille des cibles et critĂšre 2.5.5, (en anglais) d'Adrian Roselli (an anglais)</a></li> + <li><a href="https://a11yproject.com/posts/large-touch-targets/">Test rapide : cibles tactiles suffisamment grande - Projet A11Y (en anglais)</a></li> </ul> -<h4 id="ProximitĂ©">ProximitĂ©</h4> +<h4 id="proximity">La proximitĂ©</h4> <p>Lorsque plusieurs contenus interactifs (y compris les ancres) sont placĂ©s les uns Ă cĂŽtĂ© des autres, il est nĂ©cessaire de les espacer suffisamment pour minimiser le risque d'activer le mauvais contenu lors de la navigation.</p> -<p>Un tel espacement peut ĂȘtre obtenu grĂące Ă la propriĂ©tĂ© CSS {{cssxref("margin")}}.</p> +<p>Un tel espacement peut ĂȘtre obtenu grĂące Ă la propriĂ©tĂ© CSS <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>.</p> <ul> - <li><a href="https://axesslab.com/hand-tremors/">Les tremblements de la main et le problĂšme du bouton gĂ©ant - Axess Lab (en anglais)</a></li> + <li><a href="https://axesslab.com/hand-tremors/">Les tremblements de la main et le problĂšme du bouton gĂ©ant - Axess Lab (en anglais)</a></li> </ul> -<h2 id="RĂ©sumĂ©_technique">RĂ©sumĂ© technique</h2> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/fr/docs/Web/HTML/CatĂ©gorie_de_contenu">CatĂ©gories de contenu</a></th> - <td><a href="/fr/docs/Web/HTML/CatĂ©gorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasĂ©</a>, <a href="/fr/docs/Web/HTML/CatĂ©gorie_de_contenu#Contenu_interactif">contenu interactif</a>, contenu tangible.</td> - </tr> - <tr> - <th scope="row">Contenu autorisĂ©</th> - <td><a href="/fr/docs/Web/HTML/CatĂ©gorie_de_contenu#ModĂšle_de_contenu_transparent">Contenu transparent</a> qui contient du <a href="/fr/docs/Web/HTML/CatĂ©gorie_de_contenu#Contenu_de_flux">contenu de flux</a> (mais pas de <a href="/fr/docs/Web/HTML/CatĂ©gorie_de_contenu#Contenu_interactif">contenu interactif</a>) ou du <a href="/fr/docs/Web/HTML/CatĂ©gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasĂ©</a>.</td> - </tr> - <tr> - <th scope="row">Omission de balises</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Parents autorisĂ©s</th> - <td>Tout Ă©lĂ©ment qui accepte du <a href="/fr/docs/Web/HTML/CatĂ©gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasĂ©</a> ou tout Ă©lĂ©ment qui accepte du <a href="/fr/docs/Web/HTML/CatĂ©gorie_de_contenu#Contenu_de_flux">contenu de flux</a>. (un Ă©lĂ©ment <code><a></code> ne peut pas avoir d'Ă©lĂ©ment parent qui soit Ă©galement un Ă©lĂ©ment <code><a></code>).</td> - </tr> - <tr> - <th scope="row">RĂŽles ARIA autorisĂ©s</th> - <td>{{ARIARole("button")}}, {{ARIARole("checkbox")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLAnchorElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="SpĂ©cifications">SpĂ©cifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">SpĂ©cification</th> - <th scope="col">Ătat</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td> - <td>{{Spec2('Referrer Policy')}}</td> - <td>Ajout de l'attribut <code>referrer</code>.</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-a-element', '<a>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-a-element', '<a>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.2', '<a>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<div class="blockIndicator note"> -<p><strong>Note :</strong> HTML 3.2. dĂ©finit uniquement les attributs <code>name</code>, <code>href</code>, <code>rel</code>, <code>rev</code> et <code>title</code>.</p> -</div> +<h2 id="specifications">SpĂ©cifications</h2> -<h2 id="CompatibilitĂ©_des_navigateurs">CompatibilitĂ© des navigateurs</h2> +<p>{{Specifications}}</p> -<div class="hidden">Ce tableau de compatibilitĂ© a Ă©tĂ© gĂ©nĂ©rĂ© Ă partir de donnĂ©es structurĂ©es. Si vous souhaitez contribuer Ă ces donnĂ©es, n'hĂ©sitez pas Ă envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> +<h2 id="browser_compatibility">CompatibilitĂ© des navigateurs</h2> -<p>{{Compat("html.elements.a")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>Les autres Ă©lĂ©ments ayant une sĂ©mantique textuelle : {{HTMLElement("abbr")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}</li> + <li><a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a> est similaire Ă <code><a></code>, mais reprĂ©sente des hyperliens de mĂ©tadonnĂ©es qui sont invisibles pour les utilisateurs.</li> + <li><a href="/fr/docs/Web/CSS/:link"><code>:link</code></a> est une pseudo-classe CSS qui correspondra aux Ă©lĂ©ments <code><a></code> avec des attributs <code>href</code> valides.</li> </ul> |