diff options
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> |