diff options
51 files changed, 4192 insertions, 5118 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> diff --git a/files/fr/web/html/element/abbr/index.html b/files/fr/web/html/element/abbr/index.html index 920bcc3a7e..f92760de19 100644 --- a/files/fr/web/html/element/abbr/index.html +++ b/files/fr/web/html/element/abbr/index.html @@ -1,203 +1,181 @@ --- -title: <abbr> +title: "<abbr> : l'élément d'abréviation" slug: Web/HTML/Element/abbr tags: + - Acronym + - Definitions - Element - HTML + - HTML text-level semantics + - HTML:Flow content + - HTML:Palpable Content + - HTML:Phrasing content - Reference - Web + - abbr + - abbreviation + - semantics translation_of: Web/HTML/Element/abbr +browser-compat: html.elements.abbr --- <div>{{HTMLRef}}</div> -<p>L'élément <code><strong><abbr></strong></code> représente une abréviation ou un acronyme et permet, de façon optionnelle, d'en fournir une description complète. S'il est présent, l'attribut {{htmlattrxref("title")}} doit contenir cette même description complète et rien d'autre.</p> +<p class="summary">L'élément HTML <strong><code><abbr></code></strong> (<strong>abréviation</strong> en français) représente une abréviation ou un acronyme ; l'attribut facultatif <a href="/fr/docs/Web/HTML/Global_attributes#attr-title"><code>title</code></a> peut fournir une explication ou une description de l'abréviation. S'il est présent, <code>title</code> doit contenir cette description complète et rien d'autre.</p> <div>{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}</div> -<p 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> !</p> - -<div class="note"> -<p><strong>Note :</strong> Voir <a href="/fr/Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte#Abbreviations">cet article introductif</a> pour la mise en forme du texte en général.</p> -</div> - -<h2 id="Attributs">Attributs</h2> - -<p>Cet élément n'a pas d'autres attributs que les <a href="/fr/docs/Web/HTML/Attributs_universels" rel="internal">attributs universels</a>.</p> - -<p>On notera que l'attribut {{htmlattrdef("title")}} possède ici une sémantique spécifique et il représente la description complète de l'abréviation. Souvent, mais pas nécessairement, il s'affiche comme une info-bulle au survol de la souris.</p> - -<p>Chaque élément <code><abbr></code> est indépendant, rattacher un titre à l'un ne l'associe pas aux abrévations identiques qui suivent.</p> - -<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> - -<h3 id="Cas_d'usage_généraux">Cas d'usage généraux</h3> - -<p>Il n'est pas obligatoire d'utiliser <code><abbr></code> pour toutes les abrévations d'un document mais voici quelques cas où cet élément s'avère pertinent :</p> +<table class="properties"> + <tbody> + <tr> + <th scope="row"><dfn><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></dfn></th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_phras.c3.a9">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_tangible">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row"><dfn>Contenu autorisé</dfn></th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_phras.c3.a9">Contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row"><dfn>Omission de balises</dfn></th> + <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td> + </tr> + <tr> + <th scope="row"><dfn>Parents autorisés</dfn></th> + <td>Tout élément acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_phras.c3.a9">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td> + </tr> + </tbody> + </table> + +<h2 id="attributes">Attributs</h2> + +<p>Cet élément n'a pas d'autres attributs que les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>.</p> + +<p>On notera que l'attribut <strong id="attr-title"><code>title</code></strong> possède ici une sémantique spécifique et il représente la description complète de l'abréviation. Souvent, mais pas nécessairement, il s'affiche comme une info-bulle au survol de la souris.</p> + +<p>Chaque élément <code><abbr></code> est indépendant, rattacher un titre à l'un ne l'associe pas aux abréviations identiques qui suivent.</p> + +<h2 id="usage_notes">Notes d'utilisation</h2> + +<h3 id="typical_use_cases">Cas d'usage généraux</h3> + +<p>Il n'est pas obligatoire d'utiliser <code><abbr></code> pour toutes les abréviations d'un document mais voici quelques cas où cet élément s'avère pertinent :</p> <ul> - <li>Lorsqu'une abrévation est utilisée et qu'on souhaite fournir une définition ou une explication en dehors du contenu du document, on utilisera <code><abbr></code> avec un attribut {{htmlattrxref("title")}} adéquat.</li> - <li>Lorsqu'une abrévation fait partie d'un jargon ou d'un vocabulaire qui risque d'être inconnu du lecteur, un élément <code><abbr></code> avec un attribut <code>title</code> explicatif pourra être utilisé.</li> - <li>Lorsqu'on souhaite bénéficier de la sémantique liée à l'abrévation (par exemple pour les manipuler en script ou les mettre en forme avec des feuilles de style), on pourra utiliser <code><abbr></code> pour identifier ces contenus.</li> - <li>Lorsqu'on souhaite définir des termes qui sont des abrévations, on pourra utiliser une combinaison de <code><abbr></code> et de {{HTMLElement("dfn")}}. Voir ci-après pour un exemple.</li> + <li>Lorsqu'une abréviation est utilisée et qu'on souhaite fournir une définition ou une explication en dehors du contenu du document, on utilisera <code><abbr></code> avec un attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-title"><code>title</code></a> adéquat.</li> + <li>Lorsqu'une abréviation fait partie d'un jargon ou d'un vocabulaire qui risque d'être inconnu du lecteur, un élément <code><abbr></code> avec un attribut <code>title</code> explicatif pourra être utilisé.</li> + <li>Lorsqu'on souhaite bénéficier de la sémantique liée à l'abréviation (par exemple pour les manipuler en script ou les mettre en forme avec des feuilles de style), on pourra utiliser <code><abbr></code> pour identifier ces contenus.</li> + <li>Lorsqu'on souhaite définir des termes qui sont des abréviations, on pourra utiliser une combinaison de <code><abbr></code> et de <a href="/fr/docs/Web/HTML/Element/dfn"><code><dfn></code></a>. Voir ci-après pour un exemple.</li> </ul> -<h3 id="Grammaire">Grammaire</h3> +<h3 id="grammar_considerations">Grammaire</h3> -<p>Lorsqu'il est présent, le nombre (grammatical) du texte de l'attribut <code><strong>title</strong></code> devrait correspondre à celui du contenu de l'élément <code>abbr</code>. C'est également le cas dans les langues avec plus de deux genres grammaticaux (par exemple, l'Arabe, en plus des catégories pour le singulier et le pluriel, possède également une catégorie double).</p> +<p>Lorsqu'il est présent, le nombre (grammatical) du texte de l'attribut <code><strong>title</strong></code> devrait correspondre à celui du contenu de l'élément <code>abbr</code>. C'est également le cas dans les langues avec plus de deux genres grammaticaux (par exemple, l'arabe, en plus des catégories pour le singulier et le pluriel, possède également une catégorie double).</p> -<h2 id="Mise_en_forme_par_défaut">Mise en forme par défaut</h2> +<h2 id="default_styling">Mise en forme par défaut</h2> -<p>Le but de cet élément est purement explicatif. Tous les navigateurs l'affichent en ligne ({{cssxref('display')}}<code>: inline</code>) par défaut mais le reste de la mise en forme par défaut peut varier d'un navigateur à l'autre :</p> +<p>Le but de cet élément est purement explicatif. Tous les navigateurs l'affichent en ligne (<code><a href="/fr/docs/Web/CSS/display">display</a>: inline</code>) par défaut mais le reste de la mise en forme par défaut peut varier d'un navigateur à l'autre :</p> <ul> - <li>Certains navigateurs tels qu'Internet Explore lui appliquent la même mise en forme qu'à un élément {{HTMLElement("span")}}.</li> - <li>Opera, Firefox et d'autres navigateurs souligne l'abréviation avec une ligne de points.</li> - <li>D'autres navigateurs ne soulignent pas le texte mais l'écrivent en petites majuscules. Pour éviter ce comportement, on pourra utiliser la règle CSS {{cssxref("font-variant")}}<code>: none</code>.</li> + <li>Certains navigateurs tels qu'Internet Explore lui appliquent la même mise en forme qu'à un élément <a href="/fr/docs/Web/HTML/Element/span"><code><span></code></a>.</li> + <li>Opera, Firefox et d'autres navigateurs souligne l'abréviation avec une ligne de points.</li> + <li>D'autres navigateurs ne soulignent pas le texte mais l'écrivent en petites majuscules. Pour éviter ce comportement, on pourra utiliser la règle CSS <code><a href="/fr/docs/Web/CSS/font-variant">font-variant</a>: none</code>.</li> </ul> -<h2 id="Exemples">Exemples</h2> +<h2 id="examples">Exemples</h2> -<h3 id="Baliser_une_abrévation_pour_marquer_la_sémantique">Baliser une abrévation pour marquer la sémantique</h3> +<h3 id="marking_up_an_abbreviation_semantically">Baliser une abréviation pour marquer la sémantique</h3> -<p>On peut baliser une abrévation sans fournir de description ou de définition, il suffit d'utiliser <code><abbr></code> sans attribut.</p> +<p>On peut baliser une abréviation sans fournir de description ou de définition, il suffit d'utiliser <code><abbr></code> sans attribut.</p> -<h4 id="HTML">HTML</h4> +<h4 id="html">HTML</h4> -<pre class="brush: html"><p>Nous allons voir le <abbr>HTML</abbr> qui sert à construire des pages web.</p></pre> +<pre class="brush: html"><p> + Nous allons voir le <abbr>HTML</abbr> qui sert à construire + des pages web. +</p></pre> -<h4 id="Résultat">Résultat</h4> +<h4 id="result">Résultat</h4> -<p>{{EmbedLiveSample("Baliser_une_abréviation_pour_marquer_la_sémantique")}}</p> +<p>{{EmbedLiveSample("marking_up_an_abbreviation_semantically", "100%", 80)}}</p> -<h3 id="Mettre_en_forme_des_abréviations">Mettre en forme des abréviations</h3> +<h3 id="styling_abbreviations">Mettre en forme des abréviations</h3> <p>CSS peut être utilisé pour appliquer une mise en forme particulière sur les abréviations.</p> -<h4 id="HTML_2">HTML</h4> +<h4 id="html_2">HTML</h4> <pre class="brush: html"><p>Avec <abbr>CSS</abbr>, on peut mettre en forme les éléments.</p></pre> -<h4 id="CSS">CSS</h4> +<h4 id="css">CSS</h4> <pre class="brush: css">abbr { font-variant: all-small-caps; }</pre> -<h4 id="Résultat_2">Résultat</h4> +<h4 id="result_2">Résultat</h4> -<p>{{EmbedLiveSample("Mettre_en_forme_des_abréviations")}}</p> +<p>{{EmbedLiveSample("styling_abbreviations", "100%", 80)}}</p> -<h3 id="Fournir_une_description">Fournir une description</h3> +<h3 id="providing_an_expansion">Fournir une description</h3> -<p>On peut ajouter un attribut {{htmlattrxref("title")}} afin de fournir une description de l'abréviation ou de l'acronyme.</p> +<p>On peut ajouter un attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-title"><code>title</code></a> afin de fournir une description de l'abréviation ou de l'acronyme.</p> -<h4 id="HTML_3">HTML</h4> +<h4 id="html_3">HTML</h4> <pre class="brush: html"><p>Et là je lui ai répondu <abbr title="Laugh Out Loud">LOL</abbr>.</p></pre> -<h4 id="Résultat_3">Résultat</h4> +<h4 id="result_3">Résultat</h4> -<p>{{EmbedLiveSample("Fournir_une_description")}}</p> +<p>{{EmbedLiveSample("providing_an_expansion", "100%", 80)}}</p> -<h3 id="Définir_une_abréviation">Définir une abréviation</h3> +<h3 id="defining_an_abbreviation">Définir une abréviation</h3> -<p>Il est possible d'utiliser l'élément <code><abbr></code> avec {{HTMLElement("dfn")}} afin de formellement définir une abréviation.</p> +<p>Il est possible d'utiliser l'élément <code><abbr></code> avec <a href="/fr/docs/Web/HTML/Element/dfn"><code><dfn></code></a> afin de formellement définir une abréviation.</p> -<h4 id="HTML_4">HTML</h4> +<h4 id="html_4">HTML</h4> <pre class="brush: html"><p><dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr> -</dfn> est un langage de balise qui permet de créer la structure et d'organiser -la sémantique d'une page web.</p> +</dfn> est un langage de balise qui permet de créer la structure +et d'organiser la sémantique d'une page web.</p> -<p>Une <dfn id="spec">Spécification</dfn> -(<abbr title="Specification">spec</abbr>) est un document qui décrit, de façon -détaillée comme une technologie ou une API fonctionne et comment l'utiliser.</p></pre> +<p>Une <dfn id="spec">spécification</dfn> +(<abbr title="spécification">spec</abbr>) est un document qui décrit, +de façon détaillée comme une technologie ou une API fonctionne et comment +l'utiliser.</p></pre> -<h4 id="Résultat_4">Résultat</h4> +<h4 id="result_4">Résultat</h4> -<p>{{EmbedLiveSample("Définir_une_abréviation", 600, 120)}}</p> +<p>{{EmbedLiveSample("defining_an_abbreviation", "100%", 160)}}</p> -<h2 id="Accessibilité">Accessibilité</h2> +<h2 id="accessibility_concerns">Accessibilité</h2> <p>C'est une bonne pratique que d'épeler l'acronyme ou l'abréviation lorsqu'elle est utilisée pour la première fois. Cela permet au lecteur de mieux comprendre le terme, notamment si celui-ci est technique ou appartient à un jargon spécifique.</p> -<h4 id="Exemple">Exemple</h4> +<h4 id="example">Exemple</h4> -<pre class="brush: html"><p>JavaScript Object Notation (<abbr>JSON</abbr>) est un format léger d'échange de données.</p> +<pre class="brush: html"><p>JavaScript Object Notation (<abbr>JSON</abbr>) est un format léger + d'échange de données.</p> </pre> <p>Cela peut servir aux personnes qui découvrent ces concepts pour la première fois ou pour les personnes souffrant de troubles cognitifs.</p> -<h2 id="Résumé_technique">Résumé technique</h2> +<h2 id="specifications">Spécifications</h2> -<table class="properties"> - <tbody> - <tr> - <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></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égorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Contenu autorisé</dfn></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Omission de balises</dfn></th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row"><dfn>Parents autorisés</dfn></th> - <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Tous les rôles sont autorisés.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'semantics.html#the-abbr-element', '<abbr>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-abbr-element', '<abbr>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/text.html#edef-ABBR', '<abbr>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> - -<p>{{Compat("html.elements.abbr")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> +<p>{{Specifications}}</p> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat}}</p> + +<h2 id="see_also">Voir aussi</h2> <ul> - <li><a href="/fr/Learn/HTML/Element/abbr">Utiliser l'élément <code><abbr></code></a></li> - <li>Les autres éléments ayant une sémantique textuelle : {{HTMLElement("a")}}, {{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>L'élément obsolète {{HTMLElement("acronym")}} dont la sémantique a été « fusionnée » dans <code><abbr></code></li> + <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#abbreviations">Utiliser l'élément <code><abbr></code></a></li> </ul> diff --git a/files/fr/web/html/element/acronym/index.html b/files/fr/web/html/element/acronym/index.html index cd1d71fa0a..8909b7ba3e 100644 --- a/files/fr/web/html/element/acronym/index.html +++ b/files/fr/web/html/element/acronym/index.html @@ -1,31 +1,44 @@ --- -title: <acronym> +title: "<acronym> : l'élément d'acronyme" slug: Web/HTML/Element/acronym tags: - Element - HTML - - Obsolete + - HTML:Flow content + - Deprecated - Reference - Web translation_of: Web/HTML/Element/acronym +browser-compat: html.elements.acronym --- -<div>{{obsolete_header}}{{HTMLRef}}</div> +<div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><acronym></code></strong>, pour les acronymes, permet aux auteurs de pages d'indiquer une suite de caractères composant un acronyme ou l'abréviation d'un mot.</p> +<div class="notecard deprecated"> + <p><b>Obsolète</b></p> + <p>Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.</p> +</div> -<div class="note"><strong>Note d'utilisation : </strong>Cet élément n'existe plus en HTML5 et ne devrait plus être utilisé. <strong>Les développeurs web devraient utiliser l'élément {{HTMLElement("abbr")}} à la place.</strong></div> +<p class="summary">L'élément HTML <strong><code><acronym></code></strong>, pour les acronymes, permet aux auteurs de pages d'indiquer une suite de caractères composant un acronyme ou l'abréviation d'un mot.</p> -<h2 id="Attributs">Attributs</h2> +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Cet élément n'existe plus en HTML5 et ne devrait plus être utilisé. <strong>Les développeuses et développeurs web devraient utiliser l'élément <a href="/fr/docs/Web/HTML/Element/abbr"><code><abbr></code></a> à la place</strong>.</p> +</div> -<p>Cet élément n'a pas d'autres attributs que les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>, communs à tous les éléments.</p> +<h2 id="attributes">Attributs</h2> -<h2 id="Interface_DOM">Interface DOM</h2> +<p>Cet élément n'a pas d'autres attributs que les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>, communs à tous les éléments.</p> -<p>Cet élément implémente l'interface {{domxref('HTMLElement')}}.</p> +<h2 id="DOM_Interface">Interface DOM</h2> -<div class="note"><strong>Note d'implémentation : </strong>Jusqu'à Gecko 1.9.2 (inclus), Firefox implémente l'interface {{domxref('HTMLSpanElement')}} pour cet élément.</div> +<p>Cet élément implémente l'interface <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>.</p> -<h2 id="Exemple">Exemple</h2> +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Jusqu'à Gecko 1.9.2 (inclus), Firefox implémente l'interface <a href="/fr/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> pour cet élément.</p> +</div> + +<h2 id="example">Exemple</h2> <pre class="brush:html"><p> Le <acronym title="World Wide Web" lang="en">WWW</acronym> @@ -33,45 +46,28 @@ translation_of: Web/HTML/Element/acronym </p> </pre> -<h2 id="Style_par_défaut">Style par défaut</h2> +<h2 id="default_styling">Style par défaut</h2> <p>Bien que le but de cette balise ne soit simplement qu'un avantage pratique pour l'auteur, son style par défaut varie selon les navigateurs :</p> <ul> - <li>Certains navigateurs comme Internet Explorer lui attribuent le même style qu'un élément {{HTMLElement("span")}}.</li> - <li>Opera, Firefox, et quelques autres ajoutent une ligne pointillée sous le contenu de l'élément.</li> - <li>Quelques navigateurs ajoutent une ligne pointillée en dessous et mettent le contenu en petites majuscules. Pour éviter ce comportement, il est possible d'ajouter {{cssxref('font-variant')}}<code>: none</code> à la feuille de style CSS.</li> + <li>Certains navigateurs comme Internet Explorer lui attribuent le même style qu'un élément <a href="/fr/docs/Web/HTML/Element/span"><code><span></code></a>.</li> + <li>Opera, Firefox, et quelques autres ajoutent une ligne pointillée sous le contenu de l'élément.</li> + <li>Quelques navigateurs ajoutent une ligne pointillée en dessous et mettent le contenu en petites majuscules. Pour éviter ce comportement, il est possible d'ajouter <code><a href="/fr/docs/Web/CSS/font-variant">font-variant</a>: none</code> à la feuille de style CSS.</li> </ul> <p>Il est donc fortement recommandé que les développeurs web ne s'attendent pas à un comportement uniforme concernant ce style par défaut.</p> -<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('HTML4.01', 'struct/text.html#edef-ACRONYM', '<acronym>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td> </td> - </tr> - </tbody> -</table> +<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.acronym")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>L'élément HTML {{HTMLElement("abbr")}}</li> + <li>L'élément HTML <a href="/fr/docs/Web/HTML/Element/abbr"><code><abbr></code></a></li> </ul> diff --git a/files/fr/web/html/element/address/index.html b/files/fr/web/html/element/address/index.html index 2ac2eaa488..e89c7c69f3 100644 --- a/files/fr/web/html/element/address/index.html +++ b/files/fr/web/html/element/address/index.html @@ -2,44 +2,84 @@ title: '<address> : l''élément d''adresse de contact' slug: Web/HTML/Element/address tags: + - Address + - Author + - Contact + - Contact Information - Element + - Email + - Email Address - HTML + - HTML sections + - HTML:Flow content + - HTML:Palpable Content - Reference - Web translation_of: Web/HTML/Element/address +browser-compat: html.elements.address --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><address></code></strong> indique des informations de contact pour une personne, un groupe de personnes ou une organisation.</p> +<p class="summary">L'élément HTML <strong><code><address></code></strong> indique des informations de contact pour une personne, un groupe de personnes ou une organisation.</p> <div>{{EmbedInteractiveExample("pages/tabbed/address.html", "tabbed-standard")}}</div> -<p 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> !</p> - <p>L'information de contact fournie via cet élément peut prendre n'importe quelle forme pertinente : ce peut être une adresse physique, une URL, une adresse électronique, un numéro de téléphone, des coordonnées géographiques, etc. Ces informations devraient contenir le nom de la personne, du groupe de personne ou de l'organisation à laquelle le contact fait référence.</p> -<p>Cet élément peut être employé dans un élément {{HTMLElement("article")}} ou faire référence à l'ancêtre {{HTMLElement("body")}} ; dans ce dernier cas, cela s'applique au document entier.</p> +<p>Cet élément peut être employé dans un élément <a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a> pour indiquer la personne qui écrit l'article ou être utilisé dans l'en-tête de la page pour fournir une adresse d'entreprise.</p> +<table class="properties"> + <tbody> + <tr> + <th scope="row"><dfn><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></dfn></th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, mais sans élément <code><address></code> inclus, sans contenu de titre (<a href="/fr/docs/Web/HTML/Element/hgroup"><code><hgroup></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h1></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h2></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h3></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h4></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h5></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h6></code></a>), sans contenu de section (<a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a>, <a href="/fr/docs/Web/HTML/Element/aside"><code><aside></code></a>, <a href="/fr/docs/Web/HTML/Element/section"><code><section></code></a>, <a href="/fr/docs/Web/HTML/Element/nav"><code><nav></code></a>), et sans <a href="/fr/docs/Web/HTML/Element/header"><code><header></code></a> ou élément <a href="/fr/docs/Web/HTML/Element/footer"><code><footer></code></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 un <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_de_flux">contenu de flux</a> mais pas d'éléments <code><address></code>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Aucun rôle correspondant</a></td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>. Avant Gecko 2.0 (Firefox 4), Gecko implémentait cet élément en utilisant l'interface <a href="/fr/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a>.</td> + </tr> + </tbody> +</table> -<h2 id="Attributs">Attributs</h2> +<h2 id="attributes">Attributs</h2> -<p>Cet élément n'a pas d'autres attributs que les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>, communs à tous les éléments.</p> +<p>Cet élément n'a pas d'autres attributs que les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>, communs à tous les éléments.</p> -<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> +<h2 id="usage_notes">Notes d'utilisation</h2> <ul> - <li>Pour représenter une adresse arbitraire, qui n'est pas relative à l'information de contact, on utilisera l'élément {{HTMLElement("p")}} plutôt que l'élément <code><address></code>.</li> - <li>Cet élément ne doit pas contenir plus d'informations que l'information de contact, par exemple une date de publication (qui appartiendrait à l'élément {{HTMLElement("time")}}).</li> - <li>Typiquement un élément <code><address></code> peut être placé dans l'élément {{HTMLElement("footer")}} de la section courante, s'il y en a une.</li> + <li>Pour représenter une adresse arbitraire, qui n'est pas relative à l'information de contact, on utilisera l'élément <a href="/fr/docs/Web/HTML/Element/p"><code><p></code></a> plutôt que l'élément <code><address></code>.</li> + <li>Cet élément ne doit pas contenir plus d'informations que l'information de contact, par exemple une date de publication (qui appartiendrait à l'élément <a href="/fr/docs/Web/HTML/Element/time"><code><time></code></a>).</li> + <li>Typiquement un élément <code><address></code> peut être placé dans l'élément <a href="/fr/docs/Web/HTML/Element/footer"><code><footer></code></a> de la section courante, s'il y en a une.</li> </ul> -<h2 id="Exemples">Exemples</h2> - -<h3 id="HTML">HTML</h3> +<h2 id="example">Exemple</h2> <pre class="brush: html"><address> - Vous pouvez contacter l'auteur à l'adresse <a href="http://www.undomaine.com/contact">www.undomaine.com</a>.<br> - Si vous relevez quelques bogues que ce soient, merci de contacter <a href="mailto:webmaster@somedomain.com">le webmaster</a>.<br> + Vous pouvez contacter l'auteur à l'adresse + <a href="http://www.undomaine.com/contact">www.undomaine.com</a>.<br> + Si vous relevez quelques bogues que ce soient, merci de contacter + <a href="mailto:webmaster@somedomain.com">le webmaster</a>.<br> Vous pouvez aussi venir nous voir :<br> Mozilla Foundation<br> 1981 Landings Drive<br> @@ -49,79 +89,23 @@ translation_of: Web/HTML/Element/address </address> </pre> -<h3 id="Résultat">Résultat</h3> +<h3 id="result">Résultat</h3> -<p>{{EmbedLiveSample("Exemple")}}</p> +<p>{{EmbedLiveSample("example", "100%", 190)}}</p> -<p>Bien que le rendu par défaut du texte de l'élément <code><address></code> utilise le même style par défaut que les éléments {{HTMLElement("i")}} ou {{HTMLElement("em")}}, il est plus approprié d'utiliser cet élément lorsque l'on traite d'informations de contact, étant donné qu'il apporte des informations sémantiques supplémentaires.</p> -<h2 id="Résumé_technique">Résumé technique</h2> +<p>Bien que le rendu par défaut du texte de l'élément <code><address></code> utilise le même style par défaut que les éléments <a href="/fr/docs/Web/HTML/Element/i"><code><i></code></a> ou <a href="/fr/docs/Web/HTML/Element/em"><code><em></code></a>, il est plus approprié d'utiliser cet élément lorsque l'on traite d'informations de contact, étant donné qu'il apporte des informations sémantiques supplémentaires.</p> -<table class="properties"> - <tbody> - <tr> - <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></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égorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, mais sans élément <code><address></code> inclus, sans contenu de titre ({{HTMLElement("hgroup")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}), sans contenu de section ({{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}), et sans {{HTMLElement("header")}} ou élément {{HTMLElement("footer")}}.</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 un <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a> mais pas d'éléments <code><address></code>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Aucun.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLElement")}}. Avant Gecko 2.0 (Firefox 4), Gecko implémentait cet élément en utilisant l'interface {{domxref("HTMLSpanElement")}}.</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('HTML WHATWG', 'semantics.html#the-address-element', '<address>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'sections.html#the-address-element', '<address>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.6', '<address>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td> </td> - </tr> - </tbody> -</table> +<h2 id="specifications">Spécifications</h2> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<p>{{Specifications}}</p> -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<p>{{Compat("html.elements.address")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>Les autres éléments liés aux sections d'un document : {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("header")}} ;</li> - <li class="last"><a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Sections et titres d'un document HTML5</a></li> + <li>Les autres éléments liés aux sections d'un document : <a href="/fr/docs/Web/HTML/Element/body"><code><body></code></a>, <a href="/fr/docs/Web/HTML/Element/nav"><code><nav></code></a>, <a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a>, <a href="/fr/docs/Web/HTML/Element/aside"><code><aside></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h1></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h2></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h3></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h4></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h5></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h6></code></a>, <a href="/fr/docs/Web/HTML/Element/hgroup"><code><hgroup></code></a>, <a href="/fr/docs/Web/HTML/Element/footer"><code><footer></code></a>, <a href="/fr/docs/Web/HTML/Element/section"><code><section></code></a>, <a href="/fr/docs/Web/HTML/Element/header"><code><header></code></a> ;</li> + <li class="last"><a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Sections et titres d'un document HTML5</a></li> </ul> diff --git a/files/fr/web/html/element/applet/index.html b/files/fr/web/html/element/applet/index.html index 2515ada501..1a0fb83e01 100644 --- a/files/fr/web/html/element/applet/index.html +++ b/files/fr/web/html/element/applet/index.html @@ -1,64 +1,97 @@ --- -title: '<applet> : l''élément d''applet Java embarqué' +title: "<applet> : l'élément d'applet Java embarqué" slug: Web/HTML/Element/applet tags: - Element - HTML - - Obsolete + - Java + - Deprecated - Reference - Web + - applet translation_of: Web/HTML/Element/applet --- -<div>{{HTMLRef}}{{obsolete_header}}</div> +<div>{{HTMLRef}}</div> -<div class="blockIndicator warning"> -<p><strong>Attention ! </strong>Cet élément a été retiré à partir de <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1279218">Gecko 56</a>, de <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=470301">Chrome 47</a> et le retrait est à l'étude pour <a href="https://bugs.webkit.org/show_bug.cgi?id=157926">WebKit</a> et <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11946645/">Edge</a>.</p> +<div class="notecard deprecated"> + <p><b>Obsolète</b></p> + <p>Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.</p> </div> -<p>L'élément HTML <strong><code><applet></code></strong>, pour les applets, définit l'intégration d'une applet Java. Cet élément est désormais déprécié en faveur de {{HTMLElement("object")}}.</p> +<div class="notecard warning"> + <p><b>Attention !</b></p> + <p>Cet élément a été retiré à partir de <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1279218">Gecko 56</a>, de <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=470301">Chrome 47</a> et le retrait est à l'étude pour <a href="https://bugs.webkit.org/show_bug.cgi?id=157926">WebKit</a> et <a href="https://developer.microsoft.com/fr/microsoft-edge/platform/issues/11946645/">Edge</a>.</p> +</div> + +<p class="summary">L'élément <strong><code><applet></code></strong>, pour les applets, définit l'intégration d'un applet Java. Cet élément est désormais déprécié en faveur de <a href="/fr/docs/Web/HTML/Element/object"><code><object></code></a>.</p> <p>L'utilisation d'applets Java sur le Web est dépréciée, la plupart des navigateurs ne prennent plus en charge les plugins Java.</p> -<h2 id="Attributs">Attributs</h2> +<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 de 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#embedded_content">contenu intégré</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content">contenu interactif</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Zéro ou plusieurs <a href="/fr/docs/Web/HTML/Element/param"><code><param></code></a> suivi d'un contenu <a href="/fr/docs/Web/Guide/HTML/Content_categories#transparent_content_model">transparent</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 du <a href="/fr/docs/Web/Guide/HTML/Content_categories#embedded_content">contenu intégré</a>.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><code>HTMLAppletElement</code> (supprimé)</td> + </tr> + </tbody> +</table> + +<h2 id="attributes">Attributs</h2> -<p>Cet élément peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +<p>Cet élément peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> <dl> - <dt>{{htmlattrdef("align")}}</dt> - <dd>Cet attribut est utilisé pour positionner l'applet sur la page en fonction du contenu qui l'entoure. La spécification HTML 4.01 définit l'utilisation des valeurs <code>bottom</code> (en bas), <code>left</code> (à gauche), <code>middle</code> (au milieu), <code>right</code> (à droite), et <code>top</code> (en haut), tandis que Microsoft et Netscape supporteraient également les valeurs <strong>absbottom</strong>, <strong>absmiddle</strong>, <strong>baseline</strong>, <strong>center</strong>, et <strong>texttop</strong>.</dd> - <dt>{{htmlattrdef("alt")}}</dt> - <dd>Cet attribut génère un texte alternatif à afficher pour les navigateurs ne supportant pas Java. Il est à noter que le contenu de l'élément <code><applet></code> peut être également restitué comme du texte alternatif dans certains cas.</dd> - <dt>{{htmlattrdef("archive")}}</dt> - <dd>Cet attribut fait référence à une version archivée ou compressée de l'applet et des fichiers classes associés, ce qui peut aider à réduire le temps de téléchargement.</dd> - <dt>{{htmlattrdef("code")}}</dt> - <dd>Cet attribut définit l'URL du fichier classe de l'applet qui doit être chargé et exécuté. Les noms de fichiers pour les applets sont définis avec une extension en .class. L'URL définie par cet attribut peut être relative par rapport à l'attribut <code>codebase</code>.</dd> - <dt>{{htmlattrdef("codebase")}}</dt> - <dd>Cet attribut donne une URL absolue ou relative du répertoire où les fichiers classes de l'applet (déclarés dans l'attribut <code>code</code>) doivent être placés.</dd> - <dt>{{htmlattrdef("datafld")}}</dt> - <dd>Cet attribut, supporté par Internet Explorer à partir de sa version 4, définit le nom de colonne attribué aux objets de données fournis par les données attachées. Cet attribut peut être utilisé pour définir les différents éléments {{HTMLElement("param")}} envoyés à l'applet Java.</dd> - <dt>{{htmlattrdef("datasrc")}}</dt> - <dd>Comme l'attribut <code>datafld</code>, cet attribut est utilisé pour les données attachées sous Internet Explorer 4. Il indique un identifiant pour l'objet définissant la source des données qui seront attachées aux élément {{HTMLElement("param")}} associés à l'applet.</dd> - <dt>{{htmlattrdef("height")}}</dt> - <dd>Cet attribut définit la hauteur dont l'applet à besoin, en pixels.</dd> - <dt>{{htmlattrdef("hspace")}}</dt> - <dd>Cet attribut définit l'espace horizontal supplémentaire qui doit être réservé à côté de l'applet, en pixels.</dd> - <dt>{{htmlattrdef("mayscript")}}</dt> - <dd>Cet attribut, concerné par l'implémentation effectuée dans Netscape, permet l'accès à l'applet par les scripts contenus dans le document.</dd> - <dt>{{htmlattrdef("name")}}</dt> - <dd>Cet attribut donne un nom à l'applet afin qu'elle soit possiblement identifiée par d'autres ressources, notamment les scripts.</dd> - <dt>{{htmlattrdef("object")}}</dt> - <dd>Cet attribut définit l'URL d'une représentation de l'applet.</dd> - <dt>{{htmlattrdef("src")}}</dt> - <dd>Dans Internet Explorer 4 et ses versions ultérieures, cet attribut définit une URL pour le fichier associé à l'applet. La signification de cet attribut n'est pas claire et ne fait pas partie du standard HTML.</dd> - <dt>{{htmlattrdef("vspace")}}</dt> - <dd>Cet attribut définit l'espace supplémentaire qui doit être réservé en haut et en bas de l'applet, en pixels.</dd> - <dt>{{htmlattrdef("width")}}</dt> - <dd>Cet attribut définit la largeur, en pixels, dont l'applet a besoin</dd> + <dt><strong id="attr-align"><code>align</code></strong> {{deprecated_inline}}</dt> + <dd>Cet attribut est utilisé pour positionner l'applet sur la page en fonction du contenu qui l'entoure. La spécification HTML 4.01 définit l'utilisation des valeurs <code>bottom</code> (en bas), <code>left</code> (à gauche), <code>middle</code> (au milieu), <code>right</code> (à droite), et <code>top</code> (en haut), tandis que Microsoft et Netscape supporteraient également les valeurs <code>absbottom</code>, <code>absmiddle</code>, <code>baseline</code>, <code>center</code>, et <code>texttop</code>.</dd> + <dt><strong id="attr-alt"><code>alt</code></strong> {{deprecated_inline}}</dt> + <dd>Cet attribut génère un texte alternatif à afficher pour les navigateurs ne supportant pas Java. Il est à noter que le contenu de l'élément <code><applet></code> peut être également restitué comme du texte alternatif dans certains cas.</dd> + <dt><strong id="attr-archive"><code>archive</code></strong> {{deprecated_inline}}</dt> + <dd>Cet attribut fait référence à une version archivée ou compressée de l'applet et des fichiers classes associés, ce qui peut aider à réduire le temps de téléchargement.</dd> + <dt><strong id="attr-code"><code>code</code></strong> {{deprecated_inline}}</dt> + <dd>Cet attribut définit l'URL du fichier classe de l'applet qui doit être chargé et exécuté. Les noms de fichiers pour les applets sont définis avec une extension en .class. L'URL définie par cet attribut peut être relative par rapport à l'attribut <code>codebase</code>.</dd> + <dt><strong id="attr-codebase"><code>codebase</code></strong> {{deprecated_inline}}</dt> + <dd>Cet attribut donne une URL absolue ou relative du répertoire où les fichiers classes de l'applet (déclarés dans l'attribut <code>code</code>) doivent être placés.</dd> + <dt><strong id="attr-datafld"><code>datafld</code></strong> {{deprecated_inline}}</dt> + <dd>Cet attribut, supporté par Internet Explorer à partir de sa version 4, définit le nom de colonne attribué aux objets de données fournis par les données attachées. Cet attribut peut être utilisé pour définir les différents éléments <a href="/fr/docs/Web/HTML/Element/param"><code><param></code></a> envoyés à l'applet Java.</dd> + <dt><strong id="attr-datasrc"><code>datasrc</code></strong> {{deprecated_inline}}</dt> + <dd>Comme l'attribut <code>datafld</code>, cet attribut est utilisé pour les données attachées sous Internet Explorer 4. Il indique un identifiant pour l'objet définissant la source des données qui seront attachées aux éléments <a href="/fr/docs/Web/HTML/Element/param"><code><param></code></a> associés à l'applet.</dd> + <dt><strong id="attr-height"><code>height</code></strong> {{deprecated_inline}}</dt> + <dd>Cet attribut définit la hauteur dont l'applet à besoin, en pixels.</dd> + <dt><strong id="attr-hspace"><code>hspace</code></strong> {{deprecated_inline}}</dt> + <dd>Cet attribut définit l'espace horizontal supplémentaire qui doit être réservé à côté de l'applet, en pixels.</dd> + <dt><strong id="attr-mayscript"><code>mayscript</code></strong> {{deprecated_inline}}</dt> + <dd>Cet attribut, concerné par l'implémentation effectuée dans Netscape, permet l'accès à l'applet par les scripts contenus dans le document.</dd> + <dt><strong id="attr-name"><code>name</code></strong> {{deprecated_inline}}</dt> + <dd>Cet attribut donne un nom à l'applet afin qu'elle soit possiblement identifiée par d'autres ressources, notamment les scripts.</dd> + <dt><strong id="attr-object"><code>object</code></strong> {{deprecated_inline}}</dt> + <dd>Cet attribut définit l'URL d'une représentation de l'applet.</dd> + <dt><strong id="attr-src"><code>src</code></strong> {{deprecated_inline}}</dt> + <dd>Dans Internet Explorer 4 et ses versions ultérieures, cet attribut définit une URL pour le fichier associé à l'applet. La signification de cet attribut n'est pas claire et ne fait pas partie du standard HTML.</dd> + <dt><strong id="attr-vspace"><code>vspace</code></strong> {{deprecated_inline}}</dt> + <dd>Cet attribut définit l'espace supplémentaire qui doit être réservé en haut et en bas de l'applet, en pixels.</dd> + <dt><strong id="attr-width"><code>width</code></strong> {{deprecated_inline}}</dt> + <dd>Cet attribut définit la largeur, en pixels, dont l'applet a besoin</dd> </dl> -<h2 id="Exemples">Exemples</h2> +<h2 id="example">Exemple</h2> -<h3 id="HTML">HTML</h3> +<h3 id="html">HTML</h3> <pre class="brush: html"><applet code="game.class" align="left" archive="game.zip" height="250" width="350"> <param name="difficulte" value="facile"> @@ -66,82 +99,18 @@ translation_of: Web/HTML/Element/applet </applet> </pre> -<h3 id="Résultat">Résultat</h3> +<h3 id="result">Résultat</h3> -<p>{{EmbedLiveSample("Exemples","100%", 300)}}</p> +<p>{{EmbedLiveSample("example","100%", 30)}}</p> -<h2 id="Résumé_technique">Résumé technique</h2> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Catégories de contenu</th> - <td><a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_intégré">contenu intégré</a>, <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_interactif">contenu interactif</a>, <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td>Zéro ou plusieurs {{HTMLElement("param")}} suivi d'un contenu <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Modèle_de_contenu_transparent">transparent</a>.</td> - </tr> - <tr> - <th scope="row">Omission de balise</th> - <td>Aucune. La balise de début et la balise de fin sont obligatoires.</td> - </tr> - <tr> - <th scope="row">Parents autorisés</th> - <td>Tout élément qui accepte du <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_intégré">contenu intégré</a>.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{DOMxRef("HTMLAppletElement")}}</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("HTML WHATWG", "obsolete.html#applet", "<applet>")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td>Retrait de l'élément, seule une note rappelle qu'il a existé.</td> - </tr> - <tr> - <td>{{SpecName("HTML5.2", "obsolete.html#the-applet-element", "<applet>")}}</td> - <td>{{Spec2("HTML5.2")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("HTML5.1", "obsolete.html#the-applet-element", "<applet>")}}</td> - <td>{{Spec2("HTML5.1")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "obsolete.html#the-applet-element", "<applet>")}}</td> - <td>{{Spec2("HTML5 W3C")}}</td> - <td>L'élément est rendu obsolète.</td> - </tr> - <tr> - <td>{{SpecName("HTML4.01", "struct/objects.html#h-13.4", "<applet>")}}</td> - <td>{{Spec2("HTML4.01")}}</td> - <td>Élément déprécié et remplacé par {{HTMLElement("object")}}</td> - </tr> - </tbody> -</table> +<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.applet")}}</p> +<p>{{Compat}}</p> -<h2 id="Notes">Notes</h2> +<h2 id="notes">Notes</h2> -<p>La spécification W3C désapprouve l'utilisation de l'élément <code><applet></code> et conseille l'utilisation de l'élément {{HTMLElement("object")}}. Pour HTML 4.01 cet élément est déprécié et est devenu entièrement obsolète sous HTML5.</p> +<p>La spécification W3C désapprouve l'utilisation de l'élément <code><applet></code> et conseille l'utilisation de l'élément <a href="/fr/docs/Web/HTML/Element/object"><code><object></code></a>. Pour HTML 4.01 cet élément est déprécié et est devenu entièrement obsolète sous HTML5.</p> diff --git a/files/fr/web/html/element/area/index.html b/files/fr/web/html/element/area/index.html index bf162fa477..d3e10ca3f6 100644 --- a/files/fr/web/html/element/area/index.html +++ b/files/fr/web/html/element/area/index.html @@ -1,184 +1,153 @@ --- -title: <area> +title: '<area> : l''élément de zone' slug: Web/HTML/Element/area tags: + - Content - Element - HTML + - HTML:Flow content + - HTML:Phrasing content - Multimedia - Reference - Web translation_of: Web/HTML/Element/area +browser-compat: html.elements.area --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><area></code></strong> définit une zone particulière d'une image et peut lui associer un {{Glossary("Hyperlink", "lien hypertexte")}}. Cet élément n'est utilisé qu'au sein d'un élément {{HTMLElement("map")}}.</p> +<p class="summary">L'élément HTML <strong><code><area></code></strong> définit une zone particulière d'une image et peut lui associer un <a href="/fr/docs/Glossary/Hyperlink">lien hypertexte</a>. Cet élément n'est utilisé qu'au sein d'un élément <a href="/fr/docs/Web/HTML/Element/map"><code><map></code></a>.</p> <div>{{EmbedInteractiveExample("pages/tabbed/area.html", "tabbed-taller")}}</div> -<p 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> !</p> +<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#contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a></td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Aucun, cet élément est un <a href="/fr/docs/Glossary/Empty_element">élément vide</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 acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>. L'élément <code><area></code> doit avoir un élément <a href="/fr/docs/Web/HTML/Element/map"><code><map></code></a> parmi ses ancêtres mais ce dernier n'a pas besoin d'être son parent direct.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><a href="https://w3c.github.io/aria/#link"><code>link</code></a> lorsque l'attribut <a href="#attr-href"><code>href</code></a> est présent, sinon <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">aucun rôle correspondant</a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLAreaElement"><code>HTMLAreaElement</code></a></td> + </tr> + </tbody> +</table> -<h2 id="Attributs">Attributs</h2> +<h2 id="attributes">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("alt")}}</dt> - <dd>Un texte alternatif que les navigateurs doivent afficher afin de remplacer l'image si elle ne peut pas être affichée. Le texte doit être phrasé de façon à offrir les mêmes choix qui auraient été offerts par l'image. En HTML4, cet attribut est obligatoire mais peut prendre la valeur "" (la chaîne de caractères vide). En HTML5, cet attribut est requis uniquement si l'attribut <strong><code>href</code></strong> est utilisé.</dd> - <dt>{{htmlattrdef("coords")}}</dt> - <dd>A set of values specifying the coordinates of the hot-spot region. The number and meaning of the values depend upon the value specified for the <strong>shape</strong> attribute.</dd> - <dd> - <ul> - <li><code>rect</code> or rectangle: the <strong>coords</strong> value is two x,y pairs: left, top, right, bottom.</li> - <li><code>circle</code>: the value is <code>x,y,r</code> where <code>x,y</code> is a pair specifying the center of the circle and <code>r</code> is a value for the radius.</li> - <li><code>poly</code> or polygon: the value is a set of x,y pairs for each point in the polygon: <code>x1,y1,x2,y2,x3,y3,</code> and so on.</li> - </ul> - In HTML4, the values are numbers of pixels or percentages, if a percent sign (%) is appended; in HTML5, the values are numbers of CSS pixels.</dd> - <dt>{{htmlattrdef("href")}}</dt> - <dd>Le lien hypertexte porté par la zone d'intérêt. Ce doit être une URL valide. En HTML4, l'un des deux attributs <strong>href</strong> ou <strong>nohref</strong> doit être présent. En HTML5, cet attribut peut être absent et dans ce cas, la zone d'intérêt ne représente pas de lien hypertexte.</dd> - <dt>{{htmlattrdef("hreflang")}} {{HTMLVersionInline("5")}}</dt> - <dd>Indique la langue de la ressource liée. Les valeurs que peut prendre cet attribut sont définis dans le <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>. Cet attribut ne doit être utilisé que si l'attribut <strong>href</strong> est présent.</dd> - <dt>{{htmlattrdef("ping")}} {{HTMLVersionInline("5")}}</dt> - <dd>Cet attribut contient une liste d'URL séparées par des espaces vers lesquelles sont envoyées des requêtes HTTP {{HTTPMethod("POST")}} dont le corps vaut <code>PING</code> lors du clic sur le lien. Les requêtes sont envoyées en arrière-plan. Cet attribut est généralement utilisé à des fins de pistage.</dd> - <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt> - <dd>Une chaîne de caractères qui indique le référent (<em>referrer</em>) à 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>'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")}} {{HTMLVersionInline("5")}}</dt> - <dd>Pour les ancres contenant l'attribut <code><strong>href</strong></code>, cet attribut définit la relation entre l'objet ciblé et l'objet lié. La valeur est une liste des <a href="/fr/docs/Web/HTML/Types_de_lien">différentes relations</a> dont les valeurs sont séparées par des espaces. Les valeurs et leurs significations peuvent être enregistrées par une autorité jugée utile par l'auteur du document. La valeur par défaut est la relation vide. Cet attribut ne doit être utilisé seulement si l'attribut <code><strong>href</strong></code> est présent.</dd> - <dt>{{htmlattrdef("shape")}}</dt> - <dd>La forme de la zone d'intérêt. Les spécifications HTML5 et HTML4 définissent les valeurs <code>rect</code> (zone rectangulaire), <code>circle</code> (zone circulaire), <code>poly</code> (zone polygonale) et <code>default</code> (indiquant toute la zone). Beacuoup de navigateurs, comme Internet Explorer 4 et ultérieur, supportent les valeurs <code>circ</code>, <code>polygon</code> et <code>rectangle</code> pour l'attribut <code><strong>shape</strong></code>. Ces valeurs sont {{Non-standard_inline}}.</dd> - <dt>{{htmlattrdef("target")}}</dt> - <dd>Cet attribut précise où afficher la ressource liée. En HTML4 c'est le nom (ou un mot-clé) d'un cadre. En HTML5, c'est le nom (ou le mot-clé) d'un <em>contexte de navigation</em> (un onglet, une fenêtre, ou une <code>frame</code> <em>inline).</em> Les mots-clés peuvent avoir les significations suivantes : - <ul> - <li><code>_self</code> : Charge la réponse dans le même cadre HTML4 ou dans le même contexte de navigation HTML5. Cette valeur est la valeur par défaut si l'attribut n'est pas précisé.</li> - <li><code>_blank </code>: Charge la réponse dans une nouvelle fenêtre (sans nom) avec HTML4 ou dans un nouveau contenu de navigation HTML5 (sans nom).</li> - <li><code>_parent</code> : Charge la réponse dans le même cadre que le parent du cadre de l'élément actuel en HTML4. En HTML5 on a la même situation avec le contexte de navigation. S'il n'y pas de parent, cette valeur aura le même rôle que la valeur <code>_self</code>.</li> - <li><code>_top </code>: En HTML4 la réponse sera chargée dans toute la fenêtre d'origine annulant ainsi les autres cadres. En HTML5 la réponse sera chargée dans le contexte de navigation avec le plus haut niveau (autrement dit l'ancêtre du contexte actuel qui n'a pas de parent). Si le contexte actuel n'a pas de parent alors cette valeur aura le même effet que la valeur <code>_self</code>.</li> - </ul> - - <p>Cet attribut doit uniqument être utilisé si l'attribut <code><strong>href</strong></code> est présent.</p> - </dd> + <dt><strong id="attr-alt"><code>alt</code></strong></dt> + <dd>Une chaîne de texte alternative à afficher sur les navigateurs qui n'affichent pas les images. Le texte doit être formulé de manière à offrir à l'utilisateur le même type de choix que l'image lorsqu'elle est affichée sans le texte alternatif. Cet attribut est requis uniquement si l'attribut <a href="#attr-href"><code>href</code></a> est utilisé.</dd> + <dt><strong id="attr-coords"><code>coords</code></strong></dt> + <dd>L'attribut <code>coords</code> détaille les coordonnées de l'attribut <code><a href="#attr-shape">shape</a></code> en taille, forme et placement d'un élément <code><area></code>. + <ul> + <li><code>rect</code> : la valeur est <code><var>x1,y1,x2,y2</var></code>. La valeur spécifie les coordonnées du coin supérieur gauche et inférieur droit du rectangle. + <p>Par exemple : <code><area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Mozilla"></code> Les coordonnées dans l'exemple ci-dessus spécifient : 0,0 comme le coin supérieur gauche et 253,27 comme le coin inférieur droit du rectangle.</p> + </li> + <li><code>cercle</code> : la valeur est <code><var>x,y,radius</var></code>. La valeur spécifie les coordonnées du centre du cercle et du rayon. + <p>Par exemple : <code><area shape="circle" coords="130,136,60" href="#" target="_blank" alt="MDN"></code>.</p> + </li> + <li><code>poly</code> : la valeur est <code><var>x1,y1,x2,y2,...,xn,yn</var></code>. La valeur spécifie les coordonnées des bords du polygone. Si la première et la dernière paire de coordonnées ne sont pas les mêmes, le navigateur ajoutera la dernière paire de coordonnées pour fermer le polygone.</li> + <li><code>default</code> : définit la région entière.</li> + </ul> + Les valeurs sont exprimées en nombre de pixels CSS.</dd> + <dt><strong id="attr-download"><code>download</code></strong></dt> + <dd>Cet attribut, s'il est présent, indique que l'auteur souhaite que l'hyperlien soit utilisé pour télécharger une ressource. Voir <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> pour une description complète de l'attribut <a href="/fr/docs/Web/HTML/Element/a#attr-download"><code>download</code></a>.</dd> + <dt><strong id="attr-href"><code>href</code></strong></dt> + <dd>Le lien hypertexte porté par la zone d'intérêt. Ce doit être une URL valide. Cet attribut peut être absent et dans ce cas, la zone d'intérêt ne représente pas de lien hypertexte.</dd> + <dt><strong id="attr-hreflang"><code>hreflang</code></strong></dt> + <dd>Cet attribut indique la langue du contenu vers lequel le lien renvoie. Les valeurs autorisées pour cet attribut sont définies par <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>. Cet attribut doit uniquement être utilisé lorsque <code>href</code> est présent.</dd> + <dt><strong id="attr-ping"><code>ping</code></strong></dt> + <dd>Cet attribut contient une liste d'URL séparées par des espaces vers lesquelles sont envoyées des requêtes HTTP <a href="/fr/docs/Web/HTTP/Methods/POST"><code>POST</code></a> dont le corps vaut <code>PING</code> lors du clic sur le lien. Les requêtes sont envoyées en arrière-plan. Cet attribut est généralement utilisé à des fins de pistage.</dd> + <dt><strong id="attr-referrerpolicy"><code>referrerpolicy</code></strong> {{experimental_inline}}</dt> + <dd>Une chaîne de caractères qui indique le référent (<em>referrer</em>) à 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>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><strong id="attr-rel"><code>rel</code></strong></dt> + <dd>Pour les ancres contenant l'attribut <code><strong>href</strong></code>, cet attribut définit la relation entre l'objet ciblé et l'objet lié. La valeur est une liste des <a href="/fr/docs/Web/HTML/Link_types">différentes relations</a> dont les valeurs sont séparées par des espaces. Les valeurs et leurs significations peuvent être enregistrées par une autorité jugée utile par l'auteur du document. La valeur par défaut est la relation vide. Cet attribut doit uniquement être utilisé si l'attribut <a href="#attr-href"><code>href</code></a> est présent.</dd> + <dt><strong id="attr-shape"><code>shape</code></strong></dt> + <dd>La forme de la zone d'intérêt. Les spécifications HTML5 et HTML4 définissent les valeurs <code>rect</code> (zone rectangulaire), <code>circle</code> (zone circulaire), <code>poly</code> (zone polygonale) et <code>default</code> (indiquant toute la zone). Beacuoup de navigateurs, comme Internet Explorer 4 et ultérieur, supportent les valeurs <code>circ</code>, <code>polygon</code> et <code>rectangle</code> pour l'attribut <code>shape</code>, mais ces valeurs ne sont pas standard.</dd> + <dt><strong id="attr-target"><code>target</code></strong></dt> + <dd>Cet attribut dans quel <em>contexte de navigation</em> afficher la ressource liée. Les mots-clés peuvent avoir les significations suivantes : + <ul> + <li><code>_self</code> (valeur par défaut) : Charge la réponse dans le contexte de navigation actuel.</li> + <li><code>_blank </code>: Charge la réponse dans un nouveau contexte de navigation (sans nom).</li> + <li><code>_parent</code> : Charge la réponse dans le contexte de navigation parent. Si la page courante n'est pas incluse via une <i>frame</i>, cette valeur agit comme <code>_self</code>.</li> + <li><code>_top</code> : Charge la réponse dans le contexte de navigation avec le plus haut niveau (autrement dit l'ancêtre du contexte actuel qui n'a pas de parent). Si le contexte actuel n'a pas de parent alors cette valeur aura le même effet que la valeur <code>_self</code>.</li> + </ul> + + <p>Cet attribut doit uniquement être utilisé si l'attribut <a href="#attr-href"><code>href</code></a> est présent.</p> + <div class="notecard note"> + <p><b>Note :</b></p> + <p>La définition de <code>target="_blank"</code> sur les éléments <code><area></code> fournit implicitement le même comportement <code>rel</code> que la définition de <code><a href="/fr/docs/Web/HTML/Link_types/noopener">rel="noopener"</a></code> qui ne définit pas <code>window.opener</code>. Voir la <a href="#browser_compatibility">compatibilité des navigateurs</a> pour les informations sur son support.</p> + </div> + </dd> </dl> -<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3> +<h3 id="deprecated_attributes">Attributs dépréciés ou obsolètes</h3> <dl> - <dt>{{htmlattrdef("accesskey")}} {{HTMLVersionInline("4")}} seulement, {{obsolete_inline("5.0")}}</dt> - <dd>Définit un raccourci clavier pour cet élément. Appuyer sur la touche ALT (ou une autre touche similaire) et sur la touche définie par l'attribut sélectionnera l'action associée à cette séquence. Il est conseillé de ne pas utiliser les combinaisons de touches déjà utilisées par les navigateurs. Cet attribut est global depuis HTML5.</dd> - <dt>{{htmlattrdef("name")}} {{HTMLVersionInline("4")}} seulement, {{obsolete_inline("5.0")}}</dt> - <dd>Définit un nom pour la zone sur laquelle on peut cliquer afin que cet élément puisse être interprété par les navigateurs plus anciens.</dd> - <dt>{{htmlattrdef("nohref")}} {{HTMLVersionInline("4")}} seulement, {{obsolete_inline("5.0")}}</dt> - <dd>Indique une absence d'hyperlien pour la zone d'intérêt. Cet attribut doit être présent si <strong>href</strong> ne l'est pas et <em>vice versa</em>. - <div class="note"> - <p><strong>Note d'utilisation : </strong>Cet attribut est obsolète en HTML5, ne pas utiliser l'attribut <strong>href</strong> suffit.</p> - </div> - </dd> - <dt>{{htmlattrdef("tabindex")}} {{HTMLVersionInline("4")}} seulement, {{obsolete_inline("5.0")}}</dt> - <dd>Une valeur numérique définissant l'ordre de la zone d'intérêt parmi les différentes étiquettes. Cet attribut est un attribut universel avec HTML5.</dd> - <dt>{{htmlattrdef("type")}}{{obsolete_inline("5.1")}}</dt> - <dd>Cet attribut définit le type MIME de la cible du lien. Cet attribut a généralement une fonction indicative. Cependant les prochains navigateurs pourraient ajouter une petite icône pour les types multimédia. Voir <a href="https://www.w3.org/TR/html4/references.html#ref-MIMETYPES">http://www.w3.org/TR/html4/references.html#ref-MIMETYPES</a> pour une liste complète des types MIME reconnus. Cet attribut ne doit être utilisé que si l'attribut <code><strong>href</strong></code> est présent.</dd> + <dt><strong id="attr-name"><code>name</code></strong> {{deprecated_inline}}</dt> + <dd>Définit un nom pour la zone sur laquelle on peut cliquer afin que cet élément puisse être interprété par les navigateurs plus anciens.</dd> + <dt><strong id="attr-nohref"><code>nohref</code></strong> {{deprecated_inline}}</dt> + <dd>Indique une absence d'hyperlien pour la zone d'intérêt. Cet attribut doit être présent si <strong>href</strong> ne l'est pas et <em>vice versa</em>. + <div class="notecard note"> + <p><b>Note :</b></p> + <p>Cet attribut est obsolète en HTML5, ne pas utiliser l'attribut <code>href</code> suffit.</p> + </div> + </dd> + <dt><strong id="attr-tabindex"><code>tabindex</code></strong> {{deprecated_inline}}</dt> + <dd>Une valeur numérique définissant l'ordre de la zone d'intérêt parmi les différentes étiquettes. Cet attribut est un attribut universel avec HTML5.</dd> + <dt><strong id="attr-type"><code>type</code></strong> {{deprecated_inline}}</dt> + <dd>Sans effet car ignoré par les navigateurs.</dd> </dl> -<h2 id="Exemples">Exemples</h2> +<h2 id="example">Exemple</h2> <p>Dans cet exemple, la partie gauche est un lien vers une page et la partie droite est inactive.</p> -<h3 id="HTML">HTML</h3> - <pre class="brush: html"><map name="exemple-map-1"> - <area shape="rect" coords="0,0 200,200" href="https://developer.mozilla.org" target="_blank" alt="Page d'accueil MDN" /> - <area shape="default" /> + <area shape="rect" coords="0,0 200,200" href="https://developer.mozilla.org" target="_blank" alt="Page d'accueil MDN" /> + <area shape="default" /> </map> -<img usemap="#exemple-map-1" src="https://mdn.mozillademos.org/files/14546/map.png"> +<img usemap="#exemple-map-1" src="https://via.placeholder.com/350x150"> </pre> -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples","450","230")}}</p> - -<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/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a></td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td>Aucun, cet élément est un {{Glossary("élément vide ", "élément vide")}}.</td> - </tr> - <tr> - <th scope="row">Omission de balises</th> - <td>Cet élément doit avoir une balise de fin et ne pas avoir de balise de début.</td> - </tr> - <tr> - <th scope="row">Parents autorisés</th> - <td>Tout élément acceptant du <a href="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>. L'élément <code><area></code> doit avoir un élément {{HTMLElement("map")}} parmi ses ancêtres mais ce dernier n'a pas besoin d'être son parent direct.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Aucun.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLAreaElement")}}</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', 'referrerpolicy attribute')}}</td> - <td>{{Spec2('Referrer Policy')}}</td> - <td>Ajout de l'attribut <code>referrerpolicy</code>.</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'the-map-element.html#the-area-element', '<area>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-area-element', '<area>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '<area>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td> </td> - </tr> - </tbody> -</table> +<h3 id="result">Résultat</h3> -<h3 id="Notes">Notes</h3> +<p>{{EmbedLiveSample("example", "100%", "230")}}</p> -<ul> - <li>Dans les spécifications HTML des versions 3.2, 4.0, et 5, la balise de fermeture <code></area></code> est proscrite.</li> - <li>La spécification XHTML 1.0 demande l'utilisation d'une barre oblique avant le chevron fermant : <code><area /></code>.</li> - <li>Les attributs <code><strong>id</strong></code>, <code><strong>class</strong></code> et <code><strong>style</strong></code> ont la même signification que ceux qui avaient été définis dans la spécification HTML 4. Cependant cette spécification n'avait été définie que par Microsoft et Netscape.</li> - <li>Les navigateurs Netscape de niveau 1 n'arrivent pas à interpréter l'attribut <code><strong>target</strong></code> si celui-ci fait référence à des éléments <code><strong>frames</strong></code>.</li> - <li>HTML 3.2 définit seulement les attributs <code><strong>alt</strong></code>, <code><strong>coords</strong></code>, <code><strong>href</strong></code>, <code><strong>nohref</strong></code> et <code><strong>shape</strong></code>.</li> -</ul> +<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.area")}}</p> +<p>{{Compat}}</p> diff --git a/files/fr/web/html/element/article/index.html b/files/fr/web/html/element/article/index.html index fde2eb92dc..9ac036eac1 100644 --- a/files/fr/web/html/element/article/index.html +++ b/files/fr/web/html/element/article/index.html @@ -4,36 +4,67 @@ slug: Web/HTML/Element/article tags: - Element - HTML + - HTML sections - Reference - Web translation_of: Web/HTML/Element/article +browser-compat: html.elements.article --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><article></code></strong> représente du contenu autonome dans un document, une page, une application, ou un site. Ceci peut être un message sur un forum, un article de journal ou de magazine, une parution sur un blog, un commentaire d'utilisateur, un widget ou gadget interactif, ou tout autre élément de contenu indépendant. Ce contenu est prévu pour être distribué ou réutilisé indépendamment (par exemple dans un <a href="/fr/docs/Web/RSS/Premiers_pas/Syndication">flux de syndication</a>).</p> +<p class="summary">L'élément <strong><code><article></code></strong> représente une composition autonome dans un document, une page, une application ou un site, destinée à être distribuée ou réutilisée de manière indépendante (par exemple, dans le cadre d'une syndication). Exemples : un message de forum, un article de magazine ou de journal, ou un article de blog, une fiche produit, un commentaire soumis par un utilisateur, un widget ou gadget interactif, ou tout autre élément de contenu indépendant.</p> <div>{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}</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> +<p>Un document donné peut contenir plusieurs articles ; par exemple, sur un blog qui affiche le texte de chaque article l'un après l'autre au fur et à mesure que le lecteur fait défiler, chaque message sera contenu dans un élément <code><article></code>, avec éventuellement une ou plusieurs <code><section></code> à l'intérieur.</p> -<p>Un document donné peut tout à fait avoir plusieurs articles. On peut par exemple avoir un blog qui affiche le texte de chaque billet au fur et à mesure que le lecteur fait défiler le contenu. Chaque billet serait un élément <code><article></code> et les sections de ces billets des éléments {{HTMLElement("section")}}.</p> +<table class="properties"> + <tbody> + <tr> + <th scope="row"><dfn><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></dfn></th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#sectioning_content">contenu de section</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</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 acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a>. Un élément <code><article></code> ne doit pas être un descendant d'un élément <a href="/fr/docs/Web/HTML/Element/address"><code><address></code></a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Article_Role"><code>article</code></a></td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td><a href="https://w3c.github.io/aria/#application">application</a>, <a href="https://w3c.github.io/aria/#document">document</a>, <a href="https://w3c.github.io/aria/#feed">feed</a>, <a href="https://w3c.github.io/aria/#main">main</a>, <a href="https://w3c.github.io/aria/#none">none</a>, <a href="https://w3c.github.io/aria/#presentation">presentation</a>, <a href="https://w3c.github.io/aria/#region">region</a>.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>.</td> + </tr> + </tbody> +</table> -<h2 id="Attributs">Attributs</h2> +<h2 id="attributes">Attributs</h2> -<p>Cet élément n'a pas d'autres attributs que les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>, communs à tous les éléments.</p> +<p>Cet élément n'a pas d'autres attributs que les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>, communs à tous les éléments.</p> -<h2 id="Notes"><strong>Notes</strong></h2> +<h2 id="usage_notes">Notes d'utilisation</h2> <ul> - <li>Chaque <code><article></code> autonome, qui n'est pas imbriqué dans un autre élément <code><article></code>, devrait être identifié typiquement, en incluant un élément d'en-tête <code><header></code> qui comprendrait lui-même un élément de titre <code><h1></code> à <code><h6></code>.</li> - <li>Quand un élément <code><article></code> est imbriqué dans un autre, l'élément contenu représente un article relatif à l'élément contenant. Par exemple, les commentaires d'une parution de blog peuvent être un élément <code><article></code> inclus dans l'<code><article></code> représentant la parution en elle-même.</li> - <li>Des informations à propos de l'auteur d'un élément <code><article></code> peuvent être fournies au travers de l'élément {{HTMLElement("address")}}, mais cela ne s'applique pas aux éléments <code><article></code> imbriqués.</li> - <li>La date et l'heure de publication d'un élément <code><article></code> peuvent être donnés en utilisant l'attribut {{htmlattrxref("datetime", "time")}} d'un élément {{HTMLElement("time")}}. <em>Notez que l'attribut {{htmlattrxref("pubdate", "time")}} de {{HTMLElement("time")}} ne fait plus partie de la norme W3C HTML 5.</em></li> + <li>Chaque <code><article></code> autonome, qui n'est pas imbriqué dans un autre élément <code><article></code>, devrait être identifié typiquement, en incluant un élément de titre <code><h1></code> à <code><h6></code>.</li> + <li>Quand un élément <code><article></code> est imbriqué dans un autre, l'élément contenu représente un article relatif à l'élément contenant. Par exemple, les commentaires d'une parution de blog peuvent être un élément <code><article></code> inclus dans l'<code><article></code> représentant la parution en elle-même.</li> + <li>Des informations à propos de l'auteur d'un élément <code><article></code> peuvent être fournies au travers de l'élément <a href="/fr/docs/Web/HTML/Element/address"><code><address></code></a>, mais cela ne s'applique pas aux éléments <code><article></code> imbriqués.</li> + <li>La date et l'heure de publication d'un élément <code><article></code> peuvent être donnés en utilisant l'attribut <a href="/fr/docs/Web/HTML/Element/time#attr-datetime"><code>datetime</code></a> d'un élément <a href="/fr/docs/Web/HTML/Element/time"><code><time></code></a>. <em>Notez que l'attribut <a href="/fr/docs/Web/HTML/Element/time#attr-pubdate"><code>pubdate</code></a> de <a href="/fr/docs/Web/HTML/Element/time"><code><time></code></a> ne fait plus partie de la norme W3C HTML 5.</em></li> </ul> -<h2 id="Exemples">Exemples</h2> - -<h3 id="HTML">HTML</h3> +<h2 id="example">Exemple</h2> <pre class="brush: html"><article class="film_review"> <header> @@ -48,7 +79,7 @@ translation_of: Web/HTML/Element/article <footer> <p> Posté le - <time datetime="2015-05-16 19:00">16 Mai</time> + <time datetime="2015-05-16 19:00">16 mai</time> par Lisa. </p> </footer> @@ -58,8 +89,8 @@ translation_of: Web/HTML/Element/article <footer> <p> Posté le - <time datetime="2015-05-17 19:00">17 Mai</time> - par Tom. + <time datetime="2015-05-17 19:00">17 mai</time> + par Gilles Stella. </p> </footer> </article> @@ -67,85 +98,23 @@ translation_of: Web/HTML/Element/article <footer> <p> Posté le - <time datetime="2015-05-15 19:00">15 Mai</time> + <time datetime="2015-05-15 19:00">15 mai</time> par Staff. </p> </footer> </article></pre> -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples","300","500")}}</p> - -<h2 id="Résumé_technique">Résumé technique</h2> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_sectionnant">contenu de section</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Contenu autorisé</dfn></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Omission de balises</dfn></th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row"><dfn>Parents autorisés</dfn></th> - <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>. Un élément <code><article></code> ne doit pas être un descendant d'un élément {{HTMLElement("address")}}.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("main")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLElement")}}.</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('HTML WHATWG', 'semantics.html#the-article-element', '<article>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', 'sections.html#the-article-element', '<article>')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'sections.html#the-article-element', '<article>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> +<h2 id="specifications">Spécifications</h2> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<p>{{Specifications}}</p> -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<p>{{Compat("html.elements.article")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>Les autres éléments liés aux sections d'un document : {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li> - <li class="last"><a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Sections et structure d'un document HTML5</a>.</li> + <li>Les autres éléments liés aux sections d'un document : <a href="/fr/docs/Web/HTML/Element/body"><code><body></code></a>, <a href="/fr/docs/Web/HTML/Element/nav"><code><nav></code></a>, <a href="/fr/docs/Web/HTML/Element/section"><code><section></code></a>, <a href="/fr/docs/Web/HTML/Element/aside"><code><aside></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h1></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h2></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h3></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h4></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h5></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h6></code></a>, <a href="/fr/docs/Web/HTML/Element/hgroup"><code><hgroup></code></a>, <a href="/fr/docs/Web/HTML/Element/header"><code><header></code></a>, <a href="/fr/docs/Web/HTML/Element/footer"><code><footer></code></a>, <a href="/fr/docs/Web/HTML/Element/address"><code><address></code></a></li> + <li><a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Sections et structure d'un document HTML5</a></li> </ul> diff --git a/files/fr/web/html/element/aside/index.html b/files/fr/web/html/element/aside/index.html index a68dc9f35a..6917f99223 100644 --- a/files/fr/web/html/element/aside/index.html +++ b/files/fr/web/html/element/aside/index.html @@ -1,37 +1,70 @@ --- -title: '<aside> : l''élément Aparté' +title: '<aside> : l''élément aparté' slug: Web/HTML/Element/aside tags: - Element - HTML + - HTML sections - HTML5 + - HTML:Flow content + - HTML:Palpable Content + - HTML:Sectioning content - Reference - - Sections HTML - Web translation_of: Web/HTML/Element/aside +browser-compat: html.elements.aside --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary">L'<strong>élément HTML <code><aside></code></strong> (en anglais, "aparté") représente une partie d'un document dont le contenu n'a qu'un rapport indirect avec le contenu principal du document.</span> Les apartés sont fréquemment présents sous la forme d'encadrés ou de boîtes de légende.</p> +<p class="summary">L'élément <strong><code><aside></code></strong> (en français, « aparté ») représente une partie d'un document dont le contenu n'a qu'un rapport indirect avec le contenu principal du document. Les apartés sont fréquemment présents sous la forme d'encadrés ou de boîtes de légende.</p> <div>{{EmbedInteractiveExample("pages/tabbed/aside.html", "tabbed-standard")}}</div> -<p 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> !</p> +<table class="properties"> + <tbody> + <tr> + <th scope="row"><dfn><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></dfn></th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#sectioning_content">contenu de section</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row"><dfn>Contenu autorisé</dfn></th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>.</td> + </tr> + <tr> + <th scope="row"><dfn>Omission de balises</dfn></th> + <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td> + </tr> + <tr> + <th scope="row"><dfn>Parents autorisés</dfn></th> + <td>Tout élément acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a>. Notez qu'un élément <code><aside></code> ne doit pas être un descendant d'un élément <a href="/fr/docs/Web/HTML/Element/address"><code><address></code></a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><code><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Complementary_role">complementary</a></code></td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td><a href="https://w3c.github.io/aria/#feed">feed</a>, <a href="https://w3c.github.io/aria/#none">none</a>, <a href="https://w3c.github.io/aria/#note">note</a>, <a href="https://w3c.github.io/aria/#presentation">presentation</a>, <a href="https://w3c.github.io/aria/#region">region</a>, <a href="https://w3c.github.io/aria/#search">search</a></td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td> + </tr> + </tbody> +</table> -<h2 id="Attributs">Attributs</h2> +<h2 id="attributes">Attributs</h2> -<p>Cet élément ne comprend que les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>.</p> +<p>Cet élément ne comprend que les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>.</p> -<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation</strong></h2> +<h2 id="usage_notes"><strong>Notes d'utilisation</strong></h2> -<p>Ne pas utiliser l'élément <code><aside></code> pour marquer du texte entre parenthèses, du fait que ce type de texte est considéré comme faisant partie du flux principal.</p> +<p>On ne doit pas utiliser l'élément <code><aside></code> pour marquer du texte entre parenthèses, ce type de texte est considéré comme faisant partie du flux principal.</p> -<h2 id="Exemples">Exemples</h2> +<h2 id="example">Exemple</h2> <p>Dans cet exemple, on utilise <code><aside></code> afin de baliser un paragraphe d'un article. Ici, le paragraphe n'est pas directement lié au contenu principal de l'article et c'est pour cela qu'on utilise cet élément.</p> -<h3 id="HTML">HTML</h3> - <pre class="brush: html"><article> <p> Le film Disney <cite>La petite Sirène</cite> est @@ -43,80 +76,27 @@ translation_of: Web/HTML/Element/aside </p> </aside> <p> - Plus d'informations sur le film... + Plus d'informations sur le film… </p> </article> </pre> -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p> +<h3 id="result">Résultat</h3> -<h2 id="Résumé_technique">Résumé technique</h2> +<p>{{EmbedLiveSample("example", "100%", 150)}}</p> -<table class="properties"> - <tbody> - <tr> - <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_sectionnant">contenu de section</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Contenu autorisé</dfn></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Omission de balises</dfn></th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row"><dfn>Parents autorisés</dfn></th> - <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>. Notez qu'un élément <code><aside></code> ne doit pas être un descendant d'un élément {{HTMLElement("address")}}.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>{{ARIARole("feed")}}, {{ARIARole("note")}}, {{ARIARole("presentation")}}, {{ARIARole("region")}}, {{ARIARole("search")}}</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLElement")}}</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">Statut</th> - <th scope="col">Commentaire</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'semantics.html#the-aside-element', '<aside>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'sections.html#the-aside-element', '<aside>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> +<h2 id="specifications">Spécifications</h2> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<p>{{Specifications}}</p> -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer aux données, merci de regarder <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez-nous une <em>pull request</em>.</div> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<p>{{Compat("html.elements.aside")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>Les autres éléments en rapport avec les sections : {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li> - <li><a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Structures et sections d'un document HTML5</a></li> - <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Complementary_role">ARIA : le rôle <code>complementary</code></a></li> + <li>Les autres éléments en rapport avec les sections : <a href="/fr/docs/Web/HTML/Element/body"><code><body></code></a>, <a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a>, <a href="/fr/docs/Web/HTML/Element/section"><code><section></code></a>, <a href="/fr/docs/Web/HTML/Element/nav"><code><nav></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h1></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h2></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h3></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h4></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h5></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h6></code></a>, <a href="/fr/docs/Web/HTML/Element/hgroup"><code><hgroup></code></a>, <a href="/fr/docs/Web/HTML/Element/header"><code><header></code></a>, <a href="/fr/docs/Web/HTML/Element/footer"><code><footer></code></a>, <a href="/fr/docs/Web/HTML/Element/address"><code><address></code></a></li> + <li><a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Structures et sections d'un document HTML5</a></li> + <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Complementary_role">ARIA : le rôle <code>complementary</code></a></li> </ul> diff --git a/files/fr/web/html/element/audio/index.html b/files/fr/web/html/element/audio/index.html index 4a5ff5cbae..17d0fba0fd 100644 --- a/files/fr/web/html/element/audio/index.html +++ b/files/fr/web/html/element/audio/index.html @@ -2,224 +2,242 @@ title: '<audio> : l''élément audio embarqué' slug: Web/HTML/Element/audio tags: + - Audio - Element - HTML + - HTML embedded content + - HTML5 + - HTML:Embedded content + - HTML:Flow content + - HTML:Phrasing content + - Media - Multimedia - Reference - Web + - sound translation_of: Web/HTML/Element/audio +browser-compat: html.elements.audio --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><audio></code></strong> est utilisé afin d'intégrer un contenu sonore dans un document. Il peut contenir une ou plusieurs sources audio représentées avec l'attribut <code>src</code> ou l'élément {{HTMLElement("source")}}. S'il y a plusieurs sources, l'agent utilisateur choisira celle qui convient le mieux.</p> +<p class="summary">L'élément HTML <strong><code><audio></code></strong> est utilisé afin d'intégrer un contenu sonore dans un document. Il peut contenir une ou plusieurs sources audio représentées avec l'attribut <code>src</code> ou l'élément <a href="/fr/docs/Web/HTML/Element/Source"><code><source></code></a> : le navigateur choisira celle qui convient le mieux. Il peut également être la destination de médias diffusés en continu, en utilisant un <a href="/fr/docs/Web/API/MediaStream"><code>MediaStream</code></a>.</p> <div>{{EmbedInteractiveExample("pages/tabbed/audio.html","tabbed-standard")}}</div> -<p 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> !</p> - -<p>L'exemple qui précède illustre le fonctionnement simple d'un élément <code><audio></code>, à la façon de ce qui peut être fait pour une image avec l'élément {{htmlelement("img")}} : on inclut un chemin vers la ressource grâce à l'attribut <code>src</code> et on peut ajouter d'autres attributs afin de fournir d'autres informations : lecture automatique, lecture en boucle, utilisation des contrôles par défaut du navigateur, etc</p> +<p>L'exemple qui précède illustre le fonctionnement simple d'un élément <code><audio></code>, à la façon de ce qui peut être fait pour une image avec l'élément <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a> : on inclut un chemin vers la ressource grâce à l'attribut <code>src</code> et on peut ajouter d'autres attributs afin de fournir d'autres informations : lecture automatique, lecture en boucle, utilisation des contrôles par défaut du navigateur, etc.</p> <p>Le contenu présent à l'intérieur des balises <code><audio></audio></code> est affiché comme contenu alternatif lorsque le navigateur ne prend pas en charge l'élément.</p> -<p>Les navigateurs ne prennent pas en charge l'ensemble des <a href="/fr/docs/Web/Media/Formats/Audio_codecs">formats audio</a> et plusieurs sources peuvent être fournies en utilisant des éléments {{htmlelement("source")}} imbriqués. Ainsi, le navigateur sélectionnera la première ressource dont il prend en charge le format:</p> +<h2 id="attributes">Attributs</h2> -<pre class="brush: html"><audio controls> - <source src="monAudio.mp3" type="audio/mpeg"> - <source src="monAudio.ogg" type="audio/ogg"> - <p>Votre navigateur ne prend pas en charge l'audio HTML. Voici un - un <a href="myAudio.mp4">lien vers le fichier audio</a> pour le - télécharger.</p> -</audio></pre> +<p>Cet élément inclut les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>.</p> -<p>Autres notes :</p> +<dl> + <dt><strong id="attr-autoplay"><code>autoplay</code></strong></dt> + <dd>Un attribut booléen : s'il est spécifié, l'audio commencera automatiquement la lecture dès qu'il pourra le faire, sans attendre la fin du téléchargement de l'ensemble du fichier audio. + + <div class="notecard note"> + <p><b>Note :</b></p> + <p>Les sites qui diffusent automatiquement de l'audio (ou des vidéos avec une piste audio) peuvent s'avérer désagréables pour les utilisateurs et doivent donc être évités dans la mesure du possible. Si vous devez offrir une fonctionnalité de lecture automatique, vous devez la soumettre au choix de l'utilisateur. Cependant, cela peut être utile lors de la création d'éléments médias dont la source sera définie ultérieurement, sous le contrôle de l'utilisateur. Consultez notre <a href="/fr/docs/Web/Media/Autoplay_guide">guide sur la lecture automatique</a> pour obtenir des informations supplémentaires sur la manière d'utiliser correctement la fonction <i>autoplay</i>.</p> + </div> + </dd> + <dt><strong id="attr-controls"><code>controls</code></strong></dt> + <dd>Si l'attribut est présent, le navigateur affichera des contrôles pour que l'utilisateur puisse gérer la lecture, le volume, et le déplacement du curseur de lecture.</dd> + <dt><strong id="attr-crossorigin"><code>crossorigin</code></strong></dt> + <dd>Cet attribut à valeur contrainte indique comment le CORS doit être utilisé afin de récupérer la ressource. <a href="/fr/docs/Web/HTML/CORS_enabled_image">Les ressources utilisant le CORS</a> peuvent être réutilisées dans un élément <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a> sans corrompre celui-ci. Les valeurs autorisées pour cet attribut sont : + <dl> + <dt><code>anonymous</code></dt> + <dd>Une requête multi-origine est envoyée sans information d'authentification. Autrement dit, l'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Origin"><code>Origin</code></a> est envoyé sans cookie, certificat X.509 ou sans authentification HTTP. Si le serveur ne fournit pas d'information d'authentification au site d'origine (sans indiquer l'en-tête <a href="/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin"><code>Access-Control-Allow-Origin</code></a>), la ressource sera corrompue (<em>tainted</em>) et son utilisation sera restreinte.</dd> + <dt><code>use-credentials</code></dt> + <dd>Une requête multi-origine est envoyée avec une information d'authentification (c'est-à-dire avec un en-tête HTTP <code>Origin:</code> qui contient un cookie, un certificat ou effectuant une authentification HTTP).</dd> + </dl> + Lorsque cet attribut n'est pas présent, la ressource est récupérée sans requête CORS et empêche ainsi d'utiliser la ressource dans un <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a>. Si la valeur fournie est invalide, elle sera considérée comme <code>anonymous</code>. Voir <a href="/fr/docs/Web/HTML/Attributes/crossorigin">Paramétrage des attributs relatifs au CORS</a> pour plus d'informations.</dd> + <dt><strong id="attr-disableRemotePlayback"><code>disableRemotePlayback</code></strong> {{experimental_inline}}</dt> + <dd>Un attribut booléen utilisé pour désactiver la capacité de lecture à distance dans les appareils qui sont connectés à l'aide de câbles (HDMI, DVI, etc.) et sans fil (Miracast, Chromecast, DLNA, AirPlay, etc.). Voir <a href="https://www.w3.org/TR/remote-playback/#the-disableremoteplayback-attribute">cette proposition de spécification</a> pour plus d'informations. + <div class="notecard note"> + <p><b>Note :</b></p> + <p>Dans Safari, vous pouvez utiliser <a href="https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/AirPlayGuide/OptingInorOutofAirPlay/OptingInorOutofAirPlay.html"><code>x-webkit-airplay="deny"</code></a> comme solution de repli.</p> + </div> + </dd> + <dt><strong id="attr-loop"><code>loop</code></strong></dt> + <dd>Un attribut booléen. S'il est renseigné, la lecture du fichier se fera en boucle.</dd> + <dt><strong id="attr-muted"><code>muted</code></strong></dt> + <dd>Un attribut booléen, indiquant si le son de l'élément audio est initialement coupé. Sa valeur par défaut est <code>false</code>.</dd> + <dt><strong id="attr-preload"><code>preload</code></strong></dt> + <dd>Cet attribut indique au navigateur ce que l'auteur du code html pense de l'utilisation optimale de cet élément. Il accepte uniquement les valeurs suivantes :<br> + + <ul> + <li><code>none</code> : Indique que l'élément audio ne devrait pas être mis en cache</li> + <li><code>metadata</code> : Indique que seules les méta-données (comme la durée) sont préchargées</li> + <li><code>auto</code> : Indique que tout le fichier peut être téléchargé, même s'il n'est pas certain que l'utilisateur le lira</li> + <li><code>""</code> (chaîne de caractères vide) : Un synonyme de <code>auto</code></li> + </ul> + + <p>La valeur par défaut peut varier d'un navigateur à l'autre. Les spécifications recommandent la valeur <code>metadata</code>.</p> + + <div class="notecard note"> + <p><b>Note :</b></p> + <ul> + <li>L'attribut <code>autoplay</code> a la priorité sur <code>preload</code>. Si <code>autoplay</code> est spécifié, le navigateur devrait évidemment commencer à télécharger l'audio pour le lire.</li> + <li>La spécification n'oblige pas le navigateur à suivre la valeur de cet attribut ; il s'agit d'une simple indication.</li> + </ul> + </div> + </dd> + <dt><strong id="attr-src"><code>src</code></strong></dt> + <dd>L'URL du fichier audio à intégrer. Cet élément est soumis aux <a href="/fr/docs/Web/HTTP/CORS">contrôles d'accès HTTP</a>. Cet attribut est facultatif ; vous pouvez utiliser l'élément <a href="/fr/docs/Web/HTML/Element/Source"><code><source></code></a> dans le bloc audio pour spécifier l'audio à intégrer.</dd> +</dl> -<ul> - <li>Si l'attribut <code>controls</code> n'est pas indiqué, le lecteur audio n'incluera pas les contrôles par défaut du navigateur. Il est possible de créer des contrôles spécifiques en JavaScript grâce à l'API {{domxref("HTMLMediaElement")}}.</li> - <li>Afin d'avoir un contrôle précis sur le contenu audio, l'API <code>HTMLMediaElement</code> déclenche de nombreux<a href="/fr/docs/Web/Guide/DOM/Events/evenement_medias"> évènements</a>.</li> - <li>Il est aussi possible d'utiliser <a href="/fr/docs/Web/API/Web_Audio_API">lAPI Web Audio</a> afin de générer et de manipuler des flux audio en JavaScript.</li> - <li>Les éléments <code><audio></code> ne peuvent pas avoir de sous-titres contrairement aux éléments <code><video></code>. Pour plus d'informations et certaines méthodes de contournements, voir <a href="https://www.iandevlin.com/blog/2015/12/html5/webvtt-and-audio">WebVTT et l'audio</a>, écrit par Ian Devlin.</li> -</ul> +<h2 id="events">Évènements</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Nom de l'évènement</th> + <th scope="col">Condition du déclenchement</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/fr/docs/Web/Reference/Events/audioprocess">audioprocess</a></td> + <td>La mémoire tampon en entrée d'un <a href="/fr/docs/Web/API/ScriptProcessorNode"><code>ScriptProcessorNode</code></a> peut désormais être traité.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/canplay_event"><code>canplay</code></a></td> + <td>Le navigateur peut lire le média mais estime que trop peu de données ont été chargées pour lire le média jusqu'à sa fin (il faudra vraisemblablement un arrêt pour un chargement en mémoire tampon).</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/canplaythrough_event"><code>canplaythrough</code></a></td> + <td>Le navigateur estime qu'il peut lire le média jusqu'à sa fin, sans avoir à interrompre la lecture par du chargement en mémoire tampon.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/Reference/Events/complete">complete</a></td> + <td>Le rendu d'un <a href="/fr/docs/Web/API/OfflineAudioContext"><code>OfflineAudioContext</code></a> est terminé.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/durationchange_event"><code>durationchange</code></a></td> + <td>L'attribut <code>duration</code> a été mis à jour.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/emptied_event"><code>emptied</code></a></td> + <td>Le média est devenu vide. Cela peut par exemple se produire lorsque le média a déjà été (partiellement ou complètement) chargé et que la méthode <a href="/fr/docs/Web/API/HTMLMediaElement/load" rel="internal"><code>load()</code></a> est invoquée pour le recharger.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/ended_event"><code>ended</code></a></td> + <td>La lecture a été interrompue car la fin du média est atteinte.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/loadeddata_event"><code>loadeddata</code></a></td> + <td>La première <em>frame</em> du média a été chargée.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/loadedmetadata_event"><code>loadedmetadata</code></a></td> + <td>Les métadonnées ont été chargées.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/pause_event"><code>pause</code></a></td> + <td>La lecture a été mise en pause.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/play_event"><code>play</code></a></td> + <td>La lecture a démarré.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/playing_event"><code>playing </code></a></td> + <td>La lecture est prête à être lancée après avoir été mise en pause ou interrompue pour un chargement en mémoire de données.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/ratechange_event"><code>ratechange</code></a></td> + <td>La vitesse de lecture a changé.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/seeked_event"><code>seeked</code></a></td> + <td>Une opération de déplacement du curseur de lecture (<em>seek</em>) est terminée.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/seeking_event"><code>seeking</code></a></td> + <td>Une opération de déplacement du curseur de lecture (<em>seek</em>) a été initiée.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/stalled_event"><code>stalled</code></a></td> + <td>L'agent utilisateur tente de récupérer les données associées au média mais les données ne parviennent pas.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/suspend_event"><code>suspend</code></a></td> + <td>Le chargement des données du média ont été suspendues.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/timeupdate_event"><code>timeupdate</code></a></td> + <td>Le temps décrit par l'attribut <code>currentTime</code> a été mis à jour.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/volumechange_event"><code>volumechange</code></a></td> + <td>Le volume a été modifié.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/HTMLMediaElement/waiting_event"><code>waiting</code></a></td> + <td>La lecture a été interrompue en raison d'un manque temporaire de données.</td> + </tr> + </tbody> +</table> -<p>Pour apprendre comment utiliser les éléments liés aux médias, nous vous conseillons de lire <a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">le tutoriel sur le contenu audio et vidéo</a>.</p> +<h2 id="usage_notes">Notes d'utilisation</h2> -<h2 id="Attributs">Attributs</h2> +<p>Les navigateurs ne prennent pas tous en charge les mêmes <a href="/fr/docs/Web/Media/Formats/Containers">types de fichiers</a> et <a href="/fr/docs/Web/Media/Formats/Audio_codecs">codecs audio</a> ; vous pouvez fournir plusieurs sources à l'intérieur d'éléments <a href="/fr/docs/Web/HTML/Element/Source"><code><source></code></a> imbriqués, et le navigateur utilisera alors le premier qu'il comprend :</p> -<p>Comme tous les autres éléments HTML, cet élément possède <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +<pre class="brush: html"><audio controls> + <source src="myAudio.mp3" type="audio/mpeg"> + <source src="myAudio.ogg" type="audio/ogg"> + <p>Votre navigateur ne prend pas en charge l'audio HTML5. + Voici un <a href="myAudio.mp3">lien vers le fichier audio</a> + à la place.</p> +</audio></pre> -<dl> - <dt>{{htmlattrdef("autoplay")}}</dt> - <dd> - <p>Attribut booléen. Si celui-ci est renseigné (même avec une valeur "false"), l'élément audio sera joué automatiquement dès qu'assez de données seront chargées.</p> - - <div class="note"><strong>Note :</strong> la lecture automatique peut être source de nuisance pour les utilisateurs. Mieux vaut l'éviter lorsque c'est possible ou proposer à l'utilisateur de pouvoir choisir cette option. Cette valeur peut être utile lorsqu'on crée des fichiers audio dont la source sera définie <em>a posteriori</em>.</div> - </dd> - <dt>{{htmlattrdef("controls")}}</dt> - <dd>Si l'attribut est présent, le navigateur affichera des contrôles pour que l'utilisateur puisse gérer la lecture, le volume, et le déplacement du curseur de lecture.</dd> - <dt>{{htmlattrdef("crossorigin")}}</dt> - <dd>Cet attribut à valeur contrainte indique comment le CORS doit être utilisé afin de récupérer la ressource. <a href="/en-US/docs/CORS_Enabled_Image">Les ressources utilisant le CORS</a> peuvent être réutilisées dans un élément {{HTMLElement("canvas")}} sans corrompre celui-ci. Les valeurs autorisées pour cet attribut sont : - <dl> - <dt><code>anonymous</code></dt> - <dd>Une requête multi-origine est envoyée sans information d'authentification. Autrement dit, l'en-tête HTTP {{HTTPHeader("Origin")}} est envoyé sans cookie, certificat X.509 ou sans authentification HTTP. Si le serveur ne fournit pas d'information d'authentification au site d'origine (sans indiquer l'en-tête {{HTTPHeader("Access-Control-Allow-Origin")}}), la ressource sera corrompue (<em>tainted</em>) et son utilisation sera restreinte.</dd> - <dt><code>use-credentials</code></dt> - <dd>Une requête multi-origine est envoyée avec une information d'authentification (c'est-à-dire avec un en-tête HTTP <code>Origin:</code> qui contient un cookie, un certificat ou effectuant une authentification HTTP).</dd> - </dl> - Lorsque cet attribut n'est pas présent, la ressource est récupérée sans requête CORS et empêche ainsi d'utiliser la ressource dans un {{HTMLElement('canvas')}}. Si la valeur fournie est invalide, elle sera considérée comme <code>anonymous</code>. Voir <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">Paramétrage des attributs relatifs au CORS</a> pour plus d'informations.</dd> - <dt>{{htmlattrdef("loop")}}</dt> - <dd>Attribut booléen. S'il est renseigné, la lecture du fichier se fera en boucle.</dd> - <dt>{{htmlattrdef("muted")}}</dt> - <dd>Attribut booléen, indiquant si le son de l'élément audio est initialement coupé. Sa valeur par défaut est <code>false</code>.</dd> - <dt>{{htmlattrdef("preload")}}</dt> - <dd>Cet attribut indique au navigateur ce que l'auteur du code html pense de l'utilisation optimale de cet élément. Il accepte uniquement les valeurs suivantes :<br> - - <ul> - <li><code>none</code> : l'élément audio ne devrait pas être mis en cache</li> - <li><code>metadata</code> : seules les méta-données (comme la durée) sont préchargées</li> - <li><code>auto</code> : tout le fichier peut être téléchargé, même s'il n'est pas certain que l'utilisateur le lira</li> - <li><code>"" </code>(chaîne de caractères vide) : synonyme de <code>auto</code></li> - </ul> - La valeur par défaut peut varier d'un navigateur à l'autre. Les spécifications recommandent la valeur <code>metadata</code>.</dd> -</dl> +<p>Nous proposons un <a href="/fr/docs/Web/Media/Formats">guide substantiel et complet des types de fichiers médias</a> et des <a href="/fr/docs/Web/Media/Formats/Audio_codecs">codecs audio qui peuvent être utilisés en leur sein</a>. Est également disponible <a href="/fr/docs/Web/Media/Formats/Video_codecs">un guide des codecs supportés pour la vidéo</a>.</p> -<div class="note"><strong>Notes d'utilisation :</strong> +<p>Autres notes d'utilisation :</p> <ul> - <li>L'attribut <code>autoplay</code> est prioritaire sur cet attribut. Si le navigateur a besoin de jouer cet élément, il le téléchargera automatiquement</li> - <li>La spécification n'impose pas au navigateur de prendre en compte cet attribut. Il n'a qu'une valeur indicative.</li> + <li>Si vous ne spécifiez pas l'attribut <code>controls</code>, le lecteur audio n'inclura pas les contrôles par défaut du navigateur. Vous pouvez toutefois créer vos propres contrôles personnalisés en utilisant JavaScript et l'API <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a>.</li> + <li>Pour permettre un contrôle précis de votre contenu audio, les <code>HTMLMediaElement</code> retournent de nombreux <a href="/fr/docs/Web/API/HTMLMediaElement#events">événements</a> différents. Cela fournit également un moyen de surveiller le processus de récupération de l'audio afin que vous puissiez surveiller les erreurs ou détecter quand suffisamment de ressources sont disponibles pour commencer à les lire ou à les manipuler.</li> + <li>Vous pouvez également utiliser l'API <a href="/fr/docs/Web/API/Web_Audio_API">Web Audio</a> pour générer et manipuler directement des flux audio à partir du code JavaScript plutôt que de diffuser des fichiers audio préexistants.</li> + <li>Les éléments <code><audio></code> ne peuvent pas avoir de sous-titres ou de légendes associés de la même manière que les éléments <code><video></code>. Voir <a href="https://www.iandevlin.com/blog/2015/12/html5/webvtt-and-audio">WebVTT and Audio</a> <small>(en)</small> par Ian Devlin pour des informations utiles et des solutions de contournement.</li> </ul> -</div> -<dl> - <dt>{{htmlattrdef("src")}}</dt> - <dd>L'URL du fichier audio à intégrer. Cet attribut suit les <a href="/fr/docs/HTTP/Access_control_CORS">spécifications du CORS</a>. Il est optionnel; on peut lui préférer l'élément {{HTMLElement("source")}} dans le bloc de l'élément sur lequel il est défini.</dd> -</dl> +<p>Une bonne source générale d'informations sur l'utilisation de <code><audio></code> est le tutoriel sur le <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">contenu vidéo et audio</a>.</p> -<h2 id="Évènements">Évènements</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Nom</th> - <th scope="col">Condition du déclenchement</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{Event("audioprocess")}}</td> - <td>La mémoire tampon en entrée d'un {{DOMxRef("ScriptProcessorNode")}} peut désormais être traité.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.canplay_event", 'canplay')}}</td> - <td>Le navigateur peut lire le média mais estime que trop peu de données ont été chargées pour lire le média jusqu'à sa fin (il faudra vraisemblablement un arrêt pour un chargement en mémoire tampon).</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}}</td> - <td>Le navigateur estime qu'il peut lire le média jusqu'à sa fin, sans avoir à interrompre la lecture par du chargement en mémoire tampon.</td> - </tr> - <tr> - <td>{{Event("complete")}}</td> - <td>Le rendu d'un {{DOMxRef("OfflineAudioContext")}} est terminé.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}}</td> - <td>L'attribut <code>duration</code> a été mis à jour.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.emptied_event", 'emptied')}}</td> - <td>Le média est devenu vide. Cela peut par exemple se produire lorsque le média a déjà été (partiellement ou complètement) chargé et que la méthode <a href="/fr/docs/Web/API/HTMLMediaElement/load" rel="internal"><code>load()</code></a> est invoquée pour le recharger.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.ended_event", 'ended')}}</td> - <td>La lecture a été interrompue car la fin du média est atteinte.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}}</td> - <td>La première <em>frame</em> du média a été chargée.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.loadedmetadata_event", 'loadedmetadata')}}</td> - <td>Les métadonnées ont été chargées.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.pause_event", 'pause')}}</td> - <td>La lecture a été mise en pause.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.play_event", 'play')}}</td> - <td>La lecture a démarré.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.playing_event", 'playing ')}}</td> - <td>La lecture est prête à être lancée après avoir été mise en pause ou interrompue pour un chargement en mémoire de données.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.ratechange_event", 'ratechange')}}</td> - <td>La vitesse de lecture a changé.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.seeked_event", 'seeked')}}</td> - <td>Une opération de déplacement du curseur de lecture (<em>seek</em>) est terminée.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.seeking_event", 'seeking')}}</td> - <td>Une opération de déplacement du curseur de lecture (<em>seek</em>) a été initiée.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.stalled_event", 'stalled')}}</td> - <td>L'agent utilisateur tente de récupérer les données associées au média mais les données ne parviennent pas.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.suspend_event", 'suspend')}}</td> - <td>Le chargement des données du média ont été suspendues.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.timeupdate_event", 'timeupdate')}}</td> - <td>Le temps décrit par l'attribut <code>currentTime</code> a été mis à jour.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.volumechange_event", 'volumechange')}}</td> - <td>Le volume a été modifié.</td> - </tr> - <tr> - <td>{{domxref("HTMLMediaElement.waiting_event", 'waiting')}}</td> - <td>La lecture a été interrompue en raison d'un manque temporaire de données.</td> - </tr> - </tbody> -</table> - -<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> - -<h3 id="Mise_en_forme_avec_CSS">Mise en forme avec CSS</h3> +<h3 id="styling_with_css">Mise en forme avec CSS</h3> <p>L'élément <code><audio></code> n'a aucun affichage intrinsèque en dehors des contrôles par défaut du navigateur qui sont affichés lorsque l'attribut booléen <code>controls</code> est présent.</p> -<p>Les contrôles par défaut sont affichés avec {{cssxref("display")}} qui vaut <code>inline</code> par défaut et il est possible de changer cette valeur en <code>block</code> dans une feuille de style afin de pouvoir placer le contrôle au sein de la disposition, à moins de vouloir le placer en incise.</p> +<p>Les contrôles par défaut sont affichés avec <a href="/fr/docs/Web/CSS/display"><code>display</code></a> qui vaut <code>inline</code> par défaut et il est possible de changer cette valeur en <code>block</code> dans une feuille de style afin de pouvoir placer le contrôle au sein de la disposition, à moins de vouloir le placer en incise.</p> -<p>Les contrôles par défaut peuvent être mis en forme grâce à des propriétés qui influent sur l'ensemble du bloc. On peut ainsi utiliser {{cssxref("border")}}, {{cssxref("border-radius")}}, {{cssxref("padding")}}, {{cssxref("margin")}}, etc. Toutefois, il n'est pas possible de mettre en forme chacun des composants individuel du contrôle (on ne peut pas, par exemple, modifier la taille d'un des boutons ou leurs icones). Chaque navigateur peut avoir des contrôles par défaut qui soient différents.</p> +<p>Les contrôles par défaut peuvent être mis en forme grâce à des propriétés qui influent sur l'ensemble du bloc. On peut ainsi utiliser <a href="/fr/docs/Web/CSS/border"><code>border</code></a>, <a href="/fr/docs/Web/CSS/border-radius"><code>border-radius</code></a>, <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a>, <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>, etc. Toutefois, il n'est pas possible de mettre en forme chacun des composants individuel du contrôle (on ne peut pas, par exemple, modifier la taille d'un des boutons ou leurs icones). Chaque navigateur peut avoir des contrôles par défaut qui soient différents.</p> -<p>Pour obtenir un aspect identique dans les différents navigateurs, il vous faudra créer vos propres contrôles afin de les baliser et de les mettre en forme à votre convenance puis d'utiliser JavaScript et l'API {{domxref("HTMLMediaElement")}} pour manipuler les différentes fonctionnalités.</p> +<p>Pour obtenir un aspect identique dans les différents navigateurs, il vous faudra créer vos propres contrôles afin de les baliser et de les mettre en forme à votre convenance puis d'utiliser JavaScript et l'API <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a> pour manipuler les différentes fonctionnalités.</p> <p><a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Le guide sur la mise en forme des lecteurs vidéo</a> fournit quelques techniques utiles, bien qu'écrit à propos de l'élément <code><video></code>, certains concepts peuvent tout à fait s'appliquer aux éléments <code><audio></code>.</p> -<h3 id="Détecter_l'ajout_et_la_suppression_de_pistes">Détecter l'ajout et la suppression de pistes</h3> +<h3 id="detecting_addition_and_removal_of_tracks">Détecter l'ajout et la suppression de pistes</h3> -<p>Il est aussi possible de détecter lorsque des pistes sont ajoutées et supprimées sur un élément <code><audio></code> en écoutant les évènements {{event("addtrack")}} et {{event("removetrack")}}. Toutefois, ces évènements ne sont pas directement envoyés sur l'élément <code><audio></code> mais sur l'objet représentant la liste de pistes de l'élément <code><audio></code> et rattaché à l'élément {{domxref("HTMLMediaElement")}}.</p> +<p>Il est aussi possible de détecter lorsque des pistes sont ajoutées et supprimées sur un élément <code><audio></code> en écoutant les évènements <a href="/fr/docs/Web/API/AudioTrackList/addtrack_event"><code>addtrack</code></a> et <a href="/fr/docs/Web/API/AudioTrackList/removetrack_event"><code>removetrack</code></a>. Toutefois, ces évènements ne sont pas directement envoyés sur l'élément <code><audio></code> mais sur l'objet représentant la liste de pistes de l'élément <code><audio></code> et rattaché à l'élément <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a>.</p> <dl> - <dt>{{domxref("HTMLMediaElement.audioTracks")}}</dt> - <dd>Un objet {{domxref("AudioTrackList")}} contenant l'ensemble des pistes audio associées à l'élément. Un écouteur <code>addtrack</code> peut être associé à l'objet afin d'alerter lorsque de nouvelles pistes audio sont ajoutées à l'élément.</dd> - <dt>{{domxref("HTMLMediaElement.videoTracks")}}</dt> - <dd>Un écouteur <code>addtrack</code> peut être ajouté à cet objet {{domxref("VideoTrackList")}} afin d'alerter lorsque de nouvelles pistes vidéo sont ajoutées à l'élément.</dd> - <dt>{{domxref("HTMLElement.textTracks")}}</dt> - <dd>Un écouteur <code>addtrack</code> peut être ajouté à cet objet {{domxref("TextTrackList")}} afin d'alerter lorsque de nouvelles pistes de texte sont ajoutées à l'élément.</dd> + <dt><a href="/fr/docs/Web/API/HTMLMediaElement/audioTracks"><code>HTMLMediaElement.audioTracks</code></a></dt> + <dd>Un objet <a href="/fr/docs/Web/API/AudioTrackList"><code>AudioTrackList</code></a> contenant l'ensemble des pistes audio associées à l'élément. Un écouteur <code>addtrack</code> peut être associé à l'objet afin d'alerter lorsque de nouvelles pistes audio sont ajoutées à l'élément.</dd> + <dt><a href="/fr/docs/Web/API/HTMLMediaElement/videoTracks"><code>HTMLMediaElement.videoTracks</code></a></dt> + <dd>Un écouteur <code>addtrack</code> peut être ajouté à cet objet <a href="/fr/docs/Web/API/VideoTrackList"><code>VideoTrackList</code></a> afin d'alerter lorsque de nouvelles pistes vidéo sont ajoutées à l'élément.</dd> + <dt><a href="/fr/docs/Web/API/HTMLMediaElement/textTracks"><code>HTMLMediaElement.textTracks</code></a></dt> + <dd>Un écouteur <code>addtrack</code> peut être ajouté à cet objet <a href="/fr/docs/Web/API/TextTrackList"><code>TextTrackList</code></a> afin d'alerter lorsque de nouvelles pistes de texte sont ajoutées à l'élément.</dd> </dl> -<div class="note"> -<p><strong>Note :</strong> Bien qu'on parle ici d'un élément <code><audio></code>, il est possible qu'un tel élément possède des pistes vidéo et des pistes texte bien que la cohérence des interfaces puisse être mise à mal.</p> +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Bien qu'on parle ici d'un élément <code><audio></code>, il est possible qu'un tel élément possède des pistes vidéo et des pistes texte bien que la cohérence des interfaces puisse être mise à mal.</p> </div> <p>Ainsi, on pourra utiliser un fragment de code analogue à celui qui suit pour détecter si de nouvelles pistes sont ajoutées ou supprimées d'un élément <code><audio></code> :</p> -<pre class="brush: js">var elem = document.querySelector("audio"); +<pre class="brush: js">let elem = document.querySelector("audio"); elem.audioTrackList.onaddtrack = function(event) { trackEditor.addTrack(event.track); @@ -227,24 +245,27 @@ elem.audioTrackList.onaddtrack = function(event) { elem.audioTrackList.onremovetrack = function(event) { trackEditor.removeTrack(event.track); -}; -</pre> +};</pre> <p>Ce code permet de surveiller lorsque de nouvelles pistes audio sont ajoutées et supprimées. Lorsque c'est le cas, une fonction (non décrite ici) est invoquée afin de mettre à jour l'éditeur présenté à l'utilisateur avec la liste des pistes disponibles.</p> -<p>Il est aussi possible d'utiliser {{domxref("EventTarget.addEventListener", "addEventListener()")}} afin d'écouter les évènements {{event("addtrack")}} et {{event("removetrack")}}.</p> +<p>Il est aussi possible d'utiliser <a href="/fr/docs/Web/API/EventTarget/addEventListener"><code>addEventListener()</code></a> afin d'écouter les évènements <a href="/fr/docs/Web/API/AudioTrackList/addtrack_event"><code>addtrack</code></a> et <a href="/fr/docs/Web/API/AudioTrackList/removetrack_event"><code>removetrack</code></a>.</p> -<h2 id="Exemples">Exemples</h2> +<h2 id="examples">Exemples</h2> -<h3 id="Utilisation_simple">Utilisation simple</h3> +<h3 id="basic_usage">Utilisation simple</h3> <pre class="brush: html"><!-- Simple lecture audio --> -<audio src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay> - Votre navigateur ne supporte pas l'élément <code>audio</code>. +<audio src="AudioTest.ogg" autoplay> + Votre navigateur ne supporte pas l'élément <code>audio</code>. </audio> </pre> -<h3 id="Utilisation_de_l'élément_<source>">Utilisation de l'élément <code><source></code></h3> +<p>Pour savoir quand l'autoplay fonctionne, comment obtenir la permission d'utiliser l'autoplay, et comment et quand il est approprié d'utiliser l'autoplay, consultez notre <a href="/fr/docs/Web/Media/Autoplay_guide">guide sur l'autoplay</a>.</p> + +<h3 id="audio_element_with_source_element">Utilisation de l'élément <code><source></code></h3> + +<p>Cet exemple précise quelle piste audio intégrer en utilisant l'attribut <code>src</code> sur un élément <code><source></code> imbriqué plutôt que directement sur l'élément <code><audio></code>. Il est toujours utile d'inclure le type MIME du fichier à l'intérieur de l'attribut <code>type</code>, car le navigateur est capable de dire instantanément s'il peut lire ce fichier, et de ne pas perdre de temps dessus dans le cas contraire.</p> <pre class="brush: html"><audio controls="controls"> <source src="toto.wav" type="audio/wav"> @@ -252,7 +273,7 @@ elem.audioTrackList.onremovetrack = function(event) { </audio> </pre> -<h3 id="Utilisation_de_plusieurs_éléments_<source>">Utilisation de plusieurs éléments <code><source></code></h3> +<h3 id="audio_with_multiple_source_elements">Utilisation de plusieurs éléments <code><source></code></h3> <p>Dans l'exemple qui suit, le navigateur essaiera de jouer le premier fichier correspondant au premier élément (celui avec le codec Opus) : s'il peut le lire, il n'interprète pas les suivants ; s'il ne peut pas le lire, il tente de lire le deuxième puis, si ce n'est toujours pas possible, le troisième (au format MP3) :</p> @@ -262,13 +283,15 @@ elem.audioTrackList.onremovetrack = function(event) { <source src="toto.mp3" type="audio/mpeg"/> </audio></pre> -<h2 id="Accessibilité">Accessibilité</h2> +<h2 id="accessibility_concerns">Accessibilité</h2> -<p>Les éléments audio contenant des dialogues parlés doivent fournir des sous-titres et des transcriptions qui décrivent précisément le contenu. Les sous-titres permettent aux personnes souffrant de troubles auditifs ou ne pouvant pas utiliser le son de l'appareil de lire le fichier. Les transcriptions permettent aux personnes ayant besoin de plus de temps pour lire le contenu d'utiliser un format plus adéquat.</p> +<p>Les éléments audio contenant des dialogues parlés doivent fournir des sous-titres et des transcriptions qui décrivent précisément le contenu. Les sous-titres, qui sont spécifiés à l'aide de <a href="/fr/docs/Web/API/WebVTT_API">WebVTT</a>, ils permettent aux personnes souffrant de troubles auditifs ou ne pouvant pas utiliser le son de l'appareil de lire le fichier. Les transcriptions permettent aux personnes ayant besoin de plus de temps pour lire le contenu d'utiliser un format plus adéquat.</p> <p>Si un service de sous-titre automatique est utilisé, il est nécessaire de vérifier le contenu généré afin de s'assurer qu'il correspond correctement à la source audio.</p> -<p>En plus des dialogues, les sous-titres et transcriptions devraient également permettre d'identifier les musiques et effets sonores qui véhiculent des informations importantes (dont l'émotion et le ton) :</p> +<p>L'élément <code><audio></code> ne prend pas directement en charge le WebVTT. Vous devrez trouver une bibliothèque ou un framework qui vous offre cette capacité, ou écrire le code pour afficher les sous-titres vous-même. Une option consiste à lire votre audio à l'aide d'un élément <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a>, qui prend en charge WebVTT.</p> + +<p>En plus des dialogues parlés, les sous-titres et les transcriptions doivent également identifier la musique et les effets sonores qui communiquent des informations importantes. Cela inclut l'émotion et le ton. Par exemple, dans le WebVTT ci-dessous, notez l'utilisation de crochets pour donner un ton et un aperçu émotionnel au spectateur ; cela peut aider à établir l'ambiance autrement fournie par la musique, les sons non verbaux et les effets sonores cruciaux, et ainsi de suite.</p> <pre>1 00:00:00 --> 00:00:45 @@ -280,92 +303,86 @@ Elle est où la poulette ? 16 00:00:52 --> 00:01:02 -[sur un ton énervé] Vous rendez la poulette ou c'est plus vous qui donnez à manger aux lapins ? +[sur un ton énervé] Vous rendez la poulette ou c'est plus vous qui donnez à manger aux lapins ?</pre> + +<p>Une autre bonne pratique consiste à fournir du contenu comme un lien de téléchargement comme méthode alternative pour les personnes qui utilisent un navigateur qui ne prend pas en charge <code><audio></code> :</p> + +<pre class="brush: html"><audio controls> + <source src="monAudio.mp3" type="audio/mpeg"> + <source src="monAudio.ogg" type="audio/ogg"> + <p> + Votre navigateur ne prend pas charge l'audio HTML. + Voici <a href="monAudio.mp3">un lien de téléchargement</a> à la place. + </p> +</audio> + </pre> <ul> - <li><a href="/en-US/docs/Plugins/Flash_to_HTML5/Video/Subtitles_captions">Sous-titrage sur le web</a></li> - <li><a href="/fr/docs/Web/API/WebVTT_API">Web Video Text Tracks Format (WebVTT)</a></li> - <li><a href="https://webaim.org/techniques/captions/"><em>WebAIM: Captions, Transcripts, and Audio Descriptions</em> (en anglais)</a></li> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.2_—_Providing_text_alternatives_for_time-based_media">Comprendre les règles WCAG 1.2</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html"><em>Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html"><em>Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li> + <li><a href="/fr/docs/Plugins/Flash_to_HTML5/Video/Subtitles_captions">Sous-titrage sur le web</a></li> + <li><a href="/fr/docs/Web/API/WebVTT_API">Web Video Text Tracks Format (WebVTT)</a></li> + <li><a href="https://webaim.org/techniques/captions/">WebAIM: Captions, Transcripts, and Audio Descriptions</a> (en anglais)</li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.2_—_providing_text_alternatives_for_time-based_media">Comprendre les règles WCAG 1.2</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html">Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0</a> (en anglais)</li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html">Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0</a> (en anglais)</li> </ul> -<h2 id="Résumé_technique">Résumé technique</h2> +<h2 id="technical_summary">Résumé technique</h2> <table class="properties"> - <tbody> - <tr> - <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></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égorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_int.C3.A9gr.C3.A9">contenu intégré</a>.<br> - Si l'attribut {{htmlattrxref("controls", "audio")}} est utilisé : <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a> et <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Contenu autorisé</dfn></th> - <td>Si l'élément possède un attribut {{htmlattrxref("src", "audio")}} : zéro ou plusieurs éléments {{HTMLElement("track")}}, suivis par du contenu transparent ne contenant pas d'éléments média, c'est-à-dire des éléments qui ne soient pas {{HTMLElement("audio")}} ou {{HTMLElement("video")}}<br> - Sinon : zéro ou plusieurs éléments {{HTMLElement("source")}} suivis par un élément {{HTMLElement("track")}}, suivi par du contenu transparent ne contenant pas d'éléments média (ni {{HTMLElement("audio")}} ni {{HTMLElement("video")}}).</td> - </tr> - <tr> - <th scope="row"><dfn>Omission de balises</dfn></th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row"><dfn>Parents autorisés</dfn></th> - <td>Tout élément acceptant du contenu intégré.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>{{ARIARole("application")}}</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLAudioElement")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row"><dfn><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></dfn></th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de 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#embedded_content">contenu intégré</a>. Si l'attribut <a href="#attr-controls"><code>controls</code></a> est utilisé : <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content">contenu interactif</a> et <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Si l'élément possède un attribut <a href="#attr-src"><code>src</code></a> : zéro ou plusieurs éléments <a href="/fr/docs/Web/HTML/Element/track"><code><track></code></a>, suivis par du contenu transparent ne contenant pas d'éléments média, c'est-à-dire des éléments qui ne soient pas <a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a> ou <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a>. Sinon : zéro ou plusieurs éléments <a href="/fr/docs/Web/HTML/Element/Source"><code><source></code></a> suivis par un élément <a href="/fr/docs/Web/HTML/Element/track"><code><track></code></a>, suivi par du contenu transparent ne contenant pas d'éléments média (ni <a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a> ni <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></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 acceptant du contenu intégré.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><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><a href="https://w3c.github.io/aria/#application"><code>application</code></a></td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLAudioElement"><code>HTMLAudioElement</code></a></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('HTML WHATWG', 'embedded-content.html#the-audio-element', '<audio>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-audio-element', '<audio>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> +<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.audio")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/Media/Formats/Audio_codecs">Guide sur les codecs audio utilisés sur le Web</a></li> - <li><a href="/fr/docs/Web/HTML/formats_media_support">Formats de média pris en charge par les éléments <code>audio</code> et <code>video</code></a></li> - <li><a href="/fr/docs/Web/API/Web_Audio_API">API Web Audio</a></li> - <li>{{domxref("HTMLAudioElement")}}</li> - <li><a href="/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/NsIDOMHTMLMediaElement"><code>nsIDOMHTMLMediaElement</code></a></li> - <li>{{htmlelement("source")}}</li> - <li>{{htmlelement("video")}}</li> - <li><a href="/fr/docs/Web/HTML/Utilisation_d'audio_et_video_en_HTML5">Utiliser les éléments HTML5 <code>audio</code> et <code>video</code></a></li> - <li>L'élément <code>audio</code> selon <a href="https://www.whatwg.org/specs/web-apps/current-work/#audio">la spécification HTML5</a></li> - <li><a href="/fr/Apps/Fundamentals/Audio_and_video_delivery/Cross-browser_audio_basics">Utiliser des médias audio pour les différents navigateurs</a></li> + <li><a href="/fr/docs/Web/Media">Technologies media Web</a> + <ul> + <li><a href="/fr/docs/Web/Media/Formats/Containers">Formats des conteneurs medias (types de fichiers)</a></li> + <li><a href="/fr/docs/Web/Media/Formats/Audio_codecs">Guide des codecs audio utilisés sur le web</a></li> + </ul> + </li> + <li>L'API <a href="/fr/docs/Web/API/Web_Audio_API">Web Audio</a></li> + <li><a href="/fr/docs/Web/API/HTMLAudioElement"><code>HTMLAudioElement</code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/Source"><code><source></code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a></li> + <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Apprentissage : Contenu vidéo et audio</a></li> + <li><a href="/fr/docs/Web/Guide/Audio_and_video_delivery/Cross-browser_audio_basics">Les bases de l'audio multi-navigateur</a></li> </ul> diff --git a/files/fr/web/html/element/b/index.html b/files/fr/web/html/element/b/index.html index bad2d8383b..41415effc5 100644 --- a/files/fr/web/html/element/b/index.html +++ b/files/fr/web/html/element/b/index.html @@ -2,118 +2,97 @@ title: '<b> : l''élément portant à l''attention' slug: Web/HTML/Element/b tags: + - Attention - Element - HTML + - HTML text-level semantics + - HTML:Flow content + - HTML:Palpable Content + - HTML:Phrasing content - Reference - Web translation_of: Web/HTML/Element/b +browser-compat: html.elements.b --- <div>{{HTMLRef}}</div> -<p>L'élément <strong><code><b></code></strong> permet d'attirer l'attention du lecteur sur le contenu d'un élément sans que ce contenu revêt une importance particulière. Anciennement utilisé pour mettre le texte en gras. Cet élément ne doit pas être utilisé pour mettre en forme des éléments, c'est la propriété CSS {{cssxref("font-weight")}} qu'il faut utiliser. Si l'élément est d'une importance particulière, on utilisera l'élément HTML {{HTMLElement("strong")}}.</p> +<p class="summary">L'élément HTML <strong><code><b></code></strong> permet d'attirer l'attention du lecteur sur un contenu qui n'a pas, pour autant, d'importance significative. Anciennement utilisé pour mettre le texte en gras. Cet élément ne doit pas être utilisé pour mettre en forme des éléments, c'est la propriété CSS <a href="/fr/docs/Web/CSS/font-weight"><code>font-weight</code></a> qu'il faut utiliser. Si l'élément est d'une importance particulière, on utilisera l'élément HTML <a href="/fr/docs/Web/HTML/Element/strong"><code><strong></code></a>.</p> <div>{{EmbedInteractiveExample("pages/tabbed/b.html", "tabbed-shorter")}}</div> -<p 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> !</p> +<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 de 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#palpable_content">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><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 acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><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>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td> + </tr> + </tbody> +</table> -<h2 id="Attributs">Attributs</h2> +<h2 id="attributes">Attributs</h2> -<p>Seuls <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> peuvent être utilisés pour cet élément.</p> +<p>Seuls <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a> peuvent être utilisés pour cet élément.</p> -<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation</strong></h2> +<h2 id="usage_notes"><strong>Notes d'utilisation</strong></h2> <ul> <li><code><b></code> est habituellement utilisé pour les mots-clés dans les résumés, les noms de produits dans des tests (sans que ceux-ci aient une importance particulière). Il peut également être utilisé afin d'indiquer la première phrase de chaque paragraphe d'un article.</li> - <li>Il ne faut pas confondre l'élément <code><b></code> avec les éléments {{HTMLElement("strong")}}, {{HTMLElement("em")}}, ou {{HTMLElement("mark")}}. L'élément {{HTMLElement("strong")}} réprésente un texte d'une certaine <em>importance</em>, {{HTMLElement("em")}} met une emphase sur le texte et {{HTMLElement("mark")}} réprésente un texte avec une certaine <em>pertinence</em>. L'élément <code><b></code> ne porte aucune information sémantique particulière ; utilisez-le lorsque qu'aucun autre ne convient.</li> - <li>De la même façon, ne balisez pas les titres en utilisant l'élément <code><b></code>. Pour cet usage, utilisez les balises {{HTMLElement("h1")}} à {{HTMLElement("h6")}}. De plus, les feuilles de style peuvent changer le style par défaut de ces éléments. Ils ne seront pas <em>forcément</em> affichés en gras.</li> - <li>C'est généralement une bonne pratique d'utiliser l'attribut {{htmlattrxref("class")}} sur l'élément <code><b></code> lorsqu'on souhaite transporter des informations sémantiques supplémentaires. Cela facilitera le développement des styles à appliquer sur le document, sans avoir à modifier le code HTML.</li> - <li>Historiquement, l'élément <b> a été pensé pour rendre du texte avec une police grasse. Les éléments à seul but stylistique on été déprécié avec HTML 4. Ainsi, le sens de l'élément <code><b></code> a évolué.</li> - <li>S'il n'y aucune raison particulière d'utiliser l'élément <code><b></code>, en dehors de son apparence en gras, l'utilisation de la propriété <a href="/fr/docs/Web/CSS">CSS</a> {{cssxref('font-weight')}} avec une valeur <code>bold</code> est à privilégier.</li> + <li>Il ne faut pas confondre l'élément <code><b></code> avec les éléments <a href="/fr/docs/Web/HTML/Element/strong"><code><strong></code></a>, <a href="/fr/docs/Web/HTML/Element/em"><code><em></code></a>, ou <a href="/fr/docs/Web/HTML/Element/mark"><code><mark></code></a>. L'élément <a href="/fr/docs/Web/HTML/Element/strong"><code><strong></code></a> représente un texte d'une certaine <em>importance</em>, <a href="/fr/docs/Web/HTML/Element/em"><code><em></code></a> met une emphase sur le texte et <a href="/fr/docs/Web/HTML/Element/mark"><code><mark></code></a> représente un texte avec une certaine <em>pertinence</em>. L'élément <code><b></code> ne porte aucune information sémantique particulière ; utilisez-le lorsque qu'aucun autre ne convient.</li> + <li>De la même façon, ne balisez pas les titres en utilisant l'élément <code><b></code>. Pour cet usage, utilisez les balises <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h1></code></a> à <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h6></code></a>. De plus, les feuilles de style peuvent changer le style par défaut de ces éléments. Ils ne seront pas <em>forcément</em> affichés en gras.</li> + <li>C'est généralement une bonne pratique d'utiliser l'attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> sur l'élément <code><b></code> lorsqu'on souhaite transporter des informations sémantiques supplémentaires. Cela facilitera le développement des styles à appliquer sur le document, sans avoir à modifier le code HTML.</li> + <li>Historiquement, l'élément <code><b></code> a été pensé pour rendre du texte avec une police grasse. Les éléments à seul but stylistique ont été dépréciés avec HTML 4. Ainsi, le sens de l'élément <code><b></code> a évolué.</li> + <li>S'il n'y a aucune raison particulière d'utiliser l'élément <code><b></code>, en dehors de son apparence en gras, l'utilisation de la propriété <a href="/fr/docs/Web/CSS">CSS</a> <a href="/fr/docs/Web/CSS/font-weight"><code>font-weight</code></a> avec une valeur <code>bold</code> est à privilégier.</li> </ul> -<h2 id="Exemples">Exemples</h2> +<h2 id="examples">Exemple</h2> <pre class="brush: html"><p> Cet article décrit plusieurs éléments <b class="keyword">texte</b>. - Il explique leurs usage dans un document <b class="keyword">HTML</b>. + Il explique leur usage dans un document <b class="keyword">HTML</b>. </p> Les mots-clés sont affichés avec le style par défaut de l'élément &lt;b&gt;, sûrement en gras. </pre> -<h3 id="Résultat">Résultat</h3> +<h3 id="result">Résultat</h3> -<p>{{EmbedLiveSample("Exemples","200","300")}}</p> +<p>{{EmbedLiveSample("example")}}</p> -<h2 id="Résumé_technique">Résumé technique</h2> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></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égorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Omission de balises</dfn></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row">Tag omission</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row"><dfn>Parents autorisés</dfn></th> - <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Tous les rôles sont autorisés.</td> - </tr> - <tr> - <th scope="row"><dfn>Interface DOM</dfn></th> - <td>{{domxref("HTMLElement")}}</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('HTML WHATWG', 'semantics.html#the-b-element', '<b>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-b-element', '<b>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '<b>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td></td> - </tr> - </tbody> -</table> +<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.b")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>Les autres éléments portants une sémantique textuelle : {{HTMLElement("a")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("abbr")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}.</li> - <li><a href="https://www.w3.org/International/questions/qa-b-and-i-tags">Utiliser les éléments <code><b></code> et <code><i></code> (W3C)</a></li> + <li>Les autres éléments portants une sémantique textuelle : <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/em"><code><em></code></a>, <a href="/fr/docs/Web/HTML/Element/strong"><code><strong></code></a>, <a href="/fr/docs/Web/HTML/Element/small"><code><small></code></a>, <a href="/fr/docs/Web/HTML/Element/cite"><code><cite></code></a>, <a href="/fr/docs/Web/HTML/Element/q"><code><q></code></a>, <a href="/fr/docs/Web/HTML/Element/dfn"><code><dfn></code></a>, <a href="/fr/docs/Web/HTML/Element/abbr"><code><abbr></code></a>, <a href="/fr/docs/Web/HTML/Element/time"><code><time></code></a>, <a href="/fr/docs/Web/HTML/Element/code"><code><code></code></a>, <a href="/fr/docs/Web/HTML/Element/var"><code><var></code></a>, <a href="/fr/docs/Web/HTML/Element/samp"><code><samp></code></a>, <a href="/fr/docs/Web/HTML/Element/kbd"><code><kbd></code></a>, <a href="/fr/docs/Web/HTML/Element/sub"><code><sub></code></a>, <a href="/fr/docs/Web/HTML/Element/sup"><code><sup></code></a>, <a href="/fr/docs/Web/HTML/Element/i"><code><i></code></a>, <a href="/fr/docs/Web/HTML/Element/mark"><code><mark></code></a>, <a href="/fr/docs/Web/HTML/Element/ruby"><code><ruby></code></a>, <a href="/fr/docs/Web/HTML/Element/rp"><code><rp></code></a>, <a href="/fr/docs/Web/HTML/Element/rt"><code><rt></code></a>, <a href="/fr/docs/Web/HTML/Element/bdo"><code><bdo></code></a>, <a href="/fr/docs/Web/HTML/Element/span"><code><span></code></a>, <a href="/fr/docs/Web/HTML/Element/br"><code><br></code></a>, <a href="/fr/docs/Web/HTML/Element/wbr"><code><wbr></code></a>.</li> + <li><a href="https://www.w3.org/International/questions/qa-b-and-i-tags">Utiliser les éléments <code><b></code> et <code><i></code> (W3C)</a></li> </ul> diff --git a/files/fr/web/html/element/base/index.html b/files/fr/web/html/element/base/index.html index c98d297dd2..151e595f3e 100644 --- a/files/fr/web/html/element/base/index.html +++ b/files/fr/web/html/element/base/index.html @@ -4,119 +4,109 @@ slug: Web/HTML/Element/base tags: - Element - HTML + - HTML document metadata + - HTML:Metadata content - Reference - - Web translation_of: Web/HTML/Element/base +browser-compat: html.elements.base --- <div>{{HTMLRef}}</div> -<p>L'élément <strong><code><base></code></strong> définit l'URL de base à utiliser pour recomposer toutes les URL relatives contenues dans un document. Il ne peut y avoir qu'un seul élément <code><base></code> au sein d'un document.</p> +<p class="summary">L'élément <strong><code><base></code></strong> définit l'URL de base à utiliser pour recomposer toutes les URL relatives contenues dans un document. Il ne peut y avoir qu'un seul élément <code><base></code> au sein d'un document.</p> -<p>Il est possible d'accéder à l'URL de base d'un document via un script en utilisant {{domxref('document.baseURI')}}.</p> +<p>Il est possible d'accéder à l'URL de base d'un document via un script en utilisant <a href="/fr/docs/Web/API/Node/baseURI"><code>Node.baseURI</code></a>. Si le document ne possède pas d'élément <code><base></code>; la base par défaut pour la composition des URL sera l'URL courante.</p> -<h2 id="Attributs">Attributs</h2> +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th> + <td>Contenu de méta-données.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Aucun, c'est un <a href="/fr/docs/Glossary/Empty_element">élément vide</a>.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Il ne doit pas y avoir de balise fermante.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>N'importe quel élément <a href="/fr/docs/Web/HTML/Element/head"><code><head></code></a> qui ne contient pas un autre élément <a href="/fr/docs/Web/HTML/Element/base"><code><base></code></a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><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>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLBaseElement"><code>HTMLBaseElement</code></a></td> + </tr> + </tbody> +</table> + +<h2 id="attributes">Attributs</h2> -<p>Les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a> peuvent être utilisés sur cet élément.</p> +<p>Les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a> peuvent être utilisés sur cet élément.</p> + +<div class="notecard warning"> + <p><b>Attention</b></p> + <p>Si l'un des attributs suivants est spécifié, cet élément <strong>doit</strong> venir avant d'autres éléments dont les valeurs d'attribut sont des URL, comme l'attribut <code>href</code> de <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>.</p> +</div> <dl> - <dt>{{htmlattrdef("href")}}</dt> - <dd>L'URL de base à utiliser afin de recomposer les URL relatives contenues dans le document. Si cet attribut est défini, cet élément doit être présent avant les éléments dont les attributs sont des URL.<br> - Les URI absolues et relatives sont autorisées (voir la note ci-après).</dd> - <dt>{{htmlattrdef("target")}}</dt> - <dd>Un nom ou un mot-clé qui indique l'emplacement par défaut à utiliser pour afficher le résultat de la navigation via les hyperliens ou les formulaires. Il sera utilisé pour les éléments qui ne possèdent pas de cible (<em>target</em>) explicitement déclarées. En HTML4 c'est un nom ou un mot-clé associé à une <em>frame</em>. En HTML5, c'est un nom ou un mot-clé associé à un <em>contexte de navigation</em> (par exemple un onglet, une fenêtre ou une <em>frame</em>). Les mots-clés qui sont utilisés ont la signification suivante : - <ul> - <li><code>_self</code> : Charge le résultat dans la même <em>frame</em> HTML4 ou dans le même contexte de navigation HTML5 que le contexte courant. C'est la valeur par défaut de l'attribut s'il n'est pas utilisé.</li> - <li><code>_blank</code> : Charge le résultat dans une nouvelle fenêtre HTML4 non-nommée ou dans un nouveau contexte de navigation HTML5.</li> - <li><code>_parent</code> : Charge le résultat dans le <em>frameset</em> parent de la <em>frame</em> courante HTML4 ou dans le contexte de navigation parent du contexte courant HTML5. S'il n'y a pas de parent, cette option aura le même effet que <code>_self</code>.</li> - <li><code>_top</code> : En HTML4, charge le résultat dans la fenêtre originelle, supprimant les autres <em>frames</em>. En HTML5, charge le résultat dans le contexte de navigation de plus haut niveau (c'est-à-dire le contexte de navigation qui est un ancêtre du contexte courant et qui n'a pas de parent). S'il n'y a pas de parent, cette option aura le même effet que <code>_self</code>.</li> - </ul> - - <p>Si cet attribut est défini, cet élément devra être situé avant n'importe quel élément dont les valeurs des attributs sont des URL.</p> - </dd> + <dt><strong id="attr-href"><code>href</code></strong></dt> + <dd>L'URL de base à utiliser afin de recomposer les URL relatives contenues dans le document. Si cet attribut est défini, cet élément doit être présent avant les éléments dont les attributs sont des URL.<br> + Les URI absolues et relatives sont autorisées (voir la note ci-après).</dd> + <dt><strong id="attr-target"><code>target</code></strong></dt> + <dd>Un <strong>mot-clé</strong> ou un <strong>nom défini par l'auteur</strong> du <a href="/fr/docs/Glossary/Browsing_context">contexte de navigation</a> par défaut pour afficher les résultats de la navigation à partir des éléments <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code><area></code></a> ou <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a> sans attributs <code>target</code> explicites.</dd> + <dd>Les mots-clés suivants ont des significations particulières : + <ul> + <li><code>_self</code> : Charge le résultat dans le contexte de navigation courant. C'est la valeur par défaut de l'attribut s'il n'est pas utilisé.</li> + <li><code>_blank</code> : Charge le résultat dans un nouveau contexte de navigation.</li> + <li><code>_parent</code> : Charge le résultat dans le contexte de navigation parent du contexte courant. S'il n'y a pas de parent, cette option aura le même effet que <code>_self</code>.</li> + <li><code>_top</code> : Charge le résultat dans le contexte de navigation de plus haut niveau (c'est-à-dire le contexte de navigation qui est un ancêtre du contexte courant et qui n'a pas de parent). S'il n'y a pas de parent, cette option aura le même effet que <code>_self</code>.</li> + </ul> + </dd> </dl> -<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> +<h2 id="usage_notes">Notes d'utilisation</h2> -<h3 id="Priorité">Priorité</h3> +<h3 id="multiple_<base>_elements">Éléments <base> multiples</h3> <p>Si plusieurs éléments <code><base></code> sont utilisés, seules les premières valeurs pour <code><strong>href</strong></code> et <code><strong>target</strong></code> sont utilisées, les autres valeurs sont ignorées.</p> -<h3 id="Ancres">Ancres</h3> +<h3 id="in-page_anchors">Ancres dans la page</h3> -<p>Les ancres d'une page ({{HTMLElement("a")}}), par exemple <code><a href="#ancre">ancre</a></code>, sont résolues avec l'URL de base fournie via <code><base></code> et déclenche une requête HTTP vers l'URL de base.</p> +<p>Les ancres d'une page (<a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>), par exemple <code><a href="#ancre">ancre</a></code>, sont résolues avec l'URL de base fournie via <code><base></code> et déclenche une requête HTTP vers l'URL de base.</p> -<p>Ainsi, avec un document qui contient <code><base href="http://www.example.com/"></code> et plus loin <code><a href="#ancre">Ancre</a></code>, le lien fourni par l'ancre pointera vers <code>http://www.example.com/#ancre</code>.</p> +<ol> + <li>Soit <code><base href="https://example.com"></code></li> + <li>… et ce lien : <code><a href="#ancre">Anker</a></code></li> + <li>… le lien enverra vers <code>https://example.com/#ancre</code>.</li> +</ol> -<h2 id="Exemples">Exemples</h2> +<h3 id="open_graph">Open Graph</h3> -<pre class="brush: html"><base href="http://www.example.com/"> -<base target="_blank" href="http://www.example.com/"> -</pre> +<p>Les balises <a href="https://ogp.me/">Open Graph</a> ne tiennent pas de compte de l'élément <code><base></code>, et doivent toujours avoir des URL absolues complètes. Par exemple :</p> -<h2 id="Résumé_technique">Résumé technique</h2> +<pre class="brush: html"><meta property="og:image" content="https://example.com/thumbnail.jpg"></pre> -<table class="properties"> - <tbody> - <tr> - <th><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_m.C3.A9ta-donn.C3.A9es">Contenu de méta-données</a>.</td> - </tr> - <tr> - <th><dfn>Contenu autorisé</dfn></th> - <td>Aucun, c'est un élément vide.</td> - </tr> - <tr> - <th><dfn>Omission de balises</dfn></th> - <td>Il ne doit pas y avoir de balise fermante.</td> - </tr> - <tr> - <th> - <p><dfn>Parents autorisés</dfn></p> - </th> - <td>N'importe quel élément {{HTMLElement("head")}} qui ne contient pas un autre élément {{HTMLElement("base")}}.</td> - </tr> - <tr> - <th>Rôles ARIA autorisés</th> - <td>Aucun.</td> - </tr> - <tr> - <th><dfn>Interface DOM</dfn></th> - <td>{{domxref("HTMLBaseElement")}}</td> - </tr> - </tbody> -</table> +<h2 id="examples">Exemples</h2> -<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('HTML WHATWG', 'semantics.html#the-base-element', '<base>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Aucune modification depuis la dernière dérivation.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'document-metadata#the-base-element', '<base>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Définition du comportement de l'attribut <code>target</code>.</td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.4', '<base>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td>Ajout de l'attribut <code>target</code>.</td> - </tr> - </tbody> -</table> +<pre class="brush: html"><base href="https://www.example.com/"> +<base target="_blank"> +<base target="_top" href="https://example.com/"> +</pre> + +<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.base")}}</p> +<p>{{Compat}}</p> diff --git a/files/fr/web/html/element/basefont/index.html b/files/fr/web/html/element/basefont/index.html index 1906d3fc9e..adab60dbcf 100644 --- a/files/fr/web/html/element/basefont/index.html +++ b/files/fr/web/html/element/basefont/index.html @@ -1,66 +1,73 @@ --- -title: <basefont> +title: "<basefont> : l'élément définissant la fonte de base" slug: Web/HTML/Element/basefont tags: - Element + - Fonts - HTML - - Obsolete + - Layout + - Deprecated - Reference + - Style - Web + - basefont translation_of: Web/HTML/Element/basefont +browser-compat: html.elements.basefont --- -<div>{{obsolete_header}}{{HTMLRef}}</div> +<div>{{HTMLRef}}</div> -<p>L'élément <code><strong><basefont></strong></code> définit la police par défaut (taille, fonte, couleur) pour les éléments qui sont des descendants de cet élément. La taille de la police utilisée peut ensuite varier relativement à cette taille de base grâce à l'élément {{HTMLElement("font")}}.</p> - -<div class="warning"> -<p><strong>Note d'utilisation : N'utilisez pas cet élément !</strong> L'ancien comportement de l'élément {{HTMLElement("font")}} peut être obtenu et contrôlé plus efficacement grâce <a href="/fr/docs/Web/CSS/CSS_Fonts">aux propriétés CSS relatives aux polices de caractères</a>.</p> +<div class="notecard deprecated"> + <p><b>Obsolète</b></p> + <p>Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.</p> </div> -<h2 id="Attributs">Attributs</h2> +<p class="summary">L'élément HTML <strong><code><basefont></code></strong> définit la police par défaut (taille, fonte, couleur) pour les éléments qui sont des descendants de cet élément. La taille de la police utilisée peut ensuite varier relativement à cette taille de base grâce à l'élément <a href="/fr/docs/Web/HTML/Element/font"><code><font></code></a>.</p> + +<p>N'utilisez pas cet élément, mais plutôt les propriétés CSS telles que <a href="/fr/docs/Web/CSS/font"><code>font</code></a>, <a href="/fr/docs/Web/CSS/font-family"><code>font-family</code></a>, <a href="/fr/docs/Web/CSS/font-size"><code>font-size</code></a> et <a href="/fr/docs/Web/CSS/color"><code>color</code></a> pour modifier la configuration de la police d'un élément et de son contenu.</p> + +<h2 id="attributes">Attributs</h2> -<p>Comme tous les autres éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +<p>Comme tous les autres éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> <dl> - <dt>{{htmlattrdef("color")}}</dt> - <dd>Cet attribut définit la couleur du texte grâce à une couleur nommée ou à une couleur définie dans un format hexadécimal #RRGGBB.</dd> - <dt>{{htmlattrdef("face")}}</dt> - <dd>Cet attribut contient une liste d'un ou plusieurs noms de police. Le texte du document, dans son style par défaut, est rendu avec la première police prise en charge par le navigateur du client. Si aucune police listée ne se trouve sur le système local, le navigateur utilise la police proportionnelle ou à largeur fixe du système.</dd> - <dt>{{htmlattrdef("size")}}</dt> - <dd>Cet attribut définit la taille de la police avec une valeur numérique ou relative. Les valeurs numériques vont de 1 à 7 ; 1 étant la plus petite et 3 la taille par défaut.</dd> + <dt><strong id="attr-color"><code>color</code></strong></dt> + <dd>Cet attribut définit la couleur du texte grâce à une couleur nommée ou à une couleur définie dans un format hexadécimal #RRGGBB.</dd> + <dt><strong id="attr-face"><code>face</code></strong></dt> + <dd>Cet attribut contient une liste d'un ou plusieurs noms de police. Le texte du document, dans son style par défaut, est rendu avec la première police prise en charge par le navigateur du client. Si aucune police listée ne se trouve sur le système local, le navigateur utilise la police proportionnelle ou à largeur fixe du système.</dd> + <dt><strong id="attr-size"><code>size</code></strong></dt> + <dd>Cet attribut définit la taille de la police avec une valeur numérique ou relative. Les valeurs numériques vont de 1 à 7 ; 1 étant la plus petite et 3 la taille par défaut.</dd> </dl> -<h2 id="Interface_DOM">Interface DOM</h2> +<h2 id="usage_notes">Notes d'utilisation</h2> -<p>Cette élément implémente l'interface {{domxref('HTMLBaseFontElement')}}.</p> +<p><em>N'utilisez pas cet élément !</em> Bien qu'ayant été une fois normalisé (imprécisément) dans HTML 3.2, il n'a pas été pris en charge par l'ensemble des navigateurs principaux. De plus, les différents navigateurs et leurs versions successives ne l'ont jamais implémenté de la même façon. Utiliser cet élément a toujours produit un résultat <em>imprévisible</em>.</p> -<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> +<p>L'élément <code><basefont></code> a été rendu obsolète dans le standard, comme les autres éléments qui se limitaient à l'apparence. À partir de HTML4, HTML n'apporte plus d'informations de présentation (en dehors de <a href="/fr/docs/Web/HTML/Element/style"><code><style></code></a> et de l'attribut <code><strong>style</strong></code> de chaque élément). Avec HTML5, l'élément <code><basefont></code> a complètement été retiré. Pour tout nouveau développement web, seul <a href="/fr/docs/Web/CSS">CSS</a> doit être utilisé pour les aspects de présentation.</p> -<p>Bien qu'ayant été une fois normalisé (imprécisément) dans HTML 3.2, il n'a pas été pris en charge par l'ensemble des navigateurs principaux. De plus, les différents navigateurs et leurs versions successives ne l'ont jamais implémentés de la même façon. Utiliser cet élément a toujours produit un résultat <em>imprévisible</em>.</p> +<p>Il faut privilégier <a href="/fr/docs/Web/CSS/CSS_Fonts">les propriétés CSS relatives aux polices de caractères</a> pour obtenir l'effet souhaité.</p> -<p>L'élément <code><basefont></code> a été rendu obsolète dans le standard, comme les autres éléments qui se limitaient à l'apparence. À partir de HTML4, HTML n'apporte plus d'informations de présentation (en dehors de {{HTMLElement("style")}} et de l'attribut <code><strong>style</strong></code> de chaque élément). Avec HTML5, l'élément <code><basefont></code> a complètement été retiré. Pour tout nouveau développement web, seul CSS doit être utilisé pour les aspects de présentation.</p> +<h2 id="dom_interface">Interface DOM</h2> -<p>Il faut privilégier <a href="/fr/docs/Web/CSS/CSS_Fonts">les propriétés CSS relatives aux polices de caractères</a> pour obtenir l'effet souhaité.</p> +<p>Cet élément implémente l'interface <a href="/fr/docs/Web/API/HTMLBaseFontElement"><code>HTMLBaseFontElement</code></a>.</p> -<h2 id="Exemples">Exemples</h2> +<h2 id="example">Exemples</h2> -<h3 id="HTML">HTML</h3> +<pre class="brush: html"><basefont color="#FF0000" face="Helvetica" size="+2" /></pre> -<pre class="brush: html"><basefont color="#FF0000" face="Helvetica" size="+2" /> -</pre> +<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.basefont")}}</p> +<p>{{Compat}}</p> -<h2 id="Notes">Notes</h2> +<h2 id="notes">Notes</h2> <ul> - <li>HTML 3.2 supporte l'élément <code><basefont></code> mais seulement avec son attribut <code>size</code>.</li> - <li>Les spécifications HTML strict et XHTML ne supportent pas cet élément.</li> - <li>Bien qu'ayant fait parti de standards transitionnels, certains navigateurs respectant les standards comme Mozilla et Opera ne supportent pas cet élément.</li> - <li>Cet élément peut être imité avec une règle CSS sur l'élément {{HTMLElement("body")}}.</li> - <li>XHTML 1.0 requiert une barre oblique de fermeture à la fin de cet élément : <code><basefont /></code>.</li> + <li>HTML 3.2 prend en charge l'élément <code><basefont></code> mais seulement avec son attribut <code>size</code>.</li> + <li>Les spécifications HTML strict et XHTML ne prennent pas en charge cet élément.</li> + <li>Bien qu'ayant fait partie de standards transitionnels, certains navigateurs respectant les standards comme Mozilla et Opera ne prennent pas en charge cet élément.</li> + <li>Cet élément peut être imité avec une règle CSS sur l'élément <a href="/fr/docs/Web/HTML/Element/body"><code><body></code></a>.</li> + <li>XHTML 1.0 requiert une barre oblique de fermeture à la fin de cet élément : <code><basefont /></code>.</li> </ul> diff --git a/files/fr/web/html/element/bdi/index.html b/files/fr/web/html/element/bdi/index.html index cb0e30ee63..858ece9f1f 100644 --- a/files/fr/web/html/element/bdi/index.html +++ b/files/fr/web/html/element/bdi/index.html @@ -2,68 +2,107 @@ title: '<bdi> : l''élément d''isolation bidirectionnelle' slug: Web/HTML/Element/bdi tags: + - BDI - BiDi + - Directionality - Element - HTML + - HTML text-level semantics + - HTML:Flow content + - HTML:Palpable Content + - HTML:Phrasing content + - Internationalization + - Left-to-Right - Reference + - Right-to-left + - Text - Web + - direction + - i18n + - ltr + - rtl translation_of: Web/HTML/Element/bdi +browser-compat: html.elements.bdi --- <div>{{HTMLRef}}</div> -<p>L'élément <strong><code><bdi></code></strong> (ou élément d'isolation de texte bidirectionnel) isole une portée (<em>span</em>) de texte pouvant être formatée dans une direction différente de celle du texte qui l'entoure. Cela permet, par exemple, de présenter correctement une citation en arabe (écrit de droite à gauche) au sein d'un texte écrit en français (écrit de gauche à droite).</p> +<p class="summary">L'élément <strong><code><bdi></code></strong> (ou élément d'isolation de texte bidirectionnel) isole une portée (<em>span</em>) de texte pouvant être formatée dans une direction différente de celle du texte qui l'entoure. Cela permet, par exemple, de présenter correctement une citation en arabe (écrit de droite à gauche) au sein d'un texte écrit en français (écrit de gauche à droite).</p> <div>{{EmbedInteractiveExample("pages/tabbed/bdi.html", "tabbed-standard")}}</div> -<p 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> !</p> - -<p>Cet élément est utile lorsqu'on intègre du texte dont on ignore la directivité (provenant d'une base de données par exemple), au sein d'un autre texte dont la direction est connue.</p> - -<p class="note"><strong>Note :</strong> On peut également utiliser l'attribut {{htmlattrxref("dir")}} afin de surcharger la directionnalité de l'élément décidée par l'agent utilisateur pour le contenu de l'élément <code><bdi></code>.</p> - -<p>Un texte bidirectionnel est un texte qui contient à la fois des suites de caractères à lire de gauche à droite (LTR pour <em>left-to-right</em>) et des suites de caractères à lire de droite à gauche (RTL pour <em>right-to-left</em>), par exemple une citation en arabe dans un texte en néerlandais. Les navigateurs implémentent <a href="https://www.w3.org/International/articles/inline-bidi-markup/uba-basics">l'algorithme de bidirectionnalité Unicode</a> afin de gérer ces cas. Dans cet algorithme, les caractères ont une directionnalité implicite : les caractères latins sont considérés comme LTR et les caractères arabes comme RTL par exemple. D'autres caractères, comme les espaces ou certains caractères de ponctuation sont considérés comme neutres et leur directionnalité est fournie par les caractères environnant.</p> +<p>Un texte bidirectionnel est un texte qui contient à la fois des suites de caractères à lire de gauche à droite (LTR en anglais pour <i>left-to-right</i>) et des suites de caractères à lire de droite à gauche (RTL en anglais pour <i>right-to-left</i>), par exemple une citation en arabe dans un texte en néerlandais. Les navigateurs implémentent <a href="https://www.w3.org/International/articles/inline-bidi-markup/uba-basics">l'algorithme de bidirection Unicode (W3C)(document en anglais)</a> afin de gérer ces cas. Dans cet algorithme, les caractères ont une direction implicite : les caractères latins sont considérés comme allant de gauche à droite et les caractères arabes comme allant de droite à gauche par exemple. D'autres caractères, comme les espaces ou certains caractères de ponctuation sont considérés comme neutres et leur direction est fournie par les caractères environnants.</p> <p>La plupart du temps, cet algorithme fournira le bon résultat, sans que l'auteur ait besoin de fournir un balisage spécifique. Toutefois, dans certains cas, il faudra aider l'algorithme et c'est là qu'intervient <code><bdi></code>.</p> -<p>L'élément <code><bdi></code> est utilisé afin d'encadrer un fragment de texte pour indiquer à l'algorithme de traiter ce texte avec une directionnalité différente du texte qui l'entoure. Cela fonctionne selon deux axes :</p> +<p>L'élément <code><bdi></code> est utilisé afin d'encadrer un fragment de texte pour indiquer à l'algorithme de traiter ce texte avec une direction différente du texte qui l'entoure. Cela fonctionne selon deux axes :</p> <ul> - <li>La directionnalité du texte contenu dans <code><bdi></code> <em>n'influence pas</em> la directionnalité du texte environnant.</li> - <li>La directionnalité du texte contenu dans <code><bdi></code> <em>n'est pas influencée</em> par la directionnalité du texte environnant.</li> + <li>La direction du texte contenu dans <code><bdi></code> <em>n'influence pas</em> la direction du texte environnant.</li> + <li>La direction du texte contenu dans <code><bdi></code> <em>n'est pas influencée</em> par la direction du texte environnant.</li> </ul> <p>Prenons le texte suivant :</p> -<pre class="no-line-numbers">TEXTE-INJECTÉ - 1re place</pre> +<pre class="brush: plain">TEXTE-INJECTÉ - 1re place</pre> -<p>Si <code>TEXTE-INJECTÉ</code> est un texte LTR, aucun problème. En revanche, si <code>TEXTE-INJECTÉ</code> est RTL, <code> - 1</code> sera considéré comme du texte RTL (car ce fragment est composé de caractères neutres/faibles pour la directionnalité) et le résultat sera donc un mélange incohérent :</p> +<p>Si <code>TEXTE-INJECTÉ</code> est un texte écrit de gauche à droite, aucun problème. En revanche, si <code>TEXTE-INJECTÉ</code> est un texte écrit de droite à gauche, <code>- 1</code> sera considéré comme du texte RTL (car ce fragment est composé de caractères neutres/faibles pour la direction) et le résultat sera donc un mélange incohérent :</p> -<pre class="no-line-numbers">1 - TEXTE-INJECTÉre place</pre> +<pre class="brush: plain">1 - TEXTE-INJECTÉre place</pre> -<p>Si on connaît d'avance la directionnalité de <code>TEXTE-INJECTÉ</code>, on peut corriger le problème en enveloppant <code>TEXTE-INJECTÉ</code> dans un élément {{HTMLElement("span")}} avec un attribut {{htmlattrxref("dir")}} décrivant la bonne directionnalité. Cependant, si on ne connaît pas la directionnalité à l'avance (<code>TEXTE-INJECTÉ</code> provenant d'une base de données ou étant saisi par un utilisateur), on utilisera <code><bdi></code> afin d'empêcher la directionnalité de <code>TEXTE-INJECTÉ</code> d'avoir un impact sur le texte environnant.</p> +<p>Si on connaît d'avance la direction de <code>TEXTE-INJECTÉ</code>, on peut corriger le problème en enveloppant <code>TEXTE-INJECTÉ</code> dans un élément <a href="/fr/docs/Web/HTML/Element/span"><code><span></code></a> avec un attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-dir"><code>dir</code></a> décrivant la bonne direction. Cependant, si on ne connaît pas la direction à l'avance (<code>TEXTE-INJECTÉ</code> provenant d'une base de données ou étant saisi par un utilisateur), on utilisera <code><bdi></code> afin d'empêcher la direction de <code>TEXTE-INJECTÉ</code> d'avoir un impact sur le texte environnant.</p> -<p>Bien que le même effet de rendu puisse être créé avec la règle CSS {{cssxref("unicode-bidi")}}<code> : isolate</code> sur un élément {{HTMLElement("span")}} ou toute méthode de formatage du texte, la sémantique est ici uniquement portée par l'élément <code><bdi></code> . Les navigateurs peuvent notamment ignorer la mise en forme induite par la feuille CSS. Dans ce cas, le texte serait bien affiché en utilisant l'élément HTML mais deviendrait inutilisable si seul CSS est utilisé pour apporter cette information.</p> +<p>Bien que le même effet de rendu puisse être créé avec la règle CSS <a href="/fr/docs/Web/CSS/unicode-bidi"><code>unicode-bidi</code></a><code> : isolate</code> sur un élément <a href="/fr/docs/Web/HTML/Element/span"><code><span></code></a> ou toute méthode de formatage du texte, la sémantique est ici uniquement portée par l'élément <code><bdi></code>. Les navigateurs peuvent notamment ignorer la mise en forme induite par la feuille CSS. Dans ce cas, le texte serait bien affiché en utilisant l'élément HTML mais deviendrait inutilisable si seul CSS est utilisé pour apporter cette information.</p> <p>Utiliser <code><span dir="auto"></code> aura le même effet qu'utiliser <code><bdi></code> mais la sémantique portée sera moindre.</p> -<p>Pour en apprendre plus sur le texte bidirectionnel en HTML, nous vous invitons à lire <a href="/fr/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm">cet article sur l'algorithme qui détermine la direction du texte</a>.</p> +<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 de 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#palpable_content">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><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 acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><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>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td> + </tr> + </tbody> +</table> -<h2 id="Attributs">Attributs</h2> +<h2 id="attributes">Attributs</h2> -<p>Comme tous les éléments HTML, cet élément dispose des <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>. Cependant il a une sémantique légèrement différente. En effet, l'attribut <code><strong>dir</strong></code> n'est pas hérité. S'il n'est pas renseigné, sa valeur par défaut sera <code>auto</code> et le navigateur décidera de la direction à appliquer selon le contenu de l'élément si aucune valeur parmi <code>"rtl"</code>, <code>"ltr"</code> n'est fournie.</p> +<p>Comme tous les éléments HTML, cet élément dispose des <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>. Cependant il a une sémantique légèrement différente. En effet, l'attribut <code><strong>dir</strong></code> n'est pas hérité. S'il n'est pas renseigné, sa valeur par défaut sera <code>auto</code> et le navigateur décidera de la direction à appliquer selon le contenu de l'élément si aucune valeur parmi <code>"rtl"</code>, <code>"ltr"</code> n'est fournie.</p> -<h2 id="Exemples">Exemples</h2> +<h2 id="examples">Exemples</h2> -<h3 id="Texte_écrit_de_gauche_à_droite">Texte écrit de gauche à droite</h3> +<h3 id="no_<bdi>_with_only_ltr">Texte de gauche à droite uniquement, sans <bdi></h3> -<p>Cet exemple affiche les gagnants d'une compétition grâce à des éléments {{HTMLElement("span")}}. Ici, les noms ne s'écrivent que de gauche à droite et le résultat s'affiche correctement :</p> +<p>Cet exemple affiche les gagnants d'une compétition grâce à des éléments <a href="/fr/docs/Web/HTML/Element/span"><code><span></code></a>. Ici, les noms ne s'écrivent que de gauche à droite et le résultat s'affiche correctement :</p> <div id="bdi-sample-1"> <pre class="brush: html"><ul> - <li><span class="name">Henrietta Boffin</span> - 1re place</li> - <li><span class="name">Jerry Cruncher</span> - 2e place</li> -</ul> -</pre> + <li><span class="name">Henrietta Boffin</span> - 1<sup>re</sup> place</li> + <li><span class="name">Jerry Cruncher</span> - 2<sup>e</sup> place</li> +</ul></pre> <div class="hidden"> <pre class="brush: css">body { @@ -72,23 +111,20 @@ translation_of: Web/HTML/Element/bdi padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; -} -</pre> +}</pre> </div> </div> +<div>{{EmbedLiveSample("bdi-sample-1", "100%", 150)}}</div> -<p>{{EmbedLiveSample('bdi-sample-1','','120','','','bdi-example')}}</p> - -<h3 id="Texte_de_droite_à_gauche">Texte de droite à gauche</h3> +<h3 id="no_<bdi>_with_rtl_text">Texte sans <bdi> avec deux directionnalités</h3> -<p>Cela fonctionne sans problème tant que les noms s'écrivent de gauche à droite. Lorsqu'on insère un nom écrit de droite à gauche, la partie "<code>- 1</code>" sera captée par le texte en RTL et le résultat sera confus :</p> +<p>Cela fonctionne sans problème tant que les noms s'écrivent de gauche à droite. Lorsqu'on insère un nom écrit de droite à gauche, la partie « <code>- 1</code> » sera captée par le texte en RTL et le résultat sera confus :</p> <div id="bdi-sample-2"> <pre class="brush: html"><ul> - <li><span class="name">اَلأَعْشَى</span> - 1re place</li> - <li><span class="name">Jerry Cruncher</span> - 2e place</li> -</ul> -</pre> + <li><span class="name">اَلأَعْشَى</span> - 1<sup>re</sup> place</li> + <li><span class="name">Jerry Cruncher</span> - 2<sup>e</sup> place</li> +</ul></pre> <div class="hidden"> <pre class="brush: css">body { @@ -97,23 +133,20 @@ translation_of: Web/HTML/Element/bdi padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; -} -</pre> +}</pre> </div> </div> +<div>{{EmbedLiveSample("bdi-sample-2", "100%", 150)}}</div> -<p>{{ EmbedLiveSample('bdi-sample-2','','120','','','bdi-example') }}</p> - -<h3 id="Utiliser_<bdi>_avec_du_texte_utilisant_les_deux_directions">Utiliser <code><bdi></code> avec du texte utilisant les deux directions</h3> +<h3 id="using_<bdi>_with_ltr_and_rtl_text">Texte avec <bdi> et deux directionnalités</h3> <p>Pour éviter cet écueil, on pourra utiliser <code><bdi></code> pour séparer le contenu :</p> <div id="bdi-sample-3"> <pre class="brush: html"><ul> - <li><bdi class="name">اَلأَعْشَى</bdi> - 1re place</li> - <li><bdi class="name">Jerry Cruncher</bdi> - 2e place</li> -</ul> -</pre> + <li><bdi class="name">اَلأَعْشَى</bdi> - 1<sup>re</sup> place</li> + <li><bdi class="name">Jerry Cruncher</bdi> - 2<sup>e</sup> place</li> +</ul></pre> <div class="hidden"> <pre class="brush: css">body { @@ -122,78 +155,24 @@ translation_of: Web/HTML/Element/bdi padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; -} -</pre> +}</pre> </div> </div> +<div>{{EmbedLiveSample("bdi-sample-3", "100%", 150)}}</div> -<p>{{ EmbedLiveSample('bdi-sample-3','','120','','','bdi-example') }}</p> - -<h2 id="Résumé_technique">Résumé technique</h2> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></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égorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Contenu autorisé</dfn></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Omission de balises</dfn></th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row"><dfn>Parents autorisés</dfn></th> - <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Tous les rôles sont autorisés.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLElement")}}</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('HTML WHATWG', 'semantics.html#the-bdi-element', '<bdi>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-bdi-element', '<bdi>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> +<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.bdi")}}</p> +<p>{{Compat}}</p> -<h2 dir="ltr" id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/Localization">La localisation et l'internationalisation</a></li> - <li>{{HTMLElement("bdo")}}</li> - <li>Les propriétés CSS {{cssxref("direction")}} et {{cssxref("unicode-bidi")}}</li> + <li><a href="https://www.w3.org/International/articles/inline-bidi-markup/">Le balisage en ligne et texte bidirectionnel en HTML (W3C)</a> (en anglais)</li> + <li><a href="https://www.w3.org/International/articles/inline-bidi-markup/uba-basics">Les bases de l'algorithme bidirectionnel Unicode (W3C)</a> (en anglais)</li> + <li>Un élément HTML connexe : <a href="/fr/docs/Web/HTML/Element/bdo"><code><bdo></code></a></li> + <li>Les propriétés CSS <a href="/fr/docs/Web/CSS/direction"><code>direction</code></a> et <a href="/fr/docs/Web/CSS/unicode-bidi"><code>unicode-bidi</code></a></li> </ul> diff --git a/files/fr/web/html/element/bdo/index.html b/files/fr/web/html/element/bdo/index.html index 2df6620cf0..4ba543103c 100644 --- a/files/fr/web/html/element/bdo/index.html +++ b/files/fr/web/html/element/bdo/index.html @@ -1,113 +1,106 @@ --- -title: '<bdo> : l''élément de surcharge bidirectionnelle' +title: '<bdo> : l''élément de remplacement bidirectionnelle' slug: Web/HTML/Element/bdo tags: - BiDi + - Bidirectional Text - Element - HTML + - HTML text-level semantics + - HTML:Flow content + - HTML:Palpable Content + - HTML:Phrasing content + - Left to Right - Reference + - Right to Left + - Text + - Text Direction + - Text Rendering + - Web + - ltr + - rtl translation_of: Web/HTML/Element/bdo +browser-compat: html.elements.bdo --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><bdo></code> </strong>(pour <em><strong>b</strong>i<strong>d</strong>irectional <strong>o</strong>verride</em> ou « surcharge bidirectionnelle ») est utilisé afin d'outrepasser la direction du texte. Cela permet d'imposer une direction donnée à un texte. L'orientation du texte est inversée mais pas celle des caractères.</p> +<p class="summary">L'élément HTML <strong><code><bdo></code></strong> (pour élément de remplacement du texte bidirectionnel) est utilisé afin d'outrepasser la direction du texte. Cela permet d'imposer une direction donnée à un texte. L'orientation du texte est inversée mais pas celle des caractères.</p> <div>{{EmbedInteractiveExample("pages/tabbed/bdo.html", "tabbed-standard")}}</div> -<p 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> !</p> +<p>Les caractères du texte sont dessinés à partir du point de départ dans la direction donnée ; l'orientation des caractères individuels n'est pas affectée (les caractères ne sont donc pas dessinés vers l'arrière, par exemple).</p> +<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 de 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#palpable_content">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><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 acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><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>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>. Auparavant et jusqu'à Gecko 1.9.2 (Firefox 4) inclus, Firefox implémente l'interface <a href="/fr/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> pour cet élément.</td> + </tr> + </tbody> +</table> -<h2 id="Attributs">Attributs</h2> +<h2 id="attributes">Attributs</h2> -<p>Comme pour tous les éléments, on peut appliquer <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +<p>Comme pour tous les éléments, on peut appliquer <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> <dl> - <dt>{{htmlattrdef("dir")}}</dt> - <dd>La direction du texte au sein de l'élément. Cet attribut peut valoir : - <ul> - <li><code>ltr</code> : pour un texte allant de gauche à droite (<em>left-to-right</em>).</li> - <li><code>rtl</code> : pour un texte allant de droite à gauche (<em>right-to-left</em>).</li> - <li><code>auto</code> : Selon la nature du contenu, le navigateur décide de la direction.</li> - </ul> - </dd> + <dt><strong id="attr-dir"><code>dir</code></strong></dt> + <dd>La direction du texte au sein de l'élément. Cet attribut peut valoir : + <ul> + <li><code>ltr</code> : pour un texte allant de gauche à droite (<i>left-to-right</i>).</li> + <li><code>rtl</code> : pour un texte allant de droite à gauche (<i>right-to-left</i>).</li> + </ul> + </dd> </dl> -<h2 id="Exemples">Exemples</h2> - -<h3 id="HTML">HTML</h3> +<h2 id="examples">Exemples</h2> <pre class="brush: html"><!-- Change la direction du texte --> <p>Ce texte se lit de gauche à droite.</p> <p><bdo dir="rtl">Ce texte se lit de droite à gauche.</bdo></p></pre> -<h3 id="Résultat">Résultat</h3> +<h3 id="result">Résultat</h3> -<p>{{EmbedLiveSample("Exemples")}}</p> +<p>{{EmbedLiveSample("examples","100%",120)}}</p> -<h2 id="Note">Note</h2> +<h2 id="notes">Notes</h2> <p>La spécification HTML 4 ne définissait pas d'évènement pour cet élément. Ils ont été ajoutés en XHTML. Ceci était probablement un oubli de la spécification HTML 4.</p> -<h2 id="Résumé_technique">Résumé technique</h2> -<table class="properties"> - <tbody> - <tr> - <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></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égorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Contenu autorisé</dfn></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Omission de balises</dfn></th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row"><dfn>Parents autorisés</dfn></th> - <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Tous les rôles sont autorisés.</td> - </tr> - <tr> - <th scope="row"><dfn>Interface DOM</dfn></th> - <td>{{domxref("HTMLElement")}}. Auparavant et jusqu'à Gecko 1.9.2 (Firefox 4) inclus, Firefox implémente l'interface {{domxref("HTMLSpanElement")}} pour cet élément.</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('HTML WHATWG', 'semantics.html#the-bdo-element', '<bdo>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-bdo-element', '<bdo>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'dirlang.html#h-8.2.4', '<bdo>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td> </td> - </tr> - </tbody> -</table> +<h2 id="specifications">Spécifications</h2> + +<p>{{Specifications}}</p> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<p>{{Compat}}</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="see_also">Voir aussi</h2> -<p>{{Compat("html.elements.bdo")}}</p> +<ul> + <li>Élément HTML associé : <a href="/fr/docs/Web/HTML/Element/bdi"><code><bdi></code></a></li> +</ul> diff --git a/files/fr/web/html/element/bgsound/index.html b/files/fr/web/html/element/bgsound/index.html index a4bcdd1142..be61ed23e8 100644 --- a/files/fr/web/html/element/bgsound/index.html +++ b/files/fr/web/html/element/bgsound/index.html @@ -1,59 +1,68 @@ --- -title: '<bgsound> : l''élément d''arrière-plan sonore (obsolète)' +title: '<bgsound> : l''élément d''arrière-plan sonore' slug: Web/HTML/Element/bgsound tags: + - Audio + - Background Sound - Element - HTML + - Internet Explorer - Non-standard - - Obsolete + - Deprecated - Reference - Web translation_of: Web/HTML/Element/bgsound +browser-compat: html.elements.bgsound --- -<div>{{HTMLRef}}{{non-standard_header}}{{obsolete_header}}</div> +<div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><bgsound></code></strong> (pour <em>background sound</em> ou « son d'arrière-plan ») est un élément défini par Internet Explorer qui permet d'associer un son d'ambiance à une page.</p> +<div class="notecard deprecated"> + <p><b>Obsolète</b></p> + <p>Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.</p> +</div> + +<p class="summary">L'élément HTML <strong><code><bgsound></code></strong> (pour <em>background sound</em> ou « son d'arrière-plan ») est un élément défini par Internet Explorer qui permet d'associer un son d'ambiance à une page.</p> -<div class="warning"> -<p><strong>Attention : cet élément n'est pas standard et ne doit pas être utilisé !</strong> Pour intégrer du son à une page web, on utilisera l'élément {{HTMLElement("audio")}}.</p> +<div class="notecard warning"> + <p><b>Attention :</b></p> + <p><strong></strong>Cet élément n'est pas standard et ne doit pas être utilisé !</strong> Pour intégrer du son à une page web, on utilisera l'élément <a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a>.</p> </div> -<h2 id="Attributs">Attributs</h2> +<h2 id="attributes">Attributs</h2> <dl> - <dt>{{htmlattrdef("balance")}}</dt> + <dt><strong id="attr-balance"><code>balance</code></strong></dt> <dd>Cet attribut accepte un nombre entre -10 000 et +10 000, qui déterminera comment le volume sera réparti entre les hauts-parleurs (ou les écouteurs).</dd> - <dt>{{htmlattrdef("loop")}}</dt> + <dt><strong id="attr-loop"><code>loop</code></strong></dt> <dd>Cet attribut indique le nombre de fois que le son doit être joué, grâce à une valeur numérique ou avec le mot-clé <code>infinite</code> (infini).</dd> - <dt>{{htmlattrdef("src")}}</dt> + <dt><strong id="attr-src"><code>src</code></strong></dt> <dd>Cet attribut indique l'URL du fichier sonore qui doit être joué. Il doit être d'un des types suivants : .wav, .au, ou .mid.</dd> - <dt>{{htmlattrdef("volume")}}</dt> + <dt><strong id="attr-volume"><code>volume</code></strong></dt> <dd>Cet attribut accepte un nombre entre -10 000 et 0 qui déterminera le volume du son.</dd> </dl> -<h2 id="Exemples">Exemples</h2> - -<h3 id="HTML">HTML</h3> +<h2 id="example">Exemple</h2> <pre class="brush:html"><bgsound src="son1.mid"> -<bgsound src="son2.au" loop="infinite"> -</pre> +<bgsound src="son2.au" loop="infinite"></pre> -<h2 id="Notes">Notes</h2> +<h2 id="usage_notes">Notes d'utilisation</h2> -<p>Une fonctionnalité similaire pouvait être obtenue dans d'autres navigateurs grâce à l'élément {{htmlelement("embed")}} afin d'invoquer un lecteur audio. Cet élément étant également obsolète, il est préférable d'utiliser {{HTMLElement("audio")}}.</p> +<p>Une fonctionnalité similaire pouvait être obtenue dans d'autres navigateurs grâce à l'élément <a href="/fr/docs/Web/HTML/Element/embed"><code><embed></code></a> afin d'invoquer un lecteur audio. Cet élément étant également obsolète, il est préférable d'utiliser <a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a>.</p> <p>On peut écrire <code>bgsound</code> avec une balise auto-fermante <code><bgsound /></code>. Cependant, puisque cet élément ne fait pas partie du standard, le transformer en XHTML ne le rendra pas valide.</p> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<h2 id="specifications">Spécifications</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.bgsound")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>L'élément standard {{htmlelement("audio")}} qui permet d'ajouter du son dans un document HTML.</li> + <li>L'élément standard <a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a> qui permet d'ajouter du son dans un document HTML.</li> </ul> diff --git a/files/fr/web/html/element/big/index.html b/files/fr/web/html/element/big/index.html index 77536b5bb8..9ce6c4aa2c 100644 --- a/files/fr/web/html/element/big/index.html +++ b/files/fr/web/html/element/big/index.html @@ -1,67 +1,95 @@ --- -title: '<big> : l''élément d''agrandissement de texte (obsolète)' +title: '<big> : l''élément d''agrandissement de texte' slug: Web/HTML/Element/big tags: - Element - HTML - - Obsolete + - Deprecated - Reference - Web translation_of: Web/HTML/Element/big +browser-compat: html.elements.big --- -<div>{{obsolete_header}}{{HTMLRef}}</div> +<div>{{HTMLRef}}</div> -<p>L'élément <strong><code><big></code></strong> (gros) augmente d'une taille la police du texte de l'élément (il permet par exemple de passer de <code>small</code> à <code>medium</code>, ou de <code>large</code> à <code>x-large</code>) jusqu'à atteindre la taille maximale du navigateur.</p> +<div class="notecard deprecated"> + <p><b>Obsolète</b></p> + <p>Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.</p> +</div> -<div class="note"> -<p><strong>Note d'utilisation : </strong>Cet élément est purement stylistique. Il a été supprimé dans <a href="/fr/docs/Web/Guide/HTML/HTML5">HTML5</a> et ne doit plus être utilisé. Les développeurs web doivent utiliser les propriétés <a href="/fr/docs/Web/CSS">CSS</a> pour remplacer cet élément.</p> +<p class="summary">L'élément HTML <strong><code><big></code></strong> (gros) augmente d'une taille la police du texte de l'élément (il permet par exemple de passer de <code>small</code> à <code>medium</code>, ou de <code>large</code> à <code>x-large</code>) jusqu'à atteindre la taille maximale autorisée par le navigateur.</p> + +<div class="notecard note"> + <p><b>Note d'utilisation :</b></p> + <p>Cet élément est purement stylistique. Il a été supprimé en HTML5 et ne doit plus être utilisé. Les développeurs web doivent utiliser les propriétés <a href="/fr/docs/Web/CSS">CSS</a> pour remplacer cet élément.</p> </div> -<h2 id="Attributs">Attributs</h2> +<h2 id="attributes">Attributs</h2> + +<p>Cet élément n'a aucun autre attribut en dehors des <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a> communs à tous les éléments.</p> -<p>Cet élément n'a aucun autre attribut en dehors des <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a> communs à tous les éléments.</p> +<h2 id="examples">Exemples</h2> -<h2 id="Exemples">Exemples</h2> +<p>Nous voyons ici des exemples montrant l'utilisation de <code><big></code> suivis d'un exemple montrant comment obtenir les mêmes résultats en utilisant plutôt la syntaxe CSS moderne.</p> -<h3 id="Exemple_simple">Exemple simple</h3> +<h3 id="using_<big>">Utilisation de <code><big></code></h3> + +<div id="using_big"> +<p>Dans cet exemple, on utilise l'élément obsolète <code><big></code> afin d'augmenter la taille du texte.</p> + +<h4 id="html">HTML</h4> <pre class="brush: html"><p> - Ceci est la première phrase. - <big> - Cette phrase est en grosses lettres. - </big> + C'est la première phrase. <big>Cette phrase + entière phrase est en plus gros caractères.</big> </p></pre> +</div> +<h4 id="result">Résultat</h4> + +<p>{{EmbedLiveSample("using_big", "", 110)}}</p> -<h3 id="Utilisation_du_CSS_pour_remplacer_<big>">Utilisation du CSS pour remplacer <code><big></code></h3> +<h3 id="using_css_font-size">Utilisation de la propriété CSS <code>font-size</code></h3> + +<p>Cet exemple utilise la propriété CSS <a href="/fr/docs/Web/CSS/font-size"><code>font-size</code></a> pour augmenter la taille de la police d'un niveau.</p> + +<h4 id="css">CSS</h4> + +<pre class="brush: css">.bigger { + font-size: larger; +}</pre> + +<h4 id="html_2">HTML</h4> <pre class="brush: html"><p> - Ceci est la première phrase. - <span style="font-size:1.2em"> - Cette phrase est en grosses lettres. - </span> + C'est la première phrase. <span class="bigger">Cette phrase + entière est écrite en plus grosses lettres.</span> </p></pre> -<h3 id="Resultat">Resultat</h3> +<h4 id="result_2">Résultat</h4> -<p>{{EmbedLiveSample("Utilisation_du_CSS_pour_remplacer_&lt;big&gt;",300,200)}}</p> +<p>{{EmbedLiveSample("using_css_font-size", "", 100)}}</p> -<h2 id="Interface_DOM">Interface DOM</h2> +<h2 id="DOM_interface">Interface DOM</h2> -<p>Cette élément implémente l'interface {{domxref('HTMLElement')}}.</p> +<p>Cet élément implémente l'interface <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>.</p> + +<div class="note"> + <p><b>Note d'implémentation :</b></p> + <p>Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface <a href="/fr/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> pour cet élément.</p> +</div> -<div class="note"><strong>Note d'implémentation : </strong>Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface {{domxref('HTMLSpanElement')}} pour cet élément.</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.big")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>{{htmlelement("small")}}</li> - <li>{{htmlelement("font")}}</li> - <li>{{htmlelement("style")}}</li> - <li>Spécification HTML 4.01 sur <a class="external" href="http://www.w3.org/TR/html4/present/graphics.html#h-15.2">la mise en forme des polices</a></li> + <li>CSS : <a href="/fr/docs/Web/CSS/font-size"><code>font-size</code></a>, <a href="/fr/docs/Web/CSS/font"><code>font</code></a></li> + <li>HTML : <a href="/fr/docs/Web/HTML/Element/small"><code><small></code></a>, <a href="/fr/docs/Web/HTML/Element/font"><code><font></code></a>, <a href="/fr/docs/Web/HTML/Element/style"><code><style></code></a></li> + <li>Spécification HTML 4.01 sur <a href="https://www.w3.org/TR/html4/present/graphics.html#h-15.2">la mise en forme utilisant les polices</a></li> </ul> diff --git a/files/fr/web/html/element/blink/index.html b/files/fr/web/html/element/blink/index.html index 1baca82026..dcd82c1270 100644 --- a/files/fr/web/html/element/blink/index.html +++ b/files/fr/web/html/element/blink/index.html @@ -1,43 +1,49 @@ --- -title: '<blink> : l''élément de texte clignotant (obsolète)' +title: '<blink> : l''élément de texte clignotant' slug: Web/HTML/Element/blink tags: - - Déprécié + - Blink - Element - HTML - - Obsolete + - Deprecated - Reference - Web translation_of: Web/HTML/Element/blink +browser-compat: html.elements.blink --- -<div>{{HTMLRef}}{{Deprecated_header}}{{obsolete_header}}{{Non-standard_header}}</div> +<div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><blink></code></strong> (N.D.T <em>blink</em> signifie « clignoter ») est un élément non-standard faisant clignoter le texte qu'il contient.</p> +<div class="notecard deprecated"> + <p><b>Obsolète</b></p> + <p>Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.</p> +</div> -<div class="warning"><strong>Attention :</strong> ne pas utiliser cet élément qui n'est pas standard et qui est obsolète. Le clignotement de texte est contraire à la plupart des standards d'accessibilité, la spécification CSS permet donc aux navigateurs d'ignorer la valeur <code>blink</code><strong>.</strong></div> +<p class="summary">L'élément HTML <strong><code><blink></code></strong> (N.D.T le verbe <i>blink</i> signifie « clignoter ») est un élément non-standard faisant clignoter le texte qu'il contient.</p> -<h2 id="Interface_DOM">Interface DOM</h2> +<div class="notecard warning"> + <p><b>Attention :</b></p> + <p>Ne pas utiliser cet élément qui n'est pas standard et qui est obsolète. Le clignotement de texte est contraire à la plupart des standards d'accessibilité, la spécification CSS permet donc aux navigateurs d'ignorer la valeur <code>blink</code>.</p> +</div> -<p>Cet élément n'est pas pris en charge et implémente donc l'interface {{domxref('HTMLUnknownElement')}}.</p> +<h2 id="dom_interface">Interface DOM</h2> -<h2 id="Exemples">Exemples</h2> +<p>Cet élément n'est pas pris en charge et implémente donc l'interface <a href="/fr/docs/Web/API/HTMLUnknownElement"><code>HTMLUnknownElement</code></a>.</p> -<h3 id="HTML">HTML</h3> +<h2 id="example">Exemple</h2> -<pre class="brush:html"><blink>ლ(ಠ_ಠლ)</blink> -</pre> +<pre class="brush:html"><blink>Why would somebody use this?</blink></pre> -<h3 id="Résultat">Résultat</h3> +<h3 id="result_toned_down">Résultat (atténué !)</h3> -<p>{{EmbedLiveSample("Exemples","300","200")}}</p> +<p><img src="htmlblinkelement.gif"></p> -<h2 id="Spécifications">Spécifications</h2> +<h2 id="specifications">Spécifications</h2> <p>Cet élément est non-standard et n'appartient à aucune spécification. Pour vérifier, <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#non-conforming-features">voir la spécification HTML</a>.</p> -<h2 id="Prothèse_CSS_(polyfill)">Prothèse CSS (<em>polyfill</em>)</h2> +<h2 id="css_polyfill">Prothèse CSS (<em>polyfill</em>)</h2> -<p>Si vous avez réellement besoin de cette fonctionnalité (!!!) vous pouvez utiliser le code CSS suivant qui fonctionne à partir d'IE10.</p> +<p>Si vous avez réellement besoin de cette fonctionnalité, vous pouvez utiliser le code CSS suivant qui fonctionne à partir d'IE10.</p> <pre class="brush: css">blink { -webkit-animation: 2s linear infinite condemed_blink_effect; // pour Safari 4.0-8.0 @@ -66,17 +72,19 @@ translation_of: Web/HTML/Element/blink } }</pre> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<h2 id="specifications">Spécifications</h2> -<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> +<p>{{Specifications}}</p> -<p>{{Compat("html.elements.blink")}}</p> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<h2 id="Voir_aussi">Voir aussi</h2> +<p>{{Compat}}</p> + +<h2 id="see_also">Voir aussi</h2> <ul> - <li><a href="http://www.montulli.org/theoriginofthe%3Cblink%3Etag">Histoire autour de la création de l'élément <code><blink></code></a></li> - <li>{{cssxref("text-decoration")}} qui possède une valeur pour le clignotement, bien que les navigateurs ne soient pas obligés de restituer cet effet</li> - <li>{{htmlelement("marquee")}}, un autre élément non-standard similaire</li> - <li><a href="/fr/docs/Web/CSS/Animations_CSS">Les animations CSS</a> sont la meilleure façon d'obtenir un tel effet</li> + <li><a href="http://www.montulli.org/theoriginofthe%3Cblink%3Etag">Histoire autour de la création de l'élément <code><blink></code></a></li> + <li><a href="/fr/docs/Web/CSS/text-decoration"><code>text-decoration</code></a> qui possède une valeur pour le clignotement, bien que les navigateurs ne soient pas obligés de restituer cet effet</li> + <li><a href="/fr/docs/Web/HTML/Element/marquee"><code><marquee></code></a>, un autre élément non-standard similaire</li> + <li><a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Les animations CSS</a> sont la meilleure façon d'obtenir un tel effet</li> </ul> diff --git a/files/fr/web/html/element/blockquote/index.html b/files/fr/web/html/element/blockquote/index.html index 31d38579c2..517632a938 100644 --- a/files/fr/web/html/element/blockquote/index.html +++ b/files/fr/web/html/element/blockquote/index.html @@ -2,118 +2,106 @@ title: '<blockquote> : l''élément de bloc de citation' slug: Web/HTML/Element/blockquote tags: + - Blockquote - Element - HTML + - HTML grouping content + - HTML:Flow content + - HTML:Palpable Content + - HTML:Sectioning root + - Quotations - Reference - Web translation_of: Web/HTML/Element/blockquote +browser-compat: html.elements.blockquote --- <div>{{HTMLRef}}</div> -<p>L'élément <strong><code><blockquote></code></strong> (qui signifie <em>bloc de citation</em>) indique que le texte contenu dans l'élément est une citation longue. Le texte est généralement affiché avec une indentation (voir <a href="#notes">les notes</a> ci-après). Une URL indiquant la source de la citation peut être donnée grâce à l'attribut <strong><code>cite</code></strong> tandis qu'un texte représentant la source peut être donné via l'élément {{HTMLElement("cite")}}.</p> +<p class="summary">L'élément HTML <strong><code><blockquote></code></strong> (qui signifie <em>bloc de citation</em>) indique que le texte contenu dans l'élément est une citation longue. Le texte est généralement affiché avec une indentation (voir <a href="#usage_notes">les notes</a> ci-après). Une URL indiquant la source de la citation peut être donnée grâce à l'attribut <strong><code>cite</code></strong> tandis qu'un texte représentant la source peut être donné via l'élément <a href="/fr/docs/Web/HTML/Element/cite"><code><cite></code></a>.</p> <div>{{EmbedInteractiveExample("pages/tabbed/blockquote.html","tabbed-standard")}}</div> -<p 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> !</p> +<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 de flux</a>, <a href="fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#racines_de_sectionnement">racine de section</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</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 acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><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>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLQuoteElement"><code>HTMLQuoteElement</code></a></td> + </tr> + </tbody> +</table> -<h2 id="Attributs">Attributs</h2> +<h2 id="attributes">Attributs</h2> -<p>Comme pour tous les éléments HTML, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_globaux">les attributs universels</a>.</p> +<p>Comme pour tous les éléments HTML, on peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> <dl> - <dt>{{htmlattrdef("cite")}}</dt> - <dd>Une URL qui désigne la source du document ou du message cité. Cet attribut est prévu pour signaler l'information expliquant le contexte ou la référence de la citation</dd> + <dt><strong id="attr-cite"><code>cite</code></strong></dt> + <dd>Une URL qui désigne la source du document ou du message cité. Cet attribut est prévu pour signaler l'information expliquant le contexte ou la référence de la citation</dd> </dl> -<h2 id="Notes"><a id="notes" name="notes">Notes</a></h2> - -<ul> - <li>Pour changer l'indentation de <code><blockquote></code>, on utilisera la propriété <a href="/fr/docs/Web/CSS">CSS</a> {{cssxref("margin-left")}} ou {{cssxref("margin-right")}} (ou encore la propriété raccourcie {{cssxref("margin")}})</li> - <li>Pour les citations courtes, on pourra utiliser l'élément {{HTMLElement("q")}}.</li> -</ul> +<h2 id="usage_notes">Notes d'utilisation</h2> -<h2 id="Exemples">Exemples</h2> +<p>Pour changer l'indentation de <code><blockquote></code>, on utilisera la propriété <a href="/fr/docs/Glossary/CSS">CSS</a> <a href="/fr/docs/Web/CSS/margin-left"><code>margin-left</code></a> ou <a href="/fr/docs/Web/CSS/margin-right"><code>margin-right</code></a> (ou encore la propriété raccourcie <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>)</p> -<h3 id="HTML">HTML</h3> +<p>Pour les citations courtes, on pourra utiliser l'élément <a href="/fr/docs/Web/HTML/Element/q"><code><q></code></a>.</p> -<pre class="brush: html"><blockquote cite="http://developer.mozilla.org"> - <p>Ceci est une citation issue du Mozilla Developer Network.</p> -</blockquote> -</pre> +<h2 id="example">Exemple</h2> -<h3 id="Résultat">Résultat</h3> +<p>Cet exemple démontre l'utilisation de l'élément <code><blockquote></code> pour citer un passage de <a href="https://datatracker.ietf.org/doc/html/rfc1149">RFC 1149</a>, <cite>A Standard for the Transmission of IP Datagrams on Avian Carriers.</cite></p> -<p>{{EmbedLiveSample("Exemples","200","200")}}</p> +<pre class="brush: html"><blockquote cite="https://datatracker.ietf.org/doc/html/rfc1149"> + <p>Avian carriers can provide high delay, low + throughput, and low altitude service. The + connection topology is limited to a single + point-to-point path for each carrier, used with + standard carriers, but many carriers can be used + without significant interference with each other, + outside of early spring. This is because of the 3D + ether space available to the carriers, in contrast + to the 1D ether used by IEEE802.3. The carriers + have an intrinsic collision avoidance system, which + increases availability.</p> +</blockquote></pre> -<h2 id="Résumé_technique">Résumé technique</h2> +<p>Le résultat de cet extrait HTML ressemble à ceci :</p> -<table class="properties"> - <tbody> - <tr> - <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, racine de section, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Contenu autorisé</dfn></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Omission de balises</dfn></th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row"><dfn>Parents autorisés</dfn></th> - <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Tous les rôles sont autorisés.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLQuoteElement")}}</td> - </tr> - </tbody> -</table> +<p>{{EmbedLiveSample("example", 640, 200)}}</p> -<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('HTML WHATWG', 'semantics.html#the-blockquote-element', '<blockquote>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-blockquote-element', '<blockquote>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '<blockquote>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td> </td> - </tr> - </tbody> -</table> +<h2 id="specifications">Spécifications</h2> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<p>{{Specifications}}</p> -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<p>{{Compat("html.elements.blockquote")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>{{HTMLElement("q")}} qui permet de placer des citations en incise dans une ligne de texte.</li> - <li>{{HTMLElement("cite")}} qui permet d'indiquer la source de la citation.</li> + <li><a href="/fr/docs/Web/HTML/Element/q"><code><q></code></a> qui permet de placer des citations en incise dans une ligne de texte.</li> + <li><a href="/fr/docs/Web/HTML/Element/cite"><code><cite></code></a> qui permet d'indiquer la source de la citation.</li> </ul> diff --git a/files/fr/web/html/element/body/index.html b/files/fr/web/html/element/body/index.html index a4ea8947d5..79a181ecd4 100644 --- a/files/fr/web/html/element/body/index.html +++ b/files/fr/web/html/element/body/index.html @@ -5,79 +5,118 @@ tags: - Element - HTML - Reference + - Sectioning Root Element + - Sections - Web translation_of: Web/HTML/Element/body +browser-compat: html.elements.body --- <div>{{HTMLRef}}</div> -<p>L'élément <strong><code><body></code></strong> représente le contenu principal du document HTML. Il ne peut y avoir qu'un élément <code><body></code> par document.</p> +<p class="summary">L'élément HTML <strong><code><body></code></strong> représente le contenu principal du document HTML. Il ne peut y avoir qu'un élément <code><body></code> par document.</p> -<h2 id="Attributs">Attributs</h2> +<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/Using_HTML_sections_and_outlines#sectioning_roots">Racine de section</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>La balise d'ouverture peut être omise si le premier élément n'est pas un caractère espace, un commentaire, un élément <a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a>, ou un élément <a href="/fr/docs/Web/HTML/Element/style"><code><style></code></a>. La balise de fermeture peut être omise si l'élément <code><body></code> a un contenu ou une balise d'ouverture, et qu'il n'est pas immédiatement suivi d'un commentaire.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Il doit être le second élément d'un élément <a href="/fr/docs/Web/HTML/Element/html"><code><html></code></a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Document_Role">document</a></td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLBodyElement"><code>HTMLBodyElement</code></a> + <ul> + <li>L'élément <code><body></code> est accessible via l'interface <a href="/fr/docs/Web/API/HTMLBodyElement"><code>HTMLBodyElement</code></a>.</li> + <li>Il est possible d'accéder à l'élément body grâce à l'attribut <a href="/fr/docs/Web/API/Document/body"><code>document.body</code></a>.</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<h2 id="attributes">Attributs</h2> -<p>Comme pour tous les autres éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +<p>Comme pour tous les autres éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> <dl> - <dt>{{htmlattrdef("alink")}} {{obsolete_inline}}</dt> - <dd>La couleur du texte quand les liens hypertextes sont sélectionnés. La propriété CSS {{cssxref("color")}} doit être utilisé à la place avec la pseudo-classe {{cssxref(":active")}}.</dd> - <dt>{{htmlattrdef("background")}} {{obsolete_inline}}</dt> - <dd>L'URI d'une image à utiliser en tant qu'arrière-plan. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS {{cssxref("background")}} à la place.</dd> - <dt>{{htmlattrdef("bgcolor")}} {{obsolete_inline}}</dt> - <dd>Couleur d'arrière-plan pour le document. Cette méthode n'est pas conforme, utiliser la propriété CSS {{cssxref("background-color")}} sur l'élément à la place.</dd> - <dt>{{htmlattrdef("bottommargin")}} {{obsolete_inline}}</dt> - <dd>La marge à appliquer en bas du corps de la page. Cette méthode n'est pas conforme, il faut utiliser la propriété CSS {{cssxref("margin-bottom")}} sur l'élément.</dd> - <dt>{{htmlattrdef("leftmargin")}} {{obsolete_inline}}</dt> - <dd>La marge à appliquer à gauche du corps de la page. Cette méthode n'est pas conforme. Il faut utiliser la propriété CSS {{cssxref("margin-left")}} à la place.</dd> - <dt>{{htmlattrdef("link")}} {{obsolete_inline}}</dt> - <dd>La couleur du texte à utiliser pour les liens non visités. Cette méthode n'est pas conforme, il faut utiliser la propriété CSS {{cssxref("color")}} avec la pseudo-classe {{cssxref(":link")}}.</dd> - <dt>{{htmlattrdef("onafterprint")}} {{HTMLVersionInline(5)}}</dt> - <dd>Fonction à appeler après que l'utilisateur ait imprimé le document.</dd> - <dt>{{htmlattrdef("onbeforeprint")}} {{HTMLVersionInline(5)}}</dt> - <dd>Fonction à appeler lorsque l'utilisateur lance une impression du document.</dd> - <dt>{{htmlattrdef("onbeforeunload")}} {{HTMLVersionInline(5)}}</dt> - <dd>Fonction à appeler avant que le document ne disparaisse.</dd> - <dt>{{htmlattrdef("onblur")}} {{HTMLVersionInline(5)}}</dt> - <dd>Fonction à appeler quand le document perd le focus.</dd> - <dt>{{htmlattrdef("onerror")}} {{HTMLVersionInline(5)}}</dt> - <dd>Fonction à appeler quand le document n'arrive pas à se charger correctement.</dd> - <dt>{{htmlattrdef("onfocus")}} {{HTMLVersionInline(5)}}</dt> - <dd>Fonction à appeler quand le document reçoit le focus.</dd> - <dt>{{htmlattrdef("onhashchange")}} {{HTMLVersionInline(5)}}</dt> - <dd>Fonction à appeler quand le fragment (la partie commençant avec le caractère #) de l'adresse actuelle du document, a changé.</dd> - <dt>{{htmlattrdef("onlanguagechange")}} {{experimental_inline}}</dt> - <dd>Fonction à appeler lorsque les langues préférées ont été modifiées.</dd> - <dt>{{htmlattrdef("onload")}} {{HTMLVersionInline(5)}}</dt> - <dd>Fonction à appeler quand le document a fini de charger.</dd> - <dt>{{htmlattrdef("onmessage")}} {{HTMLVersionInline(5)}}</dt> - <dd>Fonction à appeler quand le document a reçu un message.</dd> - <dt>{{htmlattrdef("onoffline")}} {{HTMLVersionInline(5)}}</dt> - <dd>Fonction à appeler quand la connexion réseau est perdue.</dd> - <dt>{{htmlattrdef("ononline")}} {{HTMLVersionInline(5)}}</dt> - <dd>Fonction à appeler quand la connexion réseau est restaurée.</dd> - <dt>{{htmlattrdef("onpopstate")}} {{HTMLVersionInline(5)}}</dt> - <dd>Fonction à appeler quand l'utilisateur se déplace dans son historique de session.</dd> - <dt>{{htmlattrdef("onredo")}} {{HTMLVersionInline(5)}}</dt> - <dd>Fonction à appeler quand l'utilisateur avance et refait un élément de l'historique de transaction.</dd> - <dt>{{htmlattrdef("onresize")}} {{HTMLVersionInline(5)}}</dt> - <dd>Fonction à appeler quand le document a été redimensionné.</dd> - <dt>{{htmlattrdef("onstorage")}} {{HTMLVersionInline(5)}}</dt> - <dd>Fonction à appeler quand la zone de stockage a changée.</dd> - <dt>{{htmlattrdef("onundo")}} {{HTMLVersionInline(5)}}</dt> - <dd>Fonction à appeler quand l'utilisateur recule et défait l'historique de transaction.</dd> - <dt>{{htmlattrdef("onunload")}} {{HTMLVersionInline(5)}}</dt> - <dd>Fonction à appeler quand le document disparait.</dd> - <dt>{{htmlattrdef("rightmargin")}} {{obsolete_inline}}</dt> - <dd>La marge à appliquer à droite du corps de la page. Cette méthode n'est pas standard, il faut utiliser la propriété CSS {{cssxref("margin-right")}} sur l'élément à la place.</dd> - <dt>{{htmlattrdef("text")}} {{obsolete_inline}}</dt> - <dd>La couleur à utiliser pour la police du texte. Cette méthode n'est pas conforme, il faut utiliser la propriété CSS {{cssxref("color")}} sur l'élément à la place.</dd> - <dt>{{htmlattrdef("topmargin")}} {{obsolete_inline}}</dt> - <dd>La marge à appliquer en haut du corps de la page. Cette méthohde n'est pas conforme, il faut utiliser la propriété CSS {{cssxref("margin-top")}} sur l'élément à la place.</dd> - <dt>{{htmlattrdef("vlink")}} {{obsolete_inline}}</dt> - <dd>La couleur de texte pour les liens hypertextes visités. Cette méthode n'est pas conforme, il faut utiliser la propriété CSS {{cssxref("color")}} avec la pseudo-classe {{cssxref(":visited")}}.</dd> + <dt><strong id="attr-alink"><code>alink</code></strong> {{deprecated_inline}}</dt> + <dd>La couleur du texte quand les liens hypertextes sont sélectionnés. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS <a href="/fr/docs/Web/CSS/color"><code>color</code></a> à la place avec la pseudo-classe <a href="/fr/docs/Web/CSS/:active"><code>:active</code></a>.</dd> + <dt><strong id="attr-background"><code>background</code></strong> {{deprecated_inline}}</dt> + <dd>L'URI d'une image à utiliser en tant qu'arrière-plan. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS <a href="/fr/docs/Web/CSS/background"><code>background</code></a> à la place.</dd> + <dt><strong id="attr-bgcolor"><code>bgcolor</code></strong> {{deprecated_inline}}</dt> + <dd>Couleur d'arrière-plan pour le document. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a> sur l'élément à la place.</dd> + <dt><strong id="attr-bottommargin"><code>bottommargin</code></strong> {{deprecated_inline}}</dt> + <dd>La marge à appliquer en bas du corps de la page. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS <a href="/fr/docs/Web/CSS/margin-bottom"><code>margin-bottom</code></a> sur l'élément.</dd> + <dt><strong id="attr-leftmargin"><code>leftmargin</code></strong> {{deprecated_inline}}</dt> + <dd>La marge à appliquer à gauche du corps de la page. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS <a href="/fr/docs/Web/CSS/margin-left"><code>margin-left</code></a> à la place.</dd> + <dt><strong id="attr-link"><code>link</code></strong> {{deprecated_inline}}</dt> + <dd>La couleur du texte à utiliser pour les liens non visités. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS <a href="/fr/docs/Web/CSS/color"><code>color</code></a> avec la pseudo-classe <a href="/fr/docs/Web/CSS/:link"><code>:link</code></a>.</dd> + <dt><strong id="attr-onafterprint"><code>onafterprint</code></strong></dt> + <dd>Fonction à appeler après que l'utilisateur ait imprimé le document.</dd> + <dt><strong id="attr-onbeforeprint"><code>onbeforeprint</code></strong></dt> + <dd>Fonction à appeler lorsque l'utilisateur lance une impression du document.</dd> + <dt><strong id="attr-onbeforeunload"><code>onbeforeunload</code></strong></dt> + <dd>Fonction à appeler avant que le document ne disparaisse.</dd> + <dt><strong id="attr-onblur"><code>onblur</code></strong></dt> + <dd>Fonction à appeler quand le document perd le focus.</dd> + <dt><strong id="attr-onerror"><code>onerror</code></strong></dt> + <dd>Fonction à appeler quand le document n'arrive pas à se charger correctement.</dd> + <dt><strong id="attr-onfocus"><code>onfocus</code></strong></dt> + <dd>Fonction à appeler quand le document reçoit le focus.</dd> + <dt><strong id="attr-onhashchange"><code>onhashchange</code></strong></dt> + <dd>Fonction à appeler quand le fragment (la partie commençant avec le caractère #) de l'adresse actuelle du document, a changé.</dd> + <dt><strong id="attr-onlanguagechange"><code>onlanguagechange</code></strong> {{experimental_inline}}</dt> + <dd>Fonction à appeler lorsque les langues préférées ont été modifiées.</dd> + <dt><strong id="attr-onload"><code>onload</code></strong></dt> + <dd>Fonction à appeler quand le document a fini de charger.</dd> + <dt><strong id="attr-onmessage"><code>onmessage</code></strong></dt> + <dd>Fonction à appeler quand le document a reçu un message.</dd> + <dt><strong id="attr-onoffline"><code>onoffline</code></strong></dt> + <dd>Fonction à appeler quand la connexion réseau est perdue.</dd> + <dt><strong id="attr-ononline"><code>ononline</code></strong></dt> + <dd>Fonction à appeler quand la connexion réseau est restaurée.</dd> + <dt><strong id="attr-onpopstate"><code>onpopstate</code></strong></dt> + <dd>Fonction à appeler quand l'utilisateur se déplace dans son historique de session.</dd> + <dt><strong id="attr-onredo"><code>onredo</code></strong></dt> + <dd>Fonction à appeler quand l'utilisateur avance et refait un élément de l'historique de transaction.</dd> + <dt><strong id="attr-onresize"><code>onresize</code></strong></dt> + <dd>Fonction à appeler quand le document a été redimensionné.</dd> + <dt><strong id="attr-onstorage"><code>onstorage</code></strong></dt> + <dd>Fonction à appeler quand la zone de stockage a changée.</dd> + <dt><strong id="attr-onundo"><code>onundo</code></strong></dt> + <dd>Fonction à appeler quand l'utilisateur recule et défait l'historique de transaction.</dd> + <dt><strong id="attr-onunload"><code>onunload</code></strong></dt> + <dd>Fonction à appeler quand le document disparait.</dd> + <dt><strong id="attr-rightmargin"><code>rightmargin</code></strong> {{deprecated_inline}}</dt> + <dd>La marge à appliquer à droite du corps de la page. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS <a href="/fr/docs/Web/CSS/margin-right"><code>margin-right</code></a> sur l'élément à la place.</dd> + <dt><strong id="attr-text"><code>text</code></strong> {{deprecated_inline}}</dt> + <dd>La couleur à utiliser pour la police du texte. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS <a href="/fr/docs/Web/CSS/color"><code>color</code></a> sur l'élément à la place.</dd> + <dt><strong id="attr-topmargin"><code>topmargin</code></strong> {{deprecated_inline}}</dt> + <dd>La marge à appliquer en haut du corps de la page. Cette méthohde n'est pas conforme, on devra utiliser la propriété CSS <a href="/fr/docs/Web/CSS/margin-top"><code>margin-top</code></a> sur l'élément à la place.</dd> + <dt><strong id="attr-vlink"><code>vlink</code></strong> {{deprecated_inline}}</dt> + <dd>La couleur de texte pour les liens hypertextes visités. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS <a href="/fr/docs/Web/CSS/color"><code>color</code></a> avec la pseudo-classe <a href="/fr/docs/Web/CSS/:visited"><code>:visited</code></a>.</dd> </dl> -<h2 id="Exemples">Exemples</h2> - -<h3 id="HTML">HTML</h3> +<h2 id="example">Exemple</h2> <pre class="brush: html"><html> <head> @@ -89,84 +128,17 @@ translation_of: Web/HTML/Element/body </html> </pre> -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples")}}</p> - -<h2 id="Résumé_technique">Résumé technique</h2> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th> - <td><a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement">Racine de section</a>.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>.</td> - </tr> - <tr> - <th scope="row">Omission de balises</th> - <td>La balise d'ouverture peut être omise si le premier élément n'est pas un caractère espace, un commentaire, un élément {{HTMLElement("script")}}, ou un élément {{HTMLElement("style")}}. La balise de fermeture peut être omise si l'élément <code><body></code> a un contenu ou une balise d'ouverture, et qu'il n'est pas immédiatement suivi d'un commentaire.</td> - </tr> - <tr> - <th scope="row"><dfn>Parents autorisés</dfn></th> - <td>Il doit être le second élément d'un élément {{HTMLElement("html")}}.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Aucun</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLBodyElement")}} - <ul> - <li>L'élément <code><body></code> est accessible via l'interface {{domxref("HTMLBodyElement")}}.</li> - <li>Il est possible d'accéder à l'élément body grâce à l'attribut {{domxref("document.body")}}.</li> - </ul> - </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('HTML WHATWG', 'semantics.html#the-body-element', '<body>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Modification de la liste des fonctionnalités non conformes.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'sections.html#the-body-element', '<body>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Les attributs précédemment dépréciés sont désormais obsolètes. Définition du comportement des attributs non-conformes et non-standards <code>topmargin</code>, <code>leftmargin</code>, <code>rightmargin</code> et <code>bottommargin</code><strong>.</strong> Ajout des attributs <code>on*</code>.</td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.1', '<body>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td>Dépréciation des attributs <code>alink</code>, <code>background</code>, <code>bgcolor</code>, <code>link</code>, <code>text</code> et <code>vlink</code>.</td> - </tr> - </tbody> -</table> +<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.body")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>{{HTMLElement("html")}}</li> - <li>{{HTMLElement("head")}}</li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/html"><code><html></code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/head"><code><head></code></a></li> </ul> diff --git a/files/fr/web/html/element/br/index.html b/files/fr/web/html/element/br/index.html index b49d301453..9ee2f16922 100644 --- a/files/fr/web/html/element/br/index.html +++ b/files/fr/web/html/element/br/index.html @@ -4,132 +4,111 @@ slug: Web/HTML/Element/br tags: - Element - HTML + - HTML text-level semantics - Reference - Web translation_of: Web/HTML/Element/br +browser-compat: html.elements.br --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <code><strong><br></strong></code> crée un saut de ligne (un retour chariot) dans le texte. Il s'avère utile lorsque les sauts de ligne ont une importance (par exemple lorsqu'on écrit une adresse ou un poème).</p> +<p class="summary">L'élément HTML <code><strong><br></strong></code> crée un saut de ligne (un retour chariot) dans le texte. Il s'avère utile lorsque les sauts de ligne ont une importance (par exemple lorsqu'on écrit une adresse ou un poème).</p> <div>{{EmbedInteractiveExample("pages/tabbed/br.html", "tabbed-standard")}}</div> -<p 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> !</p> +<p>Comme vous pouvez le voir dans l'exemple ci-dessus, un élément <code><br></code> est inclus à chaque point où nous voulons que le texte soit interrompu. Le texte après le <code><br></code> recommence au début de la ligne suivante du bloc de texte.</p> -<div class="note"> -<p><strong>Note :</strong> Attention, <code><br></code> ne doit pas être utilisé de façon abusive afin d'augmenter l'espace entre les lignes d'un texte. Pour cela, on utilisera la propriété <a href="/fr/docs/Web/CSS">CSS</a> {{cssxref('margin')}} sur l'élément {{HTMLElement("p")}}.</p> +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Attention, <code><br></code> ne doit pas être utilisé de façon abusive afin d'augmenter l'espace entre les lignes d'un texte. Pour cela, on utilisera la propriété <a href="/fr/docs/Web/CSS">CSS</a> <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> sur l'élément HTML <a href="/fr/docs/Web/HTML/Element/p"><code><p></code></a>.</p> </div> -<h2 id="Attributs">Attributs</h2> +<h2 id="attributes">Attributs</h2> -<p>Comme pour tous les éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +<p>Comme pour tous les éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> -<h3 id="Attributs_obsolètes">Attributs obsolètes</h3> +<h3 id="deprecated_attributes">Attributs obsolètes</h3> <dl> - <dt>{{htmlattrdef("clear")}} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}</dt> - <dd>Cet attribut indique où commencer la prochaine ligne après le saut de ligne. - <div class="note"> - <p><strong>Note : </strong>Cet attribut est obsolète avec {{HTMLVersionInline(5)}} et ne doit pas être utilisé ! Il faut privilégier la propriété {{CSSxref('clear')}} à la place.</p> - </div> - </dd> + <dt><strong id="attr-clear"><code>clear</code></strong> {{deprecated_inline}}</dt> + <dd>Cet attribut indique où commencer la prochaine ligne après le saut de ligne.</dd> </dl> -<h2 id="Mise_en_forme_avec_CSS">Mise en forme avec CSS</h2> +<h2 id="styling_with_css">Mise en forme avec CSS</h2> <p><code><br></code> n'a aucun rôle purement stylistique et il sert uniquement à créer une rupture de ligne au sein d'un bloc de texte. Cet élément pourra très peu être mis en forme avec CSS.</p> -<p>Bien qu'il soit possible d'appliquer une marge ({{cssxref("margin")}} sur les éléments <code><br></code> afin d'augmenter l'espacement entre les lignes de texte d'un même bloc, ce n'est pas une bonne pratique. Pour obtenir le même effet, on pourra utiliser la propriété {{cssxref("line-height")}}.</p> +<p>Bien qu'il soit possible d'appliquer une marge (<a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> sur les éléments <code><br></code> afin d'augmenter l'espacement entre les lignes de texte d'un même bloc, ce n'est pas une bonne pratique. Pour obtenir le même effet, on pourra utiliser la propriété <a href="/fr/docs/Web/CSS/line-height"><code>line-height</code></a>.</p> -<h2 id="Exemples">Exemples</h2> +<h2 id="examples">Exemples</h2> -<h3 id="HTML">HTML</h3> +<h3 id="simple_br">Simple rupture de ligne</h3> -<pre class="brush:html">Maître corbeau, sur un arbre perché,<br> -Tenait en son bec un fromage.<br> -Maître renard par l'odeur alléché,<br> -Lui tint à peu près ce langage...<br> -</pre> +<p>Dans l'exemple suivant, nous utilisons des éléments <code><br></code> pour créer des sauts de ligne entre les différentes lignes d'une adresse postale :</p> -<h3 id="Résultat">Résultat</h3> +<pre class="brush:html">Mozilla<br> +331 E. Evelyn Avenue<br> +Mountain View, CA<br> +94041<br> +USA<br></pre> -<p>{{EmbedLiveSample("Exemples","100%","200")}}</p> +<p>Le résultat ressemble à ceci :</p> -<h2 id="Accessibilité">Accessibilité</h2> +<p>{{EmbedLiveSample('simple_br', '', '130')}}</p> + +<h2 id="accessibility_concerns">Accessibilité</h2> <p>Utiliser une suite d'éléments <code><br></code> pour uniquement rajouter un espace entre des paragraphes sera source de confusion ou de frustration pour les personnes qui utilisent des outils d'assistance. Les lecteurs d'écran, par exemple, pourront annoncer la présence de l'élément alors qu'il n'y a aucun contenu associé.</p> -<p>Si on souhaite ajouter un espace supplémentaire, on utilisera plutôt la propriété CSS {{cssxref("margin")}}.</p> +<p>Si on souhaite ajouter un espace supplémentaire, on utilisera plutôt la propriété CSS <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>.</p> -<h2 id="Résumé_technique">Résumé technique</h2> +<h2 id="technical_summary">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égorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td>Aucun, c'est un élément vide.</td> - </tr> - <tr> - <th scope="row">Omission de balise</th> - <td>Cet élément doit avoir une balise de début et ne doit pas avoir de balise de fin. Pour les documents XHTML, on écrira cet élément <code><br /></code>.</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é">contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Tous les rôles sont autorisés.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLBRElement")}}</td> - </tr> - </tbody> + <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 de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Aucun, c'est un <a href="/fr/docs/Glossary/Empty_element">élément vide</a>.</td> + </tr> + <tr> + <th scope="row">Omission de balise</th> + <td>Cet élément doit avoir une balise de début et ne doit pas avoir de balise de fin. Pour les documents XHTML, on écrira cet élément <code><br/></code>.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Tout élément qui accepte du <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><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><a href="https://w3c.github.io/aria/#none"><code>none</code></a>, <a href="https://w3c.github.io/aria/#presentation"><code>presentation</code></a></td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLBRElement"><code>HTMLBRElement</code></a></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('HTML WHATWG', 'semantics.html#the-br-element', '<br>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-br-element', '<br>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.2.1', '<br>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td> </td> - </tr> - </tbody> -</table> +<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.br")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>{{HTMLElement("address")}}</li> - <li>{{HTMLElement("p")}}</li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/address"><code><address></code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/p"><code><p></code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/wbr"><code><wbr></code></a></li> </ul> diff --git a/files/fr/web/html/element/button/index.html b/files/fr/web/html/element/button/index.html index be7ad23143..93bffb8e99 100644 --- a/files/fr/web/html/element/button/index.html +++ b/files/fr/web/html/element/button/index.html @@ -3,253 +3,204 @@ title: '<button> : l''élément représentant un bouton' slug: Web/HTML/Element/Button tags: - Element + - Forms - HTML + - HTML forms - Reference - Web translation_of: Web/HTML/Element/button +browser-compat: html.elements.button --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><button></code></strong> est utilisé afin de créer un contrôle interactif ayant la forme d'un bouton et qui pourra être utilisé dans un formulaire ou dans le document.</p> - -<p>Par défaut, les boutons HTML sont mis en forme avec les styles natifs provenant du système d'exploitation mais leur apparence peut être adaptée grâce à CSS.</p> +<p class="summary">L'élément <strong><code><button></code></strong> représente un bouton cliquable, utilisé pour soumettre <a href="/fr/docs/Learn/Forms">des formulaires</a> ou n'importe où dans un document pour une fonctionnalité de bouton accessible et standard. Par défaut, les boutons HTML sont présentés dans un style ressemblant à la plate-forme d'exécution de <a href="/fr/docs/Glossary/User_agent">l'agent utilisateur</a>, mais vous pouvez modifier l'apparence des boutons avec <a href="/fr/docs/Web/CSS">CSS</a>.</p> <div>{{EmbedInteractiveExample("pages/tabbed/button.html", "tabbed-shorter")}}</div> -<p 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> !</p> +<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 de 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>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#form_listed">listable</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#form_labelable">étiquetable</a> et <a href="/fr/docs/Web/Guide/HTML/Content_categories#form_submittable">soumettable</a> <a href="/fr/docs/Web/Guide/HTML/Content_categories#form-associated_content">associé aux formulaires</a> et <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">Contenu phrasé</a> mais sans <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content">contenu interactif</a>.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Aucune omision de balise possible.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Tout élément acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><code><a href="/fr/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td><a href="https://w3c.github.io/aria/#checkbox"><code>checkbox</code></a>, <a href="https://w3c.github.io/aria/#link"><code>link</code></a>, <a href="https://w3c.github.io/aria/#menuitem"><code>menuitem</code></a>, <a href="https://w3c.github.io/aria/#menuitemcheckbox"><code>menuitemcheckbox</code></a>, <a href="https://w3c.github.io/aria/#menuitemradio"><code>menuitemradio</code></a>, <a href="https://w3c.github.io/aria/#option"><code>option</code></a>, <a href="https://w3c.github.io/aria/#radio"><code>radio</code></a>, <a href="https://w3c.github.io/aria/#switch"><code>switch</code></a>, <a href="https://w3c.github.io/aria/#tab"><code>tab</code></a>.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLButtonElement"><code>HTMLButtonElement</code></a></td> + </tr> + </tbody> +</table> -<h2 id="Attributs">Attributs</h2> +<h2 id="attributes">Attributs</h2> -<p>Cet élément peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +<p>Cet élément peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> <dl> - <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline(5)}}</dt> - <dd>Cet attribut booléen, qui ne doit être défini qu'une fois par document, indique au navigateur que cet élément doit automatiquement avoir le focus lorsque la page est chargée. Cela permet d'utiliser immédiatement ce bouton, via un raccourci clavier par exemple, sans avoir à cliquer au préalable dans le contrôle adéquat.</dd> - <dt>{{htmlattrdef("autocomplete")}} {{non-standard_inline}}</dt> - <dd>Pour l'élément <code><button></code>, cet attribut, propre à Firefox, n'est pas standard. Par défaut et à la différence des autres navigateurs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox conserve l'état de désactivation d'un bouton</a> d'un élément {{HTMLElement("button")}} au fur et à mesure des chargements d'une page. Utiliser cet attribut avec la valeur <code>off</code> (i.e. <code>autocomplete="off"</code>) désactive cette fonctionnalité (cf. {{bug(654072)}} pour plus d'informations).</dd> - <dt>{{htmlattrdef("disabled")}}</dt> - <dd>La présence de cet attribut booléen indique que le contrôle est désactivé, c'est-à-dire non modifiable. Il apparaît souvent en grisé dans les navigateurs et ne reçoit plus les évènements de navigation (par exemple un clic de souris) ou ceux en relation avec le focus. S'il n'est pas défini, l'élément peut malgré tout hériter cet état de ses ancêtres, par exemple si élément {{HTMLElement("fieldset")}} désactivé. Par défaut le bouton sera activé.</dd> - <dd>À la différence des autres navigateurs, Firefox conservera par défaut l'état de désactivation d'un bouton même après un rechargement. Pour contrôler ce comportement, on utilisera l'attribut {{htmlattrxref("autocomplete","button")}} présenté ci-avant.</dd> - <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt> - <dd>Cet attribut contient l'attribut <code><strong>id</strong></code> de l'élément {{HTMLElement("form")}} auquel celui-ci est rattaché. Par défaut, le bouton est rattaché à l'élément {{HTMLElement("form")}} qui est son plus proche ancêtre. Cet attribut permet à un bouton d'être placé n'importe où dans le document et pas seulement comme un descendant d'éléments {{HTMLElement("form")}}.</dd> - <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline(5)}}</dt> - <dd> - <p>Cet attribut indique l'URI à laquelle le formulaire doit être soumis si le contrôle est activé. Si l'attribut n'est pas indiqué, l'attribut <code><strong>action</strong></code> de l'élément {{HTMLElement("form")}} étant le plus proche ancêtre de cet élément est pris en compte. Si les deux sont absents, l'URI sera une chaîne vide. Si cet attribut est défini, il écrasera l'attribut {{htmlattrxref("action","form")}} du formulaire rattaché au bouton.</p> - </dd> - <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline(5)}}</dt> - <dd>Lorsque l'attribut <code><strong>type</strong></code> possède la valeur <code>submit</code>, cet attribut définit le <a class="external" href="https://fr.wikipedia.org/wiki/Type_MIME">type MIME</a> qui sera utilisée pour encoder les données envoyées au serveur. C'est un attribut à valeur contrainte qui peut prendre les valeurs suivantes : - <ul> - <li><code>application/x-www-form-urlencoded</code> : la valeur par défaut.</li> - <li><code>multipart/form-data</code>, (utilisez cet valeur si vous utilisez un {{HTMLElement("input")}} avec un attribut {{htmlattrxref("type","input")}} défini à <code>file</code>.)</li> - <li><code>text/plain</code></li> - </ul> - - <p>Si cet attribut n'est pas défini, c'est la valeur de l'attribut {{htmlattrxref("enctype","form")}} de l'élément {{HTMLElement("form")}} qui est le plus proche ancêtre de cet élément qui est utilisé. Si cet attribut est défini, il écrasera l'attribut {{htmlattrxref("enctype","form")}} du formulaire rattaché au bouton.</p> - </dd> - <dt>@{{htmlattrdef("formmethod")}} {{HTMLVersionInline(5)}}</dt> - <dd>Lorsque l'attribut <code><strong>type</strong></code> possède la valeur <code>submit</code>, cet attribut définit la méthode <a class="external" href="/fr/docs/Web/HTTP">HTTP</a> qui sera utilisée pour envoyer les données au serveur. C'est un attribut à valeur contrainte qui peut prendre les valeurs suivantes : - <ul> - <li><code>GET</code>, correspondant à la <a class="external" href="/fr/docs/Web/HTTP/Methods/GET">méthode GET</a> du protocole HTTP;</li> - <li><code>POST</code>, correspondant à la <a class="external" href="/fr/docs/Web/HTTP/Methods/POST">méthode POST</a> du protocole HTTP;</li> - <li><code>PUT</code>, correspondant à la <a class="external" href="/fr/docs/Web/HTTP/Methods/PUT">méthode PUT</a> du protocole HTTP;</li> - <li><code>DELETE</code>, correspondant à la <a class="external" href="/fr/docs/Web/HTTP/Methods/DELETE">méthode DELETE</a> du protocole HTTP.</li> - </ul> - - <p>Si cet attribut n'est pas défini, c'est la valeur de l'attribut {{htmlattrxref("method","form")}} de l'élément {{HTMLElement("form")}} qui est le plus proche ancêtre de cet élément qui est utilisé. En son absence, la valeur par défaut utilisée est <code>GET</code>. Si cet attribut est défini, il écrasera l'attribut {{htmlattrxref("method","form")}} du formulaire rattaché au bouton.</p> - </dd> - <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline(5)}}</dt> - <dd> - <p>Lorsque l'attribut <code><strong>type</strong></code> possède la valeur <code>submit</code>, cet attribut booléen indique si le formulaire doit être validé au moment de sa soumission. S'il n'est pas mis, l'attribut {{htmlattrxref("novalidate","form")}} de l'élément {{HTMLElement("form")}} qui est le plus proche ancêtre de cet élément est pris en compte. En leur absence à tous les deux, le formulaire sera validé.</p> - - <p>Si cet attribut est défini, il écrasera l'attribut {{htmlattrxref("novalidate","form")}} du formulaire rattaché au bouton.</p> - </dd> - <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline(5)}}</dt> - <dd>Lorsque l'attribut <code><strong>type</strong></code> possède la valeur <code>submit</code>, cet attribut indique le contexte de navigation (onglet, fenêtre, frame) associé avec le formulaire, sa cible. Outre un attribut <code><strong>id </strong></code>valide du document, il peut prendre l'une de ces valeurs particulières: - <ul> - <li><code>_self</code> où la cible sera le contexte actuel;</li> - <li><code>_parent</code> où la cible sera le contexte hiérarchiquement au-dessus du contexte actuel (où le contexte actuel, s'il n'y en a pas);</li> - <li><code>_top</code> où la cible sera le contexte hiérarchiquement le plus au-dessus du contexte actuel (typiquement l'onglet courant);</li> - <li><code>_blank</code> où la cible sera un nouveau contexte proche, c'est-à-dire facilement atteignable, du contexte actuel (un nouvel onglet ou une nouvelle fenêtre par exemple).</li> - </ul> - - <p>S'il n'est pas mis, l'attribut {{htmlattrxref("target","form")}} de l'élément {{HTMLElement("form")}} qui est le plus proche ancêtre de cet élément est pris en compte. En leur absence à tous les deux, la cible sera déterminée par l'attribut {{htmlattrxref("target","base")}} du premier élément {{HTMLElement("base")}} descendant de l'élément {{HTMLElement("head")}} du document. S'il n'y en a pas, la cible sera la chaîne vide.</p> - - <p>Si cet attribut est défini, il écrasera l'attribut {{htmlattrxref("target","form")}} du formulaire rattaché au bouton.</p> - </dd> - <dt>{{htmlattrdef("name")}}</dt> - <dd>Le nom du contrôle, qui sera soumis avec les données du formulaire.</dd> - <dt>{{htmlattrdef("type")}}</dt> - <dd>Le type du bouton. Le type par défaut si cet attribut énuméré n'est pas spécifié est <code>submit</code>. Les valeurs, et les actions associées, possibles sont : - <ul> - <li><code>submit</code> : l'activation du bouton entraîne la soumission du formulaire au serveur distant (après validation des contraintes du formulaire);</li> - <li><code>reset</code> : l'activation du bouton entraîne la réinitialisation du formulaire et dans ce cas-là, l'élément est exclu de la validation des contraintes;</li> - <li><code>button</code> : l'activation du bouton n'entraîne aucun action automatique et dans ce cas-là également, l'élément est exclu de la validation des contraintes. C'est cette valeur qui doit être utilisée si le bouton n'est pas utilisé pour envoyer un formulaire.</li> - </ul> - - <p>Si l'attribut <code><strong>disabled</strong></code> est activé, aucune action n'a lieu.</p> - </dd> - <dt>{{htmlattrdef("value")}}</dt> - <dd>Cet attribut contient la valeur de ce bouton en rapport avec la soumission du formulaire; il n'est ajouté aux données envoyées au serveur que si le bouton a été utilisée pour initier l'envoi.</dd> + <dt><strong id="attr-autofocus"><code>autofocus</code></strong></dt> + <dd>Cet attribut booléen, <strong>qui ne doit être défini qu'une fois par document</strong>, indique au navigateur que cet élément doit automatiquement avoir le <a href="/fr/docs/Web/API/HTMLOrForeignElement/focus">focus</a> lorsque la page est chargée. Cela permet d'utiliser immédiatement ce bouton, via un raccourci clavier par exemple, sans avoir à cliquer au préalable dans le contrôle adéquat.</dd> + <dt><strong id="attr-autocomplete"><code>autocomplete</code></strong> {{non-standard_inline}}</dt> + <dd>Pour l'élément <code><button></code>, cet attribut, propre à Firefox, n'est pas standard. Par défaut et à la différence des autres navigateurs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox conserve l'état de désactivation d'un bouton</a> d'un élément <code><button></code> au fur et à mesure des chargements d'une page. Utiliser cet attribut avec la valeur <code>off</code> (i.e. <code>autocomplete="off"</code>) désactive cette fonctionnalité (cf. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">bug 654072</a> pour plus d'informations).</dd> + <dt><strong id="attr-disabled"><code>disabled</code></strong></dt> + <dd> + <p>Cet attribut booléen empêche l'utilisateur d'interagir avec le bouton : il ne peut pas être pressé ou ciblé.</p> + + <p>Firefox, contrairement aux autres navigateurs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persiste l'état désactivé dynamique</a> d'un <code><bouton></code> à travers les chargements de page. Utilisez l'attribut <a href="#attr-autocomplete"><code>autocomplete</code></a> pour contrôler cette fonctionnalité.</p> + </dd> + <dt><strong id="attr-form"><code>form</code></strong></dt> + <dd>L'élément <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a> auquel associer le bouton (son <em>formulaire rattaché</em>). Cet attribut contient l'attribut <code><strong>id</strong></code> de l'élément <code><form></code> auquel celui-ci est rattaché. Par défaut, le bouton est rattaché à l'élément <code><form></code> qui est son plus proche ancêtre. Cet attribut permet à un bouton d'être placé n'importe où dans le document et pas seulement comme un descendant d'éléments <code><form></code>. Il permet également de rattacher le bouton à un autre formulaire que son élément parent.</dd> + <dt><strong id="attr-formaction"><code>formaction</code></strong></dt> + <dd>L'URL qui traite les informations soumises par le bouton. Remplace l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-action"><code>action</code></a> du formulaire rattaché au bouton. Il ne fait rien s'il n'y a pas de formulaire rattaché.</dd> + <dt><strong id="attr-formenctype"><code>formenctype</code></strong></dt> + <dd>Lorsque l'attribut <code><strong>type</strong></code> possède la valeur <code>submit</code>, cet attribut définit le <a class="external" href="https://fr.wikipedia.org/wiki/Type_MIME">type MIME</a> qui sera utilisée pour encoder les données envoyées au serveur. C'est un attribut à valeur contrainte qui peut prendre les valeurs suivantes : + <ul> + <li><code>application/x-www-form-urlencoded</code> : La valeur par défaut.</li> + <li><code>multipart/form-data</code> : Utilisé pour soumettre des éléments <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> dont les attributs <a href="/fr/docs/Web/HTML/Element/Input#attr-type"><code>type</code></a> sont définis sur <code>file</code>.</li> + <li><code>text/plain</code> : Spécifié comme une aide au débogage ; ne doit pas être utilisé pour la soumission réelle du formulaire.</li> + </ul> + + <p>Si cet attribut est spécifié, il remplace l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-enctype"><code>enctype</code></a> du formulaire rattaché au bouton.</p> + </dd> + <dt><strong id="attr-formmethod"><code>formmethod</code></strong></dt> + <dd>Lorsque l'attribut <code><strong>type</strong></code> possède la valeur <code>submit</code> (explicitement ou comme valeur par défaut), cet attribut définit la <a href="/fr/docs/Web/HTTP/Methods">méthode HTTP</a> qui sera utilisée pour envoyer les données au serveur. C'est un attribut à valeur contrainte qui peut prendre les valeurs suivantes : + <ul> + <li><code>post</code> : Les données du formulaire sont incluses dans le corps de la requête HTTP lorsqu'elles sont envoyées au serveur. À utiliser lorsque le formulaire contient des informations qui ne devraient pas être publiques, comme les identifiants de connexion.</li> + <li><code>get</code> : Les données du formulaire sont ajoutées à l'URL <code>action</code> du formulaire, avec un <code>?</code> comme séparateur, et l'URL résultante est envoyée au serveur. Utilisez cette méthode lorsque le formulaire <a href="/fr/docs/Glossary/Idempotent">n'a pas d'effets secondaires</a>, comme les formulaires de recherche.</li> + </ul> + + <p>S'il est spécifié, cet attribut remplace l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-method"><code>method</code></a> du formulaire rattaché au bouton.</p> + </dd> + <dt><strong id="attr-formnovalidate"><code>formnovalidate</code></strong></dt> + <dd>Si le bouton est un bouton de soumission (<code>type</code> non défini ou défini avec la valeur <code>"submit"</code>), cet attribut booléen spécifie que le formulaire ne doit pas être <a href="/fr/docs/Learn/Forms/Form_validation">validé</a> lorsqu'il est soumis. Si cet attribut est spécifié, il remplace l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-novalidate"><code>novalidate</code></a> du formulaire rattaché au bouton.</dd> + <dd>Cet attribut est également disponible sur les éléments <code><a href="/fr/docs/Web/HTML/Element/Input/image"><input type="image"></a></code> et <code><a href="/fr/docs/Web/HTML/Element/Input/submit"><input type="submit"></a></code>.</p> + </dd> + <dt><strong id="attr-formtarget"><code>formtarget</code></strong></dt> + <dd>Lorsque l'attribut <code><strong>type</strong></code> possède la valeur <code>submit</code>, cet attribut indique le contexte de navigation (onglet, fenêtre, frame) associé avec le formulaire, sa cible. Outre un attribut <code><strong>id </strong></code>valide du document, il peut prendre l'une de ces valeurs particulières: + <ul> + <li><code>_self</code> : Charge la réponse dans le même contexte de navigation que le contexte actuel. Il s'agit de la valeur par défaut si l'attribut n'est pas spécifié.</li> + <li><code>_blank</code> : Charge la réponse dans un nouveau contexte de navigation sans nom — généralement un nouvel onglet ou une nouvelle fenêtre, selon les paramètres du navigateur de l'utilisateur.</li> + <li><code>_parent</code> : Charge la réponse dans le contexte de navigation parent de celui en cours. S'il n'y a pas de parent, cette option se comporte de la même manière que <code>_self</code>.</li> + <li><code>_top</code> : Charge la réponse dans le contexte de navigation de niveau supérieur (c'est-à-dire le contexte de navigation qui est un ancêtre du contexte actuel, et qui n'a pas de parent). S'il n'y a pas de parent, cette option se comporte de la même manière que <code>_self</code>.</li> + </ul> + </dd> + <dt><strong id="attr-name"><code>name</code></strong></dt> + <dd>Le nom du bouton, soumis en tant que paire avec la <code>valeur</code> du bouton comme partie des données du formulaire.</dd> + <dt><strong id="attr-type"><code>type</code></strong></dt> + <dd>Le comportement par défaut du bouton. Les valeurs possibles sont : + <ul> + <li><code>submit</code> : Le bouton soumet les données du formulaire au serveur. C'est la valeur par défaut si l'attribut n'est pas spécifié pour les boutons associés à un <code><form></code>, ou si l'attribut est une valeur vide ou invalide.</li> + <li><code>reset</code> : Le bouton réinitialise tous les contrôles à leur valeur initiale, comme <a href="/fr/docs/Web/HTML/Element/Input/reset"><input type="reset"></a>. (Ce comportement a tendance à agacer les utilisateurs).</li> + <li><code>button</code> : Le bouton n'a pas de comportement par défaut et ne fait rien lorsqu'il est pressé par défaut. Les scripts côté client peuvent écouter les événements de l'élément, qui sont déclenchés lorsque les événements se produisent.</li> + </ul> + </dd> + <dt><strong id="attr-value"><code>value</code></strong></dt> + <dd>Définit la valeur associée au <code>name</code> du bouton lorsqu'il est soumis avec les données du formulaire. Cette valeur est transmise au serveur en paramètres lorsque le formulaire est soumis.</dd> </dl> -<h2 id="Exemple">Exemple</h2> +<h2 id="notes">Notes</h2> -<pre class="brush:html notranslate"><button name="button">Cliquez sur moi :)</button> -</pre> +<p>Un bouton de soumission avec l'attribut <code>formaction</code> défini, mais sans formulaire associé ne fait rien. Vous devez définir un formulaire rattaché, soit en l'enveloppant dans un <code><form></code>, soit en définissant la valeur de l'attribut <code>form</code> avec l'identifiant du formulaire.</p> + +<p>Les éléments <code><button></code> sont beaucoup plus faciles à styliser que les éléments <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>. Vous pouvez ajouter du contenu HTML interne (pensez à <code><i></code>, <code><br></code>, ou même <code><img></code>), et utiliser les pseudo-éléments <a href="/fr/docs/Web/CSS/::after"><code>::after</code></a> et <a href="/fr/docs/Web/CSS/::before"><code>::before</code></a> pour un rendu complexe.</p> + +<p>Si vos boutons ne servent pas à soumettre des données de formulaire à un serveur, assurez-vous de définir leur attribut <code>type</code> à <code>bouton</code>. Sinon, ils tenteront de soumettre des données de formulaire et de charger la réponse (inexistante), détruisant éventuellement l'état actuel du document.</p> -<p>{{EmbedLiveSample('Exemple', 200, 64, '', 'Web/HTML/Element/Button')}}</p> +<h2 id="example">Exemple</h2> -<h2 id="Accessibilité">Accessibilité</h2> +<pre class="brush: html"><button name="button">Cliquez sur moi :)</button></pre> -<h3 id="Boutons_avec_une_icône">Boutons avec une icône</h3> +<p>{{EmbedLiveSample('example', 200, 64)}}</p> -<p>Les boutons qui reposent uniquement sur une icône pour représenter une fonctionnalité n'ont pas de nom accessible. Un nom accessible permet à un outil d'assistance (un lecteur d'écran par exemple) de générer un <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">arbre d'accessibilité</a> correct lors de l'analyse du document. Les outils d'assistance utilisent cet arbre d'accessibilité pour permettre aux utilisateurs de naviguer et d'utiliser le contenu de la page.</p> +<h2 id="accessibility_concerns">Problèmes d'accessibilité</h2> + +<h3 id="icon_buttons">Boutons avec une icône</h3> + +<p>Les boutons qui reposent uniquement sur une icône pour représenter une fonctionnalité n'ont pas de nom accessible. Un nom accessible permet à un outil d'assistance (un lecteur d'écran par exemple) de générer un <a href="/fr/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis">arbre d'accessibilité</a> correct lors de l'analyse du document. Les outils d'assistance utilisent cet arbre d'accessibilité pour permettre aux utilisateurs de naviguer et d'utiliser le contenu de la page.</p> <p>Afin de fournir un nom accessible pour un bouton, on fournira un contenu texte dans l'élément qui décrit, de façon concise, la fonctionnalité offerte par le bouton.</p> -<h4 id="Exemple_2">Exemple</h4> +<h4 id="example_2">Exemple</h4> -<pre class="brush: html notranslate"><button name="favorite" type="button"> - <svg aria-hidden="true" viewBox="0 0 10 10"><path d="<code class="language-html"><span class="tag token"><span class="attr-value token">M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z</span></span></code>"/></svg> - Add to favorites +<pre class="brush: html"><button name="favorite" type="button"> + <svg aria-hidden="true" viewBox="0 0 10 10"> + <path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z"/> + </svg> + Ajouter aux favoris </button> </pre> -<p id="Result_3">Si on souhaite que le texte du bouton ne soit pas visible, on peut le faire de façon accessible grâce à une <a href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link">combinaison de propriétés</a> qui permettent de le masquer visuellement mais qui permet toujours aux technologies d'assistance de l'analyser.</p> +<p>Si on souhaite que le texte du bouton ne soit pas visible, on peut le faire de façon accessible grâce à une <a href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link">combinaison de propriétés</a> qui permettent de le masquer visuellement mais qui permet toujours aux technologies d'assistance de l'analyser.</p> <p>Toutefois, on notera que laisser le texte visible permettra aux personnes qui ne sont pas familières avec l'application de comprendre le rôle du bouton. Cela vaut particulièrement pour les personnes qui utilisent peu la technologie ou dont la culture apporte une autre interprétation aux images utilisées.</p> <ul> - <li><a href="https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/">Qu'est-ce qu'un nom accessible ? <em>The Paciello Group</em> (en anglais)</a></li> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Robust#Guideline_4.1_—_Compatible_Maximize_compatibility_with_current_and_future_user_agents_including_assistive_technologies">Comprendre les règles WCAG 4.1</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html"><em>Understanding Success Criterion 4.1.2 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li> + <li><a href="https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/">Qu'est-ce qu'un nom accessible ? <em>The Paciello Group</em> (en anglais)</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Robust#Guideline_4.1_—_Compatible_Maximize_compatibility_with_current_and_future_user_agents_including_assistive_technologies">Comprendre les règles WCAG 4.1</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html"><em>Understanding Success Criterion 4.1.2 - W3C Understanding WCAG 2.0</em> (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">Dimensionnement</h4> -<p>Les éléments interactifs tels que les boutons 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 éléments interactifs tels que les boutons 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 moteurs, celles qui utilisent des dispositifs de pointage peu précis (doigt ou stylet). La taille interactive minimale recommandée est de 44×44 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">pixels CSS</a>.</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</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, billet en anglais d'Adrian Roselli</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> </ul> -<h4 id="Proximité">Proximité</h4> +<h4 id="proximity">Proximité</h4> <p>Lorsque plusieurs contenus interactifs (y compris les boutons) 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> -<h3 id="Firefox">Firefox</h3> +<h3 id="aria">Informations sur l'état de l'ARIA</h3> + +<p>Pour décrire l'état d'un bouton, le bon attribut ARIA à utiliser est <code>aria-pressed</code> et non <code>aria-checked</code> ou <code>aria-selected</code>. Pour en savoir plus, lisez les informations sur le <a href="/fr/docs/Web/Accessibility/ARIA/Roles/button_role">rôle ARIA de bouton</a>.</p> -<p>Firefox ajoute une bordure en pointillés sur le bouton qui a le focus. Cette bordure est ajoutée via la feuille de style du navigateur et il est possible de la surcharger avec son propre style via <code>button{{cssxref("::-moz-focus-inner")}} { }</code>.</p> +<h3 id="firefox">Firefox</h3> + +<p>Firefox ajoute une bordure en pointillés sur le bouton qui a le focus. Cette bordure est ajoutée via la feuille de style du navigateur et il est possible de la surcharger avec son propre style via <code>button<a href="/fr/docs/Web/CSS/::-moz-focus-inner">::-moz-focus-inner { }</a></code>.</p> <p>Si ce comportement est surchargé, il est nécessaire de vérifier que le changement de focus est clairement perceptible, y compris lorsque la vision ou les conditions d'éclairage réduisent la visibilité du document.</p> <p>Le ratio de contraste est calculé en comparant la luminosité de la couleur du texte et celle de l'arrière-plan. Afin de respecter les <a href="https://www.w3.org/WAI/intro/wcag" rel="noopener">préconisations d'accessibilité sur le Web (WCAG)</a>, un ratio minimal de 4.5:1 est obligatoire pour le contenu textuel normal et un ratio minimal de 3:1 est obligatoire pour grands textes ou les titres. Un <em>grand</em> texte est défini comme un texte qui mesure 18.66px et qui est en gras ou comme un texte qui mesure 24px ou plus.</p> <ul> - <li><a href="https://webaim.org/resources/contrastchecker/">Vérificateur de contraste WebAIM (en anglais)</a></li> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li> - <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 - W3C Understanding WCAG 2.0</a></em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html"> (en anglais)</a></li> + <li><a href="https://webaim.org/resources/contrastchecker/">Vérificateur de contraste WebAIM (en anglais)</a></li> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li> + <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 - W3C Understanding WCAG 2.0</a></em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html"> (en anglais)</a></li> </ul> -<h2 id="Résumé_technique">Résumé technique</h2> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></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égorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a>, listable, étiquettable, soumettable, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_associ.C3.A9_aux_formulaires">contenu associé aux formulaires</a> et <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Contenu autorisé</dfn></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a> mais sans <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Omission de balises</dfn></th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row"><dfn>Parents autorisés</dfn></th> - <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>{{ARIARole("checkbox")}}, {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLButtonElement")}}</td> - </tr> - <tr> - <th scope="row">Type d'élément</th> - <td>En ligne</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('HTML WHATWG', 'forms.html#the-button-element', '<button>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#the-button-element', '<button>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '<button>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<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="specifications">Spécifications</h2> -<p>{{Compat("html.elements.button")}}</p> +<p>{{Specifications}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<ul> - <li>Les autres éléments HTML utilisés pour créer des formulaires : - <ul> - <li>{{HTMLElement("form")}}</li> - <li>{{HTMLElement("datalist")}}</li> - <li>{{HTMLElement("fieldset")}}</li> - <li>{{HTMLElement("input")}}</li> - <li>{{HTMLElement("keygen")}}</li> - <li>{{HTMLElement("label")}}</li> - <li>{{HTMLElement("legend")}}</li> - <li>{{HTMLElement("meter")}}</li> - <li>{{HTMLElement("optgroup")}}</li> - <li>{{HTMLElement("option")}}</li> - <li>{{HTMLElement("output")}}</li> - <li>{{HTMLElement("progress")}}</li> - <li>{{HTMLElement("select")}}</li> - <li>{{HTMLElement("textarea")}}</li> - </ul> - </li> -</ul> +<p>{{Compat}}</p> diff --git a/files/fr/web/html/element/canvas/index.html b/files/fr/web/html/element/canvas/index.html index 94ace3eeae..be7e12369b 100644 --- a/files/fr/web/html/element/canvas/index.html +++ b/files/fr/web/html/element/canvas/index.html @@ -5,202 +5,176 @@ tags: - Canvas - Element - HTML + - HTML scripting + - HTML5 - Reference - Web translation_of: Web/HTML/Element/canvas +browser-compat: html.elements.canvas --- <div>{{HTMLRef}}</div> -<p>L'élément <strong><code><canvas></code></strong> permet de modifier une zone graphique via un script (habituellement en <a href="/fr/docs/Web/JavaScript">JavaScript</a> ou grâce à <a href="/fr/docs/Apprendre/WebGL">WebGL</a>). Il peut par exemple être utilisé afin de dessiner des graphiques, manipuler des images ou jouer des animations.</p> +<p class="summary">On utilise l'élément <strong>HTML <code><canvas></code></strong> avec l'API <a href="/fr/docs/Web/API/Canvas_API">canvas</a>, ou l'API <a href="/fr/docs/Web/API/WebGL_API">WebGL</a> pour dessiner des graphiques et des animations.</p> -<p>Pour plus d'information sur l'élément <code><canvas></code>, voir la page sur <a href="/fr/docs/Web/HTML/Canvas">canvas</a>.</p> +<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 de 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#embedded_content">contenu intégré</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Transparent mais sans aucun descendant étant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content">contenu interactif</a> à l'exception des éléments <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>, <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> dont l'attribut <a href="/fr/docs/Web/HTML/Element/Input#attr-type"><code>type</code></a> vaut <code>checkbox</code>, <code>radio</code>, ou <code>button</code>.</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 contenu acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><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>Tous les rôles sont autorisés</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLCanvasElement"><code>HTMLCanvasElement</code></a></td> + </tr> + </tbody> +</table> -<h2 id="Attributs">Attributs</h2> +<h2 id="attributes">Attributs</h2> -<p>Comme les autres éléments HTML, cet élément possède les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs globaux</a>.</p> +<p>Comme les autres éléments HTML, cet élément possède les <a href="/fr/docs/Web/HTML/Global_attributes">attributs globaux</a>.</p> <dl> - <dt>{{htmlattrdef("height")}}</dt> - <dd>La hauteur de l'espace pour l'élément, exprimée en pixels CSS. La valeur par défaut est 150.</dd> - <dt>{{htmlattrdef("moz-opaque")}} {{non-standard_inline}}</dt> - <dd>Cet attribut permet d'indiquer s'il y aura de la transparence ou non. Si le canevas sait qu'il n'y aura pas de transparence, les performances de rendu pourront être améliorées. Cet attribut est uniquement pris en charge par les navigateurs Mozilla, il est préférable d'utiliser la méthode standard {{domxref("HTMLCanvasElement.getContext()", "canvas.getContext('2d', { alpha: false})")}} à la place.</dd> - <dt>{{htmlattrdef("width")}}</dt> - <dd>La largeur de l'espace pour l'élément, exprimée en pixels CSS. La valeur par défaut est 300.</dd> + <dt><strong id="attr-height"><code>height</code></strong></dt> + <dd>La hauteur de l'espace pour l'élément, exprimée en pixels CSS. La valeur par défaut est 150.</dd> + <dt><strong id="attr-moz-opaque"><code>moz-opaque</code></strong> {{non-standard_inline}}{{deprecated_inline}}</dt> + <dd>Cet attribut permet d'indiquer s'il y aura de la transparence ou non. Si le canevas sait qu'il n'y aura pas de transparence, les performances de rendu pourront être améliorées. Cet attribut est uniquement pris en charge par les navigateurs Mozilla, il est préférable d'utiliser la méthode standard <a href="fr/docs/Web/API/HTMLCanvasElement/getContext"><code>canvas.getContext('2d', { alpha: false})</code></a> à la place.</dd> + <dt><strong id="attr-width"><code>width</code></strong></dt> + <dd>La largeur de l'espace pour l'élément, exprimée en pixels CSS. La valeur par défaut est 300.</dd> </dl> -<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> +<h2 id="usage_notes">Notes d'utilisation</h2> -<h3 id="Contenu_alternatif">Contenu alternatif</h3> +<h3 id="alternative_content">Contenu alternatif</h3> -<p>Il est fortement recommandé de fournir un contenu alternatif au contenu du bloc <code><canvas></code>. Ce contenu pourra être utilisé par les navigateurs plus anciens qui ne supportent pas l'élément <code><canvas></code> et ceux pour lesquels JavaScript est désactivé.</p> +<p>Il est fortement recommandé de fournir un contenu alternatif au contenu du bloc <code><canvas></code>. Ce contenu pourra être utilisé par les navigateurs plus anciens qui ne supportent pas l'élément <code><canvas></code> et ceux pour lesquels JavaScript est désactivé. Fournir un texte de repli ou un sous-DOM utile aide à <a href="/fr/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">rendre le canevas plus accessible</a>.</p> -<h3 id="Balise_<canvas>_obligatoire">Balise <code></canvas></code> obligatoire</h3> +<h3 id="required_canvas_tag">Balise <code></canvas></code> obligatoire</h3> -<p>À la différence de {{HTMLElement("img")}}, l'élément {{HTMLElement("canvas")}} doit être fermé avec la balise fermante <code></canvas></code>.</p> +<p>À la différence de <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>, l'élément <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a> <strong>doit</strong> être fermé avec la balise fermante <code></canvas></code>.</p> -<h3 id="Dimensionnement_du_canevas_CSS_ou_HTML">Dimensionnement du canevas : CSS ou HTML</h3> +<h3 id="sizing_the_canvas_using_css_versus_html">Dimensionnement du canevas : CSS ou HTML</h3> <p>On peut modifier la taille affichée du canevas grâce à une feuille de style. L'image est mise à l'échelle lors du rendu pour correspondre à la taille indiquée par le style. Toutefois, cela pourra distordre l'image lors du rendu final.</p> <p>Mieux vaut utiliser les attributs explicites <code>width</code> et <code>height</code> de l'élément en HTML (ou via du code JavaScript).</p> -<h3 id="Taille_maximale_d'un_canevas">Taille maximale d'un canevas</h3> +<h3 id="maximum_canvas_size">Taille maximale d'un canevas</h3> <p>La taille maximale d'un élément <code><canvas></code> dépend du navigateur utilisé. Voici un tableau de mesures provenant de tests et diverses sources (ex. <a href="https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element">Stack Overflow</a>):</p> <table class="standard-table"> - <thead> - <tr> - <th scope="col">Navigateur</th> - <th scope="col">Hauteur maximale</th> - <th scope="col">Largeur maximale</th> - <th scope="col">Aire maximale</th> - </tr> - </thead> - <tbody> - <tr> - <td>Chrome</td> - <td>32 767 pixels</td> - <td>32 767 pixels</td> - <td>268 435 456 pixels (soit 16 384 x 16 384)</td> - </tr> - <tr> - <td>Firefox</td> - <td>32 767 pixels</td> - <td>32 767 pixels</td> - <td>472 907 776 pixels (soit 22 528 x 20 992)</td> - </tr> - <tr> - <td>Safari</td> - <td>32 767 pixels</td> - <td>32 767 pixels</td> - <td>268 435 456 pixels (soit 16 384 x 16 384)</td> - </tr> - <tr> - <td>IE</td> - <td>8 192 pixels</td> - <td>8 192 pixels</td> - <td>?</td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Navigateur</th> + <th scope="col">Hauteur maximale</th> + <th scope="col">Largeur maximale</th> + <th scope="col">Aire maximale</th> + </tr> + </thead> + <tbody> + <tr> + <td>Chrome</td> + <td>32 767 pixels</td> + <td>32 767 pixels</td> + <td>268 435 456 pixels (soit 16 384 x 16 384)</td> + </tr> + <tr> + <td>Firefox</td> + <td>32 767 pixels</td> + <td>32 767 pixels</td> + <td>472 907 776 pixels (soit 22 528 x 20 992)</td> + </tr> + <tr> + <td>Safari</td> + <td>32 767 pixels</td> + <td>32 767 pixels</td> + <td>268 435 456 pixels (soit 16 384 x 16 384)</td> + </tr> + <tr> + <td>IE</td> + <td>8 192 pixels</td> + <td>8 192 pixels</td> + <td>?</td> + </tr> + </tbody> </table> -<div class="blockIndicator note"> -<p><strong>Note :</strong> Si on dépasse les dimensions ou l'aire maximale, le canevas deviendra inutilisable et les commandes de dessin ne fonctionneront pas.</p> +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Si on dépasse les dimensions ou l'aire maximale, le canevas deviendra inutilisable et les commandes de dessin ne fonctionneront pas.</p> </div> -<h2 id="Exemples">Exemples</h2> +<h2 id="examples">Exemples</h2> -<h3 id="HTML">HTML</h3> +<h3 id="html">HTML</h3> <p>Le fragment de code suivant ajoute un élément <code>canvas</code> au document. Un texte alternatif est fourni au cas où le navigateur ne peut pas afficher ce canevas. Un texte alternatif ou bien des éléments internes permettront de rendre le canevas plus accessible.</p> -<pre class="brush: html"><canvas id="canvas" width="300" height="300"> +<pre class="brush: html"><canvas width="300" height="100"> Désolé, votre navigateur ne prend pas en charge &lt;canvas&gt;. -</canvas> -</pre> +</canvas></pre> -<h3 id="JavaScript">JavaScript</h3> +<h3 id="javascript">JavaScript</h3> -<p>On utilise également ce fragment de code JavaScript avec la méthode {{domxref("HTMLCanvasElement.getContext()")}} afin d'obtenir le contexte de dessin puis on dessine sur le canevas.</p> +<p>On utilise également ce fragment de code JavaScript avec la méthode <a href="/fr/docs/Web/API/HTMLCanvasElement/getContext"><code>HTMLCanvasElement.getContext()</code></a> afin d'obtenir le contexte de dessin puis on dessine sur le canevas.</p> -<pre class="brush: js">var canvas = document.getElementById('canvas'); +<pre class="brush: js">var canvas = document.querySelector('canvas'); var ctx = canvas.getContext('2d'); ctx.fillStyle = 'green'; ctx.fillRect(10, 10, 100, 100);</pre> -<h3 id="Gérer_l'opacité">Gérer l'opacité</h3> - -<p>Si le canevas n'utilise pas la transparence, on pourra indiquer au navigateur que le canevas est opaque afin d'optimiser le rendu. Pour cela, on pourra utiliser la propriété <code>alpha</code> avec la valeur <code>false</code>.</p> - -<pre class="brush: js">var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d', {alpha: false});</pre> +<h3 id="result">Résultat</h3> -<p>Avant que cette option soit standard, on pouvait utiliser l'attribut HTML <code>moz-opaque</code> {{non-standard_inline}} {{deprecated_inline}} pour les navigateurs basés sur Gecko. Toutefois, ce n'est pas une solution standard, cf. le bug {{bug(878155)}} pour suivre le retrait de cet attribut.</p> +<p>{{EmbedLiveSample('examples')}}</p> -<h3 id="Résultat">Résultat</h3> +<h2 id="accessibility_concerns">Accessibilité</h2> -<p>{{EmbedLiveSample("Exemples","300","300")}}</p> +<h3 id="alternative_content_2">Contenu alternatif</h3> -<h2 id="Accessibilité">Accessibilité</h2> - -<h3 id="Contenu_alternatif_2">Contenu alternatif</h3> - -<p>Seul, l'élément <code><canvas></code> est une image matricielle et ne fournit pas d'informations sur les objets dessinés. Le contenu d'un canevas n'est pas accessible aux outils d'assistance qui se basent sur le contenu sémantique du document HTML. De façon générale, on évitera de se servir uniquement de <code><canvas></code> pour produire un document accessible.</p> +<p>Seul, l'élément <code><canvas></code> est une image matricielle et ne fournit pas d'informations sur les objets dessinés. Le contenu d'un canevas n'est pas accessible aux outils d'assistance qui se basent sur le contenu sémantique du document HTML. De façon générale, on évitera de se servir uniquement de <code><canvas></code> pour produire un document accessible. Voici quelques pages et articles pour aider à l'accessibilité avec les canevas :</p> <ul> - <li><a href="/Fr/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Les régions cliquables et l'accessibilité</a></li> - <li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Cas d'utilisation pour l'accessibilité de <code><canvas></code></a></li> - <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Problèmes d'accessibilité de l'élément <code><canvas></code></a></li> - <li><a href="http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">L'accessibilité de l'élément <code><canvas></code> dans Firefox 13, un article de Steve Faulkner (en anglais)</a></li> - <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">Les meilleures pratiques pour concevoir des éléments <code><canvas></code> interactifs</a></li> + <li><a href="/fr/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Les régions cliquables et l'accessibilité</a></li> + <li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Cas d'utilisation pour l'accessibilité de <code><canvas></code></a></li> + <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Problèmes d'accessibilité de l'élément <code><canvas></code></a></li> + <li><a href="http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">L'accessibilité de l'élément <code><canvas></code> dans Firefox 13, un article de Steve Faulkner (en anglais)</a></li> + <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">Les meilleures pratiques pour concevoir des éléments <code><canvas></code> interactifs</a></li> </ul> -<h2 id="Résumé_technique">Résumé technique</h2> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></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égorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_intégré">contenu intégré</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Contenu autorisé</dfn></th> - <td>Transparent mais sans aucun descendant étant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a> à l'exception des éléments {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} vaut <code>checkbox</code>, <code>radio</code>, ou <code>button</code>.</td> - </tr> - <tr> - <th scope="row"><dfn>Omission de balises</dfn></th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row"><dfn>Parents autorisés</dfn></th> - <td>Tout contenu acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Tous les rôles sont autorisés</td> - </tr> - <tr> - <th scope="row"><dfn>Interface DOM</dfn></th> - <td>{{domxref("HTMLCanvasElement")}}</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('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'scripting-1.html#the-canvas-element', '<canvas>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - </tbody> -</table> +<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.canvas")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/HTML/Canvas">Le portail MDN sur l'élément <code><canvas></code></a></li> - <li><a href="/fr/docs/Tutoriel_canvas">Tutoriel <code><canvas></code></a></li> - <li><a href="https://simon.html5.org/dump/html5-canvas-cheat-sheet.html">Anti-sèche <code><canvas></code></a></li> + <li><a href="/fr/docs/Web/API/Canvas_API">Le portail MDN sur l'élément <code><canvas></code></a></li> + <li><a href="/fr/docs/Web/API/Canvas_API/Tutorial">Tutoriel <code><canvas></code></a></li> + <li><a href="https://simon.html5.org/dump/html5-canvas-cheat-sheet.html">Anti-sèche <code><canvas></code></a></li> + <li><a href="/fr/docs/Web/Demos_of_open_web_technologies">Démonstrations liées à <code><canvas></code></a></li> + <li><a href="https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/HTML-canvas-guide/Introduction/Introduction.html">Introduction à <code><canvas></code> par Apple</a> (en anglais)</li> </ul> diff --git a/files/fr/web/html/element/caption/index.html b/files/fr/web/html/element/caption/index.html index f1d9f809a3..7210126072 100644 --- a/files/fr/web/html/element/caption/index.html +++ b/files/fr/web/html/element/caption/index.html @@ -4,161 +4,146 @@ slug: Web/HTML/Element/caption tags: - Element - HTML + - HTML Tables + - HTML tabular data - Reference - - Tableau + - Table Captions + - Table Titles + - Tables - Web + - caption translation_of: Web/HTML/Element/caption +browser-compat: html.elements.caption --- <div>{{HTMLRef}}</div> -<p>L'élément <strong>HTML <code><caption></code> </strong>représente la légende (ou le titre) d'un tableau. Il doit être le première élément parmi les descendants de l'élément {{HTMLElement("table")}}. La mise en forme CSS peut placer cet élément à un autre endroit par rapport au tableau et on pourra notamment utiliser les propriétés {{cssxref("caption-side")}} et {{cssxref("text-align")}}.</p> +<p class="summary">L'élément <strong><code><caption></code></strong> définit la légende (ou le titre) d'un tableau.</p> <div>{{EmbedInteractiveExample("pages/tabbed/caption.html", "tabbed-standard")}}</div> -<p 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> !</p> +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th> + <td>Aucune.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>La balise de fin peut être absente si l'élément n'est pas immédiatement suivi d'un blanc ASCII ou d'un commentaire.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Un élément <a href="/fr/docs/Web/HTML/Element/table"><code><table></code></a> dont il doit être le premier descendant.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><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>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLTableCaptionElement"><code>HTMLTableCaptionElement</code></a></td> + </tr> + </tbody> +</table> -<h2 id="Attributs">Attributs</h2> +<h2 id="attributes">Attributs</h2> -<p>On peut utiliser<a href="/fr/docs/Web/HTML/Attributs_universels"> les attributs universels</a> sur cet élément.</p> +<p>On peut utiliser<a href="/fr/docs/Web/HTML/Global_attributes"> les attributs universels</a> sur cet élément.</p> -<h3 id="Attributs_obsolètes">Attributs obsolètes</h3> +<h3 id="deprecated_attributes">Attributs obsolètes</h3> <dl> - <dt>{{htmlattrdef("align")}} {{deprecatedGeneric('inline','HTML4.01')}} {{obsoleteGeneric('inline','HTML5')}}</dt> - <dd>Cet attribut à valeur contrainte indique l'alignement de la légende du tableau par rapport au tableau lui-même. Il peut valoir : - <ul> - <li><code>left</code> pour un affichage à gauche du tableau</li> - <li><code>top</code> pour un affichage au dessus du tableau</li> - <li><code>right</code> pour un affichage à droite du tableau</li> - <li><code>bottom</code> pour un affichage en dessous du tableau</li> - </ul> - - <div class="note"><strong>Note d'utilisation : </strong>Ne pas utiliser cet attribut. Il a été déprécié. L'élément {{HTMLElement("caption")}} devrait être mis en forme grâce au <a href="/fr/docs/Web/CSS">CSS</a>. Afin d'obtenir des effets similaires à cet attribut, on utilisera les propriétés CSS {{cssxref("caption-side")}} et {{cssxref("text-align")}}.</div> - </dd> + <dt><strong id="attr-align"><code>align</code></strong> {{deprecated_inline}}</dt> + <dd>Cet attribut à valeur contrainte indique l'alignement de la légende du tableau par rapport au tableau lui-même. Il peut valoir : + <dl> + <dt><code>left</code></dt> + <dd>La légende est affichée à gauche du tableau</dd> + <dt><code>top</code></dt> + <dd>La légende est affichée au-dessus du tableau</dd> + <dt><code>right</code></dt> + <dd>La légende est affichée à droite du tableau</dd> + <dt><code>bottom</code></dt> + <dd>La légende est affichée en dessous du tableau</dd> + </dl> + + <div class="notecard note"> + <p><b>Note d'utilisation :</b></p> + <p>Ne pas utiliser cet attribut. Il a été déprécié. L'élément <code><caption></code> devrait être mis en forme grâce au <a href="/fr/docs/Web/CSS">CSS</a>. Afin d'obtenir des effets similaires à cet attribut, on utilisera les propriétés CSS <a href="/fr/docs/Web/CSS/caption-side"><code>caption-side</code></a> et <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a>.</p> + </div> + </dd> </dl> -<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> +<h2 id="usage_notes">Notes d'utilisation</h2> -<p>Quand l'élément {{HTMLElement("table")}} (étant le parent de l'élément {{HTMLElement("caption")}}) n'est que l'unique descendant d'un élément {{HTMLElement("figure")}},c'est l'élément {{HTMLElement("figcaption")}} doit être utilisé.</p> +<p>L'élément <code><caption></code> devrait être le premier élément enfant de l'élément parent <a href="/fr/docs/Web/HTML/Element/table"><code><table></code></a>.</p> -<h2 id="Exemples">Exemples</h2> +<p>Quand l'élément <a href="/fr/docs/Web/HTML/Element/table"><code><table></code></a> (étant le parent de l'élément <code><caption></code>) n'est que l'unique descendant d'un élément <a href="/fr/docs/Web/HTML/Element/figure"><code><figure></code></a>, c'est l'élément <a href="/fr/docs/Web/HTML/Element/figcaption"><code><figcaption></code></a> doit être utilisé.</p> -<h3 id="HTML">HTML</h3> +<p>Utiliser la propriété <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a> sur le tableau ne modifiera pas l'apparence de la légende. Il est également nécessaire d'ajouter une déclaration CSS avec <code>background-color</code> sur l'élément <code><caption></code> pour que celui-ci ait la même couleur.</p> -<pre class="brush: html"><table> - <caption>Une légende pour un tableau</caption> - <tr> - <td>Bip bop bip bop</td> - <td>Bop bip bop bip</td> - </tr> -</table> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">caption { - caption-side: top; - align: right; -} -table { - border-collapse: collapse; - border-spacing: 0px; -} -table, th, td { - border: 1px solid black; -} -</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples","200","200")}}</p> - -<h2 id="Résumé_technique">Résumé technique</h2> +<h2 id="example">Exemple</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>Aucune.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Catégorie de flux</a>.</td> - </tr> - <tr> - <th scope="row">Omission de balises</th> - <td>La balise de fin peut être absente si l'élément n'est pas immédiatement suivi d'un blanc ASCII ou d'un commentaire.</td> - </tr> - <tr> - <th scope="row">Éléments parents autorisés</th> - <td>Un élément {{HTMLElement("table")}} dont il doit être le premier descendant.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Aucun.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLTableCaptionElement")}}</td> - </tr> - </tbody> -</table> +<p>Cet exemple simple présente un tableau qui comprend une légende.</p> -<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('HTML WHATWG', 'tabular-data.html#the-caption-element', '<caption>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-caption-element', '<caption>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.2', '<caption>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> +<h3 id="html">HTML</h3> -<p>{{Compat("html.elements.caption")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> +<pre class="brush: html"><table> + <caption>Légende de l'exemple</caption> + <tr> + <th>Connexion</th> + <th>Courriel :</th> + </tr> + <tr> + <td>utilisateur1</td> + <td>utilisateur1@test.fr</td> + </tr> + <tr> + <td>utilisateur2</td> + <td>utilisateur2@test.fr</td> + </tr> +</table></pre> + +<div class="hidden"> + <pre class="brush: css">caption { + caption-side: top; + } + table { + border-collapse: collapse; + border-spacing: 0px; + } + table, th, td { + border: 1px solid black; + } + </pre> + </div> + +<h3 id="result">Résultat</h3> + +<p>{{EmbedLiveSample('example', '', 120)}}</p> + +<h2 id="specifications">Spécifications</h2> + +<p>{{Specifications}}</p> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat}}</p> + +<h2 id="see_also">Voir aussi</h2> <ul> - <li>Les autres éléments HTML relatifs aux tableaux : - <ul> - <li>{{HTMLElement("col")}}</li> - <li>{{HTMLElement("colgroup")}}</li> - <li>{{HTMLElement("table")}}</li> - <li>{{HTMLElement("tbody")}}</li> - <li>{{HTMLElement("td")}}</li> - <li>{{HTMLElement("tfoot")}}</li> - <li>{{HTMLElement("th")}}</li> - <li>{{HTMLElement("thead")}}</li> - <li>{{HTMLElement("tr")}}</li> - </ul> - </li> - <li>Les propriétés CSS pouvant être utilisées pour mettre en forme l'élément {{HTMLElement("caption")}} : - <ul> - <li>{{cssxref("text-align")}}</li> - <li>{{cssxref("caption-side")}}.</li> - </ul> - </li> -</ul> + <li>Les propriétés CSS particulièrement utiles pour styliser l'élément <code><caption></code> : + <ul> + <li><a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a></li> + <li><a href="/fr/docs/Web/CSS/caption-side"><code>caption-side</code></a>.</li> + </ul> + </li> + </ul> diff --git a/files/fr/web/html/element/center/index.html b/files/fr/web/html/element/center/index.html index cd47d48252..5e7bdd54e2 100644 --- a/files/fr/web/html/element/center/index.html +++ b/files/fr/web/html/element/center/index.html @@ -4,94 +4,72 @@ slug: Web/HTML/Element/center tags: - Element - HTML - - Obsolete + - Deprecated - Reference + - Text + - Text Alignment - Web + - alignment + - center translation_of: Web/HTML/Element/center +browser-compat: html.elements.center --- -<div>{{HTMLRef}}{{obsolete_header}}</div> +<div>{{HTMLRef}}</div> -<p>L’élément HTML <strong><code><center></code></strong> est un <a href="/fr/docs/Web/HTML/Éléments_en_bloc">élément de type bloc</a> qui contient des paragraphes et d'autres éléments de type bloc ou en ligne. Le contenu entier de cet élément est centré horizontalement au sein de son conteneur parent (généralement l'élément {{HTMLElement("body")}}).</p> - -<p>Cet élément a été déprécié en HTML4 (et XHTML 1) au profit de la propriété <a href="/fr/docs/Web/CSS">CSS</a> {{cssxref("text-align")}} qui peut être appliqué à l'élément {{HTMLElement("div")}} ou à un élément {{HTMLElement("p")}}. Pour centrer des blocs, on utilisera d'autres propriétés ({{cssxref("margin-left")}} et {{cssxref("margin-right")}} avec la valeur <code>auto</code> par exemple ou <a href="/fr/docs/Web/CSS/Disposition_flexbox_CSS/Utilisation_des_flexbox_en_CSS">les boîtes flexibles</a>).</p> +<div class="notecard deprecated"> + <p><b>Obsolète</b></p> + <p>Cette fonctionnalité est obsolète. Bien qu'encore supportée par des navigateurs, son utilisation est découragée pour tout nouveau projet. Évitez de l'utiliser.</p> +</div> -<h2 id="Interface_DOM">Interface DOM</h2> +<p class="summary">L'élément <strong><code><center></code></strong> est un <a href="/fr/docs/Web/HTML/Block-level_elements">élément de bloc</a> qui contient des paragraphes et d'autres éléments de type bloc ou en ligne. Le contenu entier de cet élément est centré horizontalement au sein de son conteneur parent (généralement l'élément <a href="/fr/docs/Web/HTML/Element/body"><code><body></code></a>).</p> -<p>Cet élément implémente l'interface {{domxref("HTMLElement")}}.</p> +<p>Cet élément a été déprécié en HTML4 (et XHTML 1) au profit de la propriété <a href="/fr/docs/Web/CSS">CSS</a> <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a> qui peut être appliqué à l'élément <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> ou à un élément <a href="/fr/docs/Web/HTML/Element/p"><code><p></code></a>. Pour centrer des blocs, on utilisera d'autres propriétés (<a href="/fr/docs/Web/CSS/margin-left"><code>margin-left</code></a> et <a href="/fr/docs/Web/CSS/margin-right"><code>margin-right</code></a> (ou définissez <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> à <code>0 auto</code>).</p> -<div class="note"> -<p><strong>Note d'implémentation :</strong> Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface {{domxref("HTMLSpanElement")}} pour cet élément.</p> -</div> +<h2 id="dom_interface">Interface DOM</h2> -<h2 id="Exemples">Exemples</h2> +<p>Cet élément implémente l'interface <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>.</p> -<h3 id="Premier_exemple_(HTML)">Premier exemple (HTML)</h3> +<div class="notecard note"> + <p><b>Note d'implémentation :</b></p> + <p>Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface <a href="/fr/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> pour cet élément.</p> +</div> -<h4 id="HTML">HTML</h4> +<h2 id="example_1">Exemple 1</h2> <pre class="brush: html"><center> Ce texte sera centré. <p>Ainsi que ce paragraphe.</p> -</center> -</pre> +</center></pre> -<h4 id="Résultat">Résultat</h4> +<h2 id="example_2">Exemple 2 (alternative CSS)</h2> -<p>{{EmbedLiveSample("Premier_exemple_(HTML)","200","100")}}</p> - -<h3 id="Deuxième_exemple_(CSS)">Deuxième exemple (CSS)</h3> - -<h4 id="HTML_2">HTML</h4> - -<pre class="brush: html"><div class="centrer"> +<pre class="brush: html"><div style="text-align:center"> Ce texte sera centré. <p>Ainsi que ce paragraphe.</p> </div></pre> -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">.centrer { - text-align: center; -} -</pre> +<h2 id="example_3">Exemple 3 (alternative CSS)</h2> -<h4 id="Résultat_2">Résultat</h4> - -<p>{{EmbedLiveSample("Deuxième_exemple_(CSS)","200","100")}}</p> - -<h3 id="Troisième_exemple_(CSS)">Troisième exemple (CSS)</h3> - -<h4 id="HTML_3">HTML</h4> - -<pre class="brush: html"><p class="centrer"> +<pre class="brush: html"><p style="text-align:center"> Cette ligne sera centrée.<br> Ainsi que cette ligne. </p></pre> -<h4 id="CSS_2">CSS</h4> - -<pre class="brush: css">.centrer { - text-align: center; -} -</pre> - -<h4 id="Résultat_3">Résultat</h4> - -<p>{{EmbedLiveSample("Troisième_exemple_(CSS)","200","100")}}</p> +<h2 id="notes">Notes</h2> -<h2 id="Notes">Notes</h2> +<p>Appliquer <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a><code>: center</code> sur un élément <a href="/fr/docs/Web/HTML/Element/p"><code><p></code></a> ou <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> centre <em>le contenu</em> de ces éléments, tout en laissant leurs dimensions générales inchangées.</p> -<p>Appliquer {{cssxref("text-align")}}<code>: center</code> sur un élément {{HTMLElement("p")}} ou {{HTMLElement("div")}} centre <em>le contenu</em> de ces éléments, tout en laissant leurs dimensions générales inchangées.</p> +<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.center")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>{{cssxref("text-align")}}</li> - <li>{{cssxref("display")}}</li> + <li>La propriété <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a></li> + <li>La propriété <a href="/fr/docs/Web/CSS/display"><code>display</code></a></li> </ul> diff --git a/files/fr/web/html/element/cite/index.html b/files/fr/web/html/element/cite/index.html index a33ddafc2e..7f2eed785a 100644 --- a/files/fr/web/html/element/cite/index.html +++ b/files/fr/web/html/element/cite/index.html @@ -2,144 +2,120 @@ title: '<cite> : l''élément de citation' slug: Web/HTML/Element/cite tags: + - Attribution + - Citation + - Citing References + - Citing Works - Element - HTML + - HTML text-level semantics + - Quotations - Reference - Web translation_of: Web/HTML/Element/cite +browser-compat: html.elements.cite --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><cite></code></strong> contient le titre d'une œuvre telle qu'un livre, une chanson, un film, une sculpture… Cet élément doit inclure le titre de l'œuvre. Cette référence peut-être abrégée en accord avec les conventions d'usages pour l'ajout des métadonnées de citations.</p> +<p class="summary">L'élément <strong><code><cite></code></strong> contient le titre d'une œuvre telle qu'un livre, une chanson, un film, une sculpture… Cet élément doit inclure le titre de l'œuvre. Cette référence peut-être abrégée en accord avec les conventions d'usages pour l'ajout des métadonnées de citations.</p> <div>{{EmbedInteractiveExample("pages/tabbed/cite.html", "tabbed-standard")}}</div> -<p 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> !</p> +<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 de 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#palpable_content">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><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 acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><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>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>. Auparavant et jusqu'à Gecko 1.9.2 (Firefox 4) inclus, Firefox implémentait l'interface <a href="/fr/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> pour cet élément</td> + </tr> + </tbody> +</table> -<h2 id="Attributs">Attributs</h2> +<h2 id="attributes">Attributs</h2> -<p>Cet élément prend uniquement en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +<p>Cet élément prend uniquement en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> -<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> +<h2 id="usage_notes">Notes d'utilisation</h2> <p>Voici des exemples d'œuvres auxquelles on pourrait faire référence grâce à un élément <code><cite></code> :</p> -<div class="threecolumns" id="creative-works"> <ul> - <li>Un livre</li> - <li>Un article de recherche</li> - <li>Un essai</li> - <li>Un poème</li> - <li>Une pièce musicale</li> - <li>Une chanson</li> - <li>Le script d'une pièce ou d'un film</li> - <li>Un film</li> - <li>Une émission télévisée</li> - <li>Un jeu</li> - <li>Une sculpture</li> - <li>Une peinture</li> - <li>Une pièce de théâtre</li> - <li>Un opéra</li> - <li>Une comédie musicale</li> - <li>Une exposition</li> - <li>Les minutes d'un procès</li> - <li>Un programme informatique</li> - <li>Un site web</li> - <li>Une page web</li> - <li>Un billet de blog ou un commentaire</li> - <li>Un billet ou un commentaire sur un forum</li> - <li>Une déclaration écrite ou orale</li> - <li>etc.</li> + <li>Un livre</li> + <li>Un article de recherche</li> + <li>Un essai</li> + <li>Un poème</li> + <li>Une pièce musicale</li> + <li>Une chanson</li> + <li>Le script d'une pièce ou d'un film</li> + <li>Un film</li> + <li>Une émission télévisée</li> + <li>Un jeu</li> + <li>Une sculpture</li> + <li>Une peinture</li> + <li>Une pièce de théâtre</li> + <li>Un opéra</li> + <li>Une comédie musicale</li> + <li>Une exposition</li> + <li>Les minutes d'un procès</li> + <li>Un programme informatique</li> + <li>Un site web</li> + <li>Une page web</li> + <li>Un billet de blog ou un commentaire</li> + <li>Un billet ou un commentaire sur un forum</li> + <li>Une déclaration écrite ou orale</li> + <li>etc.</li> </ul> -</div> -<p>La spécification rédigée par le W3C indique qu'une référence à une œuvre peut inclure le nom de l'auteur. En revanche, celle écrite par le WHATWG indique qu'en aucun cas le nom d'une personne ne peut être inclus.</p> +<p>Il convient de noter que la spécification du W3C dit qu'une référence à une œuvre créative, telle qu'incluse dans un élément <code><cite></code>, peut inclure le nom de l'auteur de l'œuvre. Cependant, la spécification WHATWG pour <code><cite></code> dit le contraire : le nom d'une personne ne doit <em>jamais</em> être inclus, en toutes circonstances.</p> -<p>Il faut utiliser l'attribut {{htmlattrxref("cite", "blockquote")}} d'un élément {{HTMLElement("blockquote")}} ou {{HTMLElement("q")}} pour fournir une ressource en ligne liée à une source.</p> +<p>Pour inclure une référence à la source du matériel cité qui est contenu dans un élément <a href="/fr/docs/Web/HTML/Element/blockquote"><code><blockquote></code></a> ou <a href="/fr/docs/Web/HTML/Element/q"><code><q></code></a>, utilisez l'attribut <a href="/fr/docs/Web/HTML/Element/blockquote#attr-cite"><code>cite</code></a> sur l'élément.</p> -<p>Afin d'éviter l'utilisation de l'italique par défaut pour l'élément <code><cite></code>, on pourra utiliser la propriété <a href="/fr/docs/Web/CSS">CSS</a> {{cssxref("font-style")}}.</p> +<p>En général, les navigateurs donnent un style au contenu d'un élément <code><cite></code> en italique par défaut. Pour éviter cela, appliquez la propriété CSS <a href="/fr/docs/Web/CSS/font-style"><code>font-style</code></a> à l'élément <code><cite></code>.</p> -<h2 id="Exemples">Exemples</h2> - -<h3 id="HTML">HTML</h3> +<h2 id="example">Exemple</h2> <pre class="brush: html"><p> Plus d'informations sont disponibles dans <cite>[ISO-0000].</cite> </p></pre> -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples","200","100")}}</p> +<p>Le HTML ci-dessus produit le résultat suivant :</p> -<h2 id="Résumé_technique">Résumé technique</h2> +<p>{{EmbedLiveSample('example', '', 80)}}</p> -<table class="properties"> - <tbody> - <tr> - <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></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égorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Contenu autorisé</dfn></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Omission de balises</dfn></th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row"><dfn>Parents autorisés</dfn></th> - <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Tous les rôles sont autorisés.</td> - </tr> - <tr> - <th scope="row"><dfn>Interface DOM</dfn></th> - <td>{{domxref("HTMLElement")}}. Auparavant et jusqu'à Gecko 1.9.2 (Firefox 4) inclus, Firefox implémentait l'interface {{domxref("HTMLSpanElement")}} pour cet élément</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('HTML WHATWG', 'semantics.html#the-cite-element', '<cite>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-cite-element', '<cite>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'text.html#h-9.2.1', '<cite>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td> </td> - </tr> - </tbody> -</table> +<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.cite")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>{{HTMLElement("blockquote")}}, utilisé pour des citations longues.</li> - <li>{{HTMLElement("q")}}, utilisé pour des citations en incise.</li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/blockquote"><code><blockquote></code></a>, utilisé pour des citations longues.</li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/q"><code><q></code></a>, utilisé pour des citations en incise.</li> </ul> diff --git a/files/fr/web/html/element/code/index.html b/files/fr/web/html/element/code/index.html index 1964257a35..332abaf92b 100644 --- a/files/fr/web/html/element/code/index.html +++ b/files/fr/web/html/element/code/index.html @@ -1,118 +1,93 @@ --- -title: '<code> : l''élément de code en incise' +title: '<code> : l''élément de code en ligne' slug: Web/HTML/Element/code tags: + - Code - Element - HTML + - HTML text-level semantics + - Inline Code - Reference - Web translation_of: Web/HTML/Element/code +browser-compat: html.elements.code --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><code></code></strong> représente un fragment de code machine. Par défaut, l'agent utilisateur utilise une police à chasse fixe (<em>monospace</em>) afin d'afficher le texte contenu dans cet élément.</p> +<p class="summary">L'élément HTML <strong><code><code></code></strong> représente un court fragment de code machine. Par défaut, l'agent utilisateur utilise une police à chasse fixe (<em>monospace</em>) afin d'afficher le texte contenu dans cet élément.</p> <div>{{EmbedInteractiveExample("pages/tabbed/code.html", "tabbed-shorter")}}</div> -<p 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> !</p> +<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 de 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#palpable_content">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><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 acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><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>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>. Jusqu'à Gecko 1.9.2 (Firefox 4) inclus, Firefox implémentait l'interface <a href="/fr/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> pour cet élément.</td> + </tr> + </tbody> + </table> + +<h2 id="attributes">Attributs</h2> + +<p>Cet élément prend uniquement en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> + +<h2 id="example">Exemples</h2> + +<p>Un paragraphe de texte qui contient <code><code></code> :</p> +<pre class="brush: html"><p> + La fonction <code>selectAll()</code> met en évidence tout le texte + du champ de saisie afin que l'utilisateur puisse, par exemple, le + copier ou le supprimer. +</p></pre> +<p>La sortie générée par ce HTML ressemble à ceci :</p> -<h2 id="Attributs">Attributs</h2> +<p>{{EmbedLiveSample('example', '', 100)}}</p> -<p>Cet élément prend uniquement en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +<h2 id="notes">Notes</h2> -<h2 id="Exemples">Exemples</h2> +<p>Pour représenter plusieurs lignes de code, enveloppez l'élément <code><code></code> dans un élément <a href="/fr/docs/Web/HTML/Element/pre"><code><pre></code></a>. L'élément <code><code></code> en lui-même ne représente qu'une seule phrase de code ou ligne de code.</p> -<h3 id="HTML">HTML</h3> +<p>Une règle CSS peut être définie pour le sélecteur <code>code</code> afin de remplacer la fonte par défaut du navigateur. Les préférences définies par l'utilisateur peuvent avoir la priorité sur la règle CSS spécifiée.</p> -<pre class="brush: html"><p> - Texte normal. Voici comment déclarer une variable - en JavaScript : <br/> - <code>var i = 0;</code> - Texte normal. -</p> -</pre> +<h2 id="specifications">Spécifications</h2> -<h3 id="Résultat">Résultat</h3> +<p>{{Specifications}}</p> -<p>{{EmbedLiveSample("Exemples","200","100")}}</p> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<h2 id="Notes">Notes</h2> +<p>{{Compat}}</p> -<p>Pour représenter plusieurs lignes de code, on pourra utiliser l'élément {{HTMLElement("pre")}}.</p> - -<p>On peut utiliser une règle CSS afin de surcharger la police par défaut des navigateurs. Cependant, il faut garder à l'esprit que les préférences de l'utilisateur peuvent prendre le dessus sur la mise en forme définie via le CSS.</p> -<h2 id="Résumé_technique">Résumé technique</h2> -<table class="properties"> - <tbody> - <tr> - <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></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égorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Contenu autorisé</dfn></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Omission de balises</dfn></th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row"><dfn>Parents autorisés</dfn></th> - <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Tous les rôles sont autorisés.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLElement")}}. Jusqu'à Gecko 1.9.2 (Firefox 4) inclus, Firefox implémentait l'interface {{domxref("HTMLSpanElement")}} pour cet élément.</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('HTML WHATWG', 'text-level-semantics.html#the-code-element', '<code>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-code-element', '<code>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<code>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<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> - -<p>{{Compat("html.elements.code")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>{{HTMLElement("samp")}}</li> - <li>{{HTMLElement("kbd")}}</li> - <li>{{deprecated_inline}} {{HTMLElement("command")}}</li> - <li>{{HTMLElement("var")}}</li> - <li>{{HTMLElement("pre")}}</li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/samp"><code><samp></code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/kbd"><code><kbd></code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/var"><code><var></code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/pre"><code><pre></code></a></li> </ul> diff --git a/files/fr/web/html/element/col/index.html b/files/fr/web/html/element/col/index.html index 6bae79df54..77709ea9a9 100644 --- a/files/fr/web/html/element/col/index.html +++ b/files/fr/web/html/element/col/index.html @@ -1,277 +1,148 @@ --- -title: <col> +title: '<col> : l''élément représentant une colonne' slug: Web/HTML/Element/col tags: - Element - HTML + - HTML tabular data - Reference - - Tableau + - Tables - Web translation_of: Web/HTML/Element/col +browser-compat: html.elements.col --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><col></code></strong> définit une colonne appartenant à un tableau et est utilisé afin de définir la sémantique commune à toutes ses cellules. On trouve généralement cet élément au sein d'un élément {{HTMLElement("colgroup")}}.</p> +<p class="summary">L'élément HTML <strong><code><col></code></strong> définit une colonne appartenant à un tableau et est utilisé afin de définir la sémantique commune à toutes ses cellules. On trouve généralement cet élément au sein d'un élément <a href="/fr/docs/Web/HTML/Element/colgroup"><code><colgroup></code></a>.</p> <div>{{EmbedInteractiveExample("pages/tabbed/col.html","tabbed-taller")}}</div> -<p 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> !</p> - -<p>Cet élément peut être mis en forme grâce à CSS mais seules quelques propriétés auront un effet sur la colonne (se référer à <a href="https://www.w3.org/TR/CSS21/tables.html#columns">la spécification CSS 2.1</a> pour une liste exhaustive)</p> - -<h2 id="Attributs">Attributs</h2> - -<p>Comme pour tous les éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_globaux">les attributs universels</a> avec cet élément.</p> - -<dl> - <dt>{{htmlattrdef("align")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> - <dd>Cet attribut énuméré définit l'alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont : - <ul> - <li><code>left</code> : le contenu de la cellule est aligné à gauche de la cellule</li> - <li><code>center</code> : le contenu de la cellule est centré horizontalement</li> - <li><code>right</code> : le contenu de la cellule est aligné à droite de la cellule</li> - <li><code>justify</code> : insère des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié</li> - <li><code>char</code> : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs {{htmlattrxref("char", "col")}} et {{htmlattrxref("charoff", "col")}} {{unimplemented_inline(2212)}}.</li> - </ul> - - <p>Si cet attribut n'est pas renseigné, sa valeur est héritée de la valeur de l'attribut {{htmlattrxref("align", "colgroup")}} de l'élément {{HTMLElement("colgroup")}} auquel cette colonne appartient. S'il n'y en a pas, la valeur <code>left</code> est prise comme valeur par défaut.</p> - - <div class="warning"><strong>Attention : </strong>Cet attribut est devenu obsolète dans le dernier standard. - - <ul> - <li>Pour réaliser les mêmes effets que les valeurs <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code> : - - <ul> - <li>N'utilisez pas la propriété {{cssxref("text-align")}} sur un sélecteur renvoyant un élement {{HTMLElement("col")}}. Les éléments {{HTMLElement("td")}} ne sont pas des descendants de l'élément {{HTMLElement("col")}} il n'hériteront pas de cette propriété.</li> - <li>Si le tableau n'utilise pas l'attribut {{htmlattrxref("colspan", "td")}}, il est possible d'utiliser le sélecteur CSS <code>td:nth-child(an+b)</code> avec a qui vaut zéro et <code>b</code> la position ordinale de la colonne dans le tableau. <code>td:nth-child(2) { text-align: right; }</code> permettra d'aligner à droite la deuxième colonne.</li> - <li>Si le tableau utilise l'attribut {{htmlattrxref("colspan", "td")}}, l'effet peut être réalisé en combinant différents sélecteurs CSS comme <code>[colspan=n]</code>. Cependant cela n'est pas trivial à effectuer.</li> - </ul> - </li> - <li>Pour réaliser le même effet qu'avec la valeur <code>char</code>. Il est possible, en CSS3, d'utiliser la valeur de l'attribut {{htmlattrxref("char", "col")}} comme valeur de la propriété {{cssxref("text-align")}}. {{unimplemented_inline}}.</li> - </ul> - </div> - </dd> - <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> - <dd>Cet attribut définit la couleur d'arrière-plan de toutes les cellules de la colonne. C'est un code à 6 chiffres hexadécimaux comme défini par le <a href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé. - <table> +<table class="properties"> <tbody> - <tr> - <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>black</code> = "#000000"</td> - <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>green</code> = "#008000"</td> - </tr> - <tr> - <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>silver</code> = "#C0C0C0"</td> - <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>lime</code> = "#00FF00"</td> - </tr> - <tr> - <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>gray</code> = "#808080"</td> - <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>olive</code> = "#808000"</td> - </tr> - <tr> - <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>white</code> = "#FFFFFF"</td> - <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>yellow</code> = "#FFFF00"</td> - </tr> - <tr> - <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>maroon</code> = "#800000"</td> - <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>navy</code> = "#000080"</td> - </tr> - <tr> - <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>red</code> = "#FF0000"</td> - <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>blue</code> = "#0000FF"</td> - </tr> - <tr> - <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>purple</code> = "#800080"</td> - <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>teal</code> = "#008080"</td> - </tr> - <tr> - <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>fuchsia</code> = "#FF00FF"</td> - <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>aqua</code> = "#00FFFF"</td> - </tr> + <tr> + <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégorie de contenu</a></th> + <td>Aucune.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Aucun, cet élément est un élément vide.</td> + </tr> + <tr> + <th scope="row">Omission de balise</th> + <td>La balise ouvrante est obligatoire, l'élément étant un élément vide, la balise de fin est interdite.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td><a href="/fr/docs/Web/HTML/Element/colgroup"><code><colgroup></code></a> uniquement. Toutefois, ce parent peut être défini de façon implicite car sa balise ouvrante n'est pas obligatoire. L'élément <a href="/fr/docs/Web/HTML/Element/colgroup"><code><colgroup></code></a> ne doit pas avoir d'attribut <a href="/fr/docs/Web/HTML/Element/colgroup#attr-span"><code>span</code></a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><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>Aucun rôle autorisé.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLTableColElement"><code>HTMLTableColElement</code></a></td> + </tr> </tbody> </table> - <div class="note"><strong>Note d'utilisation : </strong>Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("col")}} doit être mis en forme grâce au CSS. Pour obtenir un effet semblable à celui obtenu avec l'attribut <code><strong>bgcolor</strong></code>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments {{HTMLElement("td")}} souhaités.</div> - </dd> -</dl> - -<dl> - <dt>{{htmlattrdef("char")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> - <dd>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules de la colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "col")}} ne vaut pas <code>char</code>, l'attribut est ignoré.</dd> - <dd> - <div class="note"><strong>Note d'utilisation : </strong>Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "col")}}, on pourra utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</div> - </dd> -</dl> - -<dl> - <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> - <dd>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut<strong> char</strong> à appliquer au contenu des cellules. - <div class="note"><strong>Note d'utilisation : </strong>Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</div> - </dd> -</dl> - -<dl> - <dt>{{htmlattrdef("span")}}</dt> - <dd>Cet attribut contient un entier positif indiquand le nombre de colonne consécutives regroupées sous l'élément <code><col></code>. La valeur par défaut de cet attribut est 1.</dd> -</dl> - -<dl> - <dt>{{htmlattrdef("valign")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> - <dd>Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont : - <ul> - <li><code>baseline</code> qui alignera le texte à la ligne la plus basse possible en utilisant la <a class="external" href="https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code>.</li> - <li><code>bottom</code> qui placera le texte au plus bas de la cellule</li> - <li><code>middle</code> qui centrera verticalement le texte dans la cellule</li> - <li><code>top</code> qui placera le texte au plus haut de la cellule.</li> - </ul> - - <div class="note"><strong>Notes d'utilisation : </strong>Cet attribut étant maintenant obsolète (et n'étant plus supporté), il est fortement déconseillé de l'utiliser. - - <ul> - <li>Il ne faut pas essayer de régler la propriété {{cssxref("vertical-align")}} sur un sélecteur retournant un élément {{HTMLElement("col")}}. En effet les éléments {{HTMLElement("td")}} n'étant pas des descendants de l'élément {{HTMLElement("col")}}, ils n'hériteront pas de la propriété.</li> - <li>Si le tableau n'utilise pas d'attribut {{htmlattrxref("colspan", "td")}} il est possible d'utiliser le sélecteur CSS <code>tr:nth-child(an+b)</code> avec a le nombre total de colonnes dans le tableau et b la position ordinale de la colonne dans le tableau. La propriété {{cssxref("vertical-align")}} peut alors être utilisée sur le sélecteur.</li> - <li>Si le tableau n'utilise pas l'attribut {{htmlattrxref("colspan", "td")}} l'effet peut être obtenu avec une combinaison de différents sélecteurs CSS comme <code>[colspan=n]</code>. Cependant cela n'est pas trivial à réaliser.</li> - </ul> - </div> - </dd> -</dl> - -<dl> - <dt>{{htmlattrdef("width")}} {{obsolete_inline("html5")}}</dt> - <dd>Cet attribut définit la largeur par défaut pour chaque colonne dans le groupe de colonnes. En plus de la notation standard en pixels et pourcents, cet attribut peut prendre la valeur spéciale<code> 0*</code>, indiquant ainsi que la largeur de chaque colonne doit être suffisante pour contenir les contenus des cellules. Utiliser cette notation de manière relative (par exemple <code>0.5*</code> ) est également possible.</dd> -</dl> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><table> - <colgroup> - <col class="premiereColonne"> - <col class="deuxDernieresColonnes" span="2"> - </colgroup> - <tr> - <th>Citron vert</th> - <th>Citron</th> - <th>Orange</th> - </tr> - <tr> - <td>Vert</td> - <td>Jaune</td> - <td>Orange</td> - </tr> -</table></pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples","200","100")}}</p> - -<div class="note"> -<p><strong>Note :</strong> On pourra consulter la page {{HTMLElement("table")}} pour d'autres exemples sur les tableaux.</p> -</div> - -<h2 id="Résumé_technique">Résumé technique</h2> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu">Catégorie de contenu</a></th> - <td>Aucune.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td>Aucun, cet élément est un élément vide.</td> - </tr> - <tr> - <th scope="row">Omission de balise</th> - <td>La balise ouvrante est obligatoire, l'élément étant un élément vide, la balise de fin est interdite.</td> - </tr> - <tr> - <th scope="row">Parents autorisés</th> - <td>{{HTMLElement("colgroup")}} uniquement. Toutefois, ce parent peut être défini de façon implicite car sa balise ouvrante n'est pas obligatoire. L'élément {{HTMLElement("colgroup")}} ne doit pas avoir d'attribut {{htmlattrxref("span", "colgroup")}}.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Aucun.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLTableColElement")}}</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('HTML WHATWG', 'tables.html#the-col-element', '<col>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-col-element', '<col>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/tables.html#h-11.2.4.2', '<col>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> - -<p>{{Compat("html.elements.col")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> - -<ul> - <li>Les autres éléments HTML relatifs aux tableaux : + <h2 id="attributes">Attributs</h2> + + <p>Cet élément inclut les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>.</p> + + <dl> + <dt><strong id="attr-span"><code>span</code></strong></dt> + <dd>Cet attribut contient un nombre entier positif indiquant le nombre de colonnes consécutives que l'élément <code><col></code> couvre. S'il n'est pas présent, sa valeur par défaut est <code>1</code>.</dd> + </dl> + + <h3 id="deprecated_attributes">Attributs dépréciés</h3> + + <p>Les attributs suivants sont dépréciés et ne doivent pas être utilisés. Ils sont documentés ci-dessous à titre de référence lors de la mise à jour du code existant et uniquement pour des raisons historiques.</p> + + <dl> + <dt><strong id="attr-align"><code>align</code></strong> {{deprecated_inline}}</dt> + <dd>Cet attribut de type énumératif indique comment l'alignement horizontal du contenu des cellules de chaque colonne sera traité. Les valeurs possibles sont : <ul> - <li>{{HTMLElement("caption")}}</li> - <li>{{HTMLElement("colgroup")}}</li> - <li>{{HTMLElement("table")}}</li> - <li>{{HTMLElement("tbody")}}</li> - <li>{{HTMLElement("td")}}</li> - <li>{{HTMLElement("tfoot")}}</li> - <li>{{HTMLElement("th")}}</li> - <li>{{HTMLElement("thead")}}</li> - <li>{{HTMLElement("tr")}}</li> + <li><code>left</code>, aligner le contenu à gauche de la cellule</li> + <li><code>center</code>, centrer le contenu dans la cellule</li> + <li><code>right</code>, aligner le contenu à droite de la cellule</li> + <li><code>justify</code>, insérer des espaces dans le contenu textuel afin que le contenu soit justifié dans la cellule</li> </ul> - </li> - <li>Les propriétés et pseudo-classes CSS qui peuvent s'avérer utiles pour mettre en forme l'élément <code><col></code> : + + <p>Si cet attribut n'est pas défini, sa valeur est héritée du <a href="/fr/docs/Web/HTML/Element/colgroup#attr-align"><code>align</code></a> de l'élément <a href="/fr/docs/Web/HTML/Element/colgroup"><code><colgroup></code></a> auquel appartient cet <code><col></code>. S'il n'y en a pas, la valeur <code>left</code> est supposée.</p> + + <div class="notecard note"> + <p><b>Note :</b></p> + + <ul> + <li>Pour obtenir le même effet que les valeurs <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code> : + + <ul> + <li>N'essayez pas de définir la propriété <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a> sur un sélecteur donnant un élément <code><col></code>. Comme les éléments <a href="/fr/docs/Web/HTML/Element/td"><code><td></code></a> ne sont pas des descendants de l'élément <code><col></code>, ils n'en hériteront pas.</li> + <li>Si le tableau n'utilise pas d'attribut <a href="/fr/docs/Web/HTML/Element/td#attr-colspan"><code>colspan</code></a>, utilisez le sélecteur CSS <code>td:nth-child(an+b)</code>. Définissez <code>a</code> à zéro et <code>b </code> à la position de la colonne dans le tableau, par exemple <code>td:nth-child(2) { text-align : right ; }</code> pour aligner à droite la deuxième colonne.</li> + <li>Si le tableau utilise bien un attribut <a href="/fr/docs/Web/HTML/Element/td#attr-colspan"><code>colspan</code></a>, l'effet peut être obtenu en combinant des sélecteurs d'attributs CSS adéquats comme <code>[colspan=n]</code>, bien que cela ne soit pas trivial.</li> + </ul> + </li> + </ul> + </div> + </dd> + <dt><strong id="attr-bgcolor"><code>bgcolor</code></strong> {{deprecated_inline}}</dt> + <dd> + <p>La couleur de fond du tableau. Il s'agit d'un <a href="/fr/docs/Web/CSS/color_value#rgb_colors">code RVB hexadécimal à 6 chiffres</a>, préfixé par un « <code>#</code> ». L'un des <a href="/fr/docs/Web/CSS/color_value#color_keywords">mots-clés de couleur</a> prédéfinis peut également être utilisé.</p> + + <p>Pour obtenir un effet similaire, utilisez la propriété CSS <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a>.</p> + </dd> + <dt><strong id="attr-char"><code>char</code></strong> {{deprecated_inline}}</dt> + <dd>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs typiques de cet attribut incluent un point (.) lorsqu'on tente d'aligner des nombres ou des valeurs monétaires. Si <a href="#attr-align"><code>align</code></a> n'est pas défini sur <code>char</code>, cet attribut est ignoré.</dd> + <dt><strong id="attr-charoff"><code>charoff</code></strong> {{deprecated_inline}}</dt> + <dd>Cet attribut est utilisé pour indiquer le nombre de caractères pour décaler les données de la colonne par rapport aux caractères d'alignement spécifiés par l'attribut <code>char</code>.</dd> + <dt><strong id="attr-valign"><code>valign</code></strong> {{deprecated_inline}}</dt> + <dd>Cet attribut spécifie l'alignement vertical du texte dans chaque cellule de la colonne. Les valeurs possibles de cet attribut sont les suivantes : + <ul> + <li><code>baseline</code>, mettra le texte aussi près du bas de la cellule que possible, mais l'alignera sur la <a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">base</a> des caractères au lieu du bas de ceux-ci. Si les caractères sont tous de la même taille, cela a le même effet que <code>bottom</code> ;</li> + <li><code>bottom</code>, placera le texte aussi près du bas de la cellule que possible ;</li> + <li><code>middle</code>, permet de centrer le texte dans la cellule ;</li> + <li>and <code>top</code>, placera le texte aussi près du haut de la cellule que possible.</li> + </ul> + + <div class="notecard note"> + <p><b>Note :</b></p> + + <ul> + <li>N'essayez pas de définir la propriété <a href="/fr/docs/Web/CSS/vertical-align"><code>vertical-align</code></a> sur un sélecteur donnant un élément <code><col></code>. Comme les éléments <a href="/fr/docs/Web/HTML/Element/td"><code><td></code></a> ne sont pas des descendants de l'élément <code><col></code>, ils n'en hériteront pas.</li> + <li>Si le tableau n'utilise pas d'attribut <a href="/fr/docs/Web/HTML/Element/td#attr-colspan"><code>colspan</code></a>, utilisez le sélecteur CSS <code>td:nth-child(an+b)</code> où a est le nombre total de colonnes du tableau et b la position ordinale de la colonne dans le tableau. Ce n'est qu'après ce sélecteur que la propriété <code>vertical-align</code> peut être utilisée.</li> + <li>Si le tableau utilise bien un attribut <a href="/fr/docs/Web/HTML/Element/td#attr-colspan"><code>colspan</code></a>, l'effet peut être obtenu en combinant des sélecteurs d'attributs CSS adéquats comme <code>[colspan=n]</code>, bien que cela ne soit pas trivial.</li> + </ul> + </div> + </dd> + <dt><strong id="attr-width"><code>width</code></strong> {{deprecated_inline}}</dt> + <dd>Cet attribut spécifie une largeur par défaut pour chaque colonne du groupe de colonnes actuel. En plus des valeurs standard en pixels et en pourcentage, cet attribut peut prendre la forme spéciale <code>0*</code>, ce qui signifie que la largeur de chaque colonne du groupe doit être la largeur minimale nécessaire pour contenir le contenu de la colonne. Des largeurs relatives telles que <code>5*</code> peuvent également être utilisées.</dd> + </dl> + + <h2 id="examples">Exemples</h2> + + <p>Veuillez consulter la page <a href="/fr/docs/Web/HTML/Element/table"><code><table></code></a> pour des exemples sur <code><colgroup></code>.</p> + +<h2 id="specifications">Spécifications</h2> + +<p>{{Specifications}}</p> + +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat}}</p> + +<h2 id="see_also">Voir aussi</h2> + +<ul> + <li>Les propriétés et pseudo-classes CSS qui peuvent être spécialement utiles pour mettre en forme l'élément <code><col></code> : <ul> - <li>La propriété {{cssxref("width")}} pour contrôler la largeur de la colonne</li> - <li>La pseudo-classe {{cssxref(":nth-child")}} qui permet de définir l'alignement sur les cellules d'une colonne</li> - <li>La propriété {{cssxref("text-align")}} qui permet d'aligner le contenu de cellules sur le même caractère (le point « . » par exemple).</li> + <li>la propriété <a href="/fr/docs/Web/CSS/width"><code>width</code></a> pour contrôler la largeur de la colonne ;</li> + <li>la pseudo-classe <a href="/fr/docs/Web/CSS/:nth-child"><code>:nth-child</code></a> pour définir l'alignement des cellules de la colonne ;</li> + <li>la propriété <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a> pour aligner le contenu de toutes les cellules sur le même caractère, comme « . ».</li> </ul> </li> </ul> diff --git a/files/fr/web/html/element/colgroup/index.html b/files/fr/web/html/element/colgroup/index.html index 3de84d1f8c..2dd5a5eb2b 100644 --- a/files/fr/web/html/element/colgroup/index.html +++ b/files/fr/web/html/element/colgroup/index.html @@ -1,276 +1,149 @@ --- -title: <colgroup> +title: '<colgroup> : l''élément regroupant des colonnes' slug: Web/HTML/Element/colgroup tags: - Element - HTML + - HTML tabular data - Reference - - Tableau + - Tables - Web translation_of: Web/HTML/Element/colgroup +browser-compat: html.elements.colgroup --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><colgroup></code></strong> définit un groupe de colonnes au sein d'un tableau.</p> +<p class="summary">L'élément HTML <strong><code><colgroup></code></strong> définit un groupe de colonnes au sein d'un tableau.</p> <div>{{EmbedInteractiveExample("pages/tabbed/colgroup.html","tabbed-taller")}}</div> -<p 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> !</p> - -<h2 id="Attributs">Attributs</h2> - -<p>Comme pour tous les éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur cet élément.</p> - -<dl> - <dt>{{htmlattrdef("align")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> - <dd>Cet attribut à valeur contrainte définit l'alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont : - <ul> - <li><code>left</code> : le contenu de la cellule est alligné à gauche de la cellule</li> - <li><code>center</code> : le contenu de la cellule est centré horizontalement</li> - <li><code>right</code> : le contenu de la cellule est aligné à droite de la cellule</li> - <li><code>justify</code> : insère des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié</li> - <li><code>char</code> : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs {{htmlattrxref("char", "col")}} et {{htmlattrxref("charoff", "col")}} {{unimplemented_inline(2212)}}.</li> - </ul> - - <p>Si cet attribut n'est pas renseigné, la valeur <code>left</code> sera prise comme valeur par défaut. Les éléments {{HTMLElement("col")}} descendants peuvent surcharger cette valeur en utilisant leur attribut {{htmlattrxref("align", "col")}}.</p> - - <div class="note"><strong>Notes : </strong>Cet attribut est devenu obsolète et n'est plus supporté dans le dernier standard - - <ul> - <li>Pour réaliser les mêmes effets que les valeurs <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code> : - - <ul> - <li>Ne pas utiliser la propriété {{cssxref("text-align")}} sur un sélecteur renvoyant un élement {{HTMLElement("colgroup")}}. Les éléments {{HTMLElement("td")}} ne sont pas des descendants de l'élément {{HTMLElement("colgroup")}} il n'hériteront pas de cette propriété.</li> - <li>Si le tableau n'utilise pas l'attribut {{htmlattrxref("colspan", "td")}}, il est possible d'utiliser le sélecteur CSS <code>tr:nth-child(an+b)</code> avec a le nombre total de colonnes du tableau et b la position ordinale de la colonne. Une fois que ce selecteur a été utilisé, la propriété {{cssxref("text-align")}} peut être utilisée.</li> - <li>Si le tableau utilise l'attribut {{htmlattrxref("colspan", "td")}}, l'effet peut être réalisé en combinant différents sélecteurs CSS comme <code>[colspan=n]</code>. Cependant cela n'est pas trivial à réaliser.</li> - </ul> - </li> - <li>Pour réaliser le même effet qu'avec la valeur <code>char</code>. Il est possible, en CSS3, d'utiliser la valeur de l'attribut {{htmlattrxref("char", "colgroup")}} comme valeur de la propriété {{cssxref("text-align")}}. {{unimplemented_inline}}.</li> - </ul> - </div> - </dd> -</dl> - -<dl> - <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> - <dd>Cet attribut définit la couleur d'arrière-plan de toutes les cellules des colonnes appartenant au groupe de colonnes. C'est un code à 6 chiffres hexadécimaux tel que défini par le <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>, précédé d'un '#'. Un de ces seize mots-clés, comme présentés ci-dessous, peut être utilisé. - <table> +<table class="properties"> <tbody> - <tr> - <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>black</code> = "#000000"</td> - <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>green</code> = "#008000"</td> - </tr> - <tr> - <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>silver</code> = "#C0C0C0"</td> - <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>lime</code> = "#00FF00"</td> - </tr> - <tr> - <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>gray</code> = "#808080"</td> - <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>olive</code> = "#808000"</td> - </tr> - <tr> - <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>white</code> = "#FFFFFF"</td> - <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>yellow</code> = "#FFFF00"</td> - </tr> - <tr> - <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>maroon</code> = "#800000"</td> - <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>navy</code> = "#000080"</td> - </tr> - <tr> - <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>red</code> = "#FF0000"</td> - <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>blue</code> = "#0000FF"</td> - </tr> - <tr> - <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>purple</code> = "#800080"</td> - <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>teal</code> = "#008080"</td> - </tr> - <tr> - <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>fuchsia</code> = "#FF00FF"</td> - <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>aqua</code> = "#00FFFF"</td> - </tr> + <tr> + <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th> + <td>Aucune.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Si l'attribut <a href="#attr-span"><code>span</code></a> est présent : aucun car c'est un élément vide.<br> + Si l'attribut n'est pas présent, zéro ou plusieurs éléments <a href="/fr/docs/Web/HTML/Element/col"><code><col></code></a>.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>La balise de début peut être absente si le premier élément fils est <a href="/fr/docs/Web/HTML/Element/col"><code><col></code></a> et que celui-ci n'est pas précédé par un élément <a href="/fr/docs/Web/HTML/Element/colgroup"><code><colgroup></code></a> dont la balise de fin est absente. La balise de fin peut être absente s'il n'est pas suivi par un blanc ou par un commentaire.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Un élément <a href="/fr/docs/Web/HTML/Element/table"><code><table></code></a>. <a href="/fr/docs/Web/HTML/Element/colgroup"><code><colgroup></code></a> doit apparaître après tout élément <a href="/fr/docs/Web/HTML/Element/caption"><code><caption></code></a> optionnel et avant tout élément <a href="/fr/docs/Web/HTML/Element/thead"><code><thead></code></a>, <a href="/fr/docs/Web/HTML/Element/th"><code><th></code></a>, <a href="/fr/docs/Web/HTML/Element/tbody"><code><tbody></code></a>, <a href="/fr/docs/Web/HTML/Element/tfoot"><code><tfoot></code></a> et <a href="/fr/docs/Web/HTML/Element/tr"><code><tr></code></a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><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>Aucun rôle autorisé.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLTableColElement"><code>HTMLTableColElement</code></a></td> + </tr> </tbody> </table> - <div class="note"><strong>Note d'utilisation : </strong>Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémenté que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("colgroup")}} doit être mis en forme grâce au <a href="/fr/docs/Web/CSS">CSS</a>. Pour fournir un effet semblable à celui réalisé par l'attribut <code><strong>bgcolor</strong></code>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments {{HTMLElement("td")}} souhaités.</div> - </dd> - <dt>{{htmlattrdef("char")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> - <dd>Cet attribut spécifie l'alignement du contenu d'un groupe de colonnes en fonction d'un caractère.<br> - Les valeurs généralement utilisées pour cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "col")}} ne vaut pas <code>char</code>, l'attribut est ignoré. Cet attribut peut être surchargé avec l'attribut {{htmlattrxref("align", "col")}} de chacun des éléments {{HTMLElement("col")}} appartenant au groupe de colonnes.</dd> - <dd> - <div class="note"><strong>Note d'utilisation : </strong>Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "colgroup")}}, on pourra utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</div> - </dd> - <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> - <dd>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut<strong> char</strong> à appliquer au contenu des cellules. - <div class="note"><strong>Note d'utilisation: </strong>Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</div> - </dd> -</dl> +<h2 id="attributes">Attributs</h2> -<dl> - <dt>{{htmlattrdef("span")}}</dt> - <dd>La valeur de cet attribut est un entier positif indiquant le nombre de colonnes consécutives sur lesquelles appliquer les attributs de l'élément. S'il est absent, sa valeur par défaut est 1. - <div class="note"><strong>Note : </strong>Cet attribut s'applique aux attributs des colonnes du groupe. Il n'a pas d'effet sur les différentes règles CSS associées au groupe ou aux cellules des colonnes de ce groupe.. L'attribut <code>span</code>n'est pas autorisé s'il y a un ou plusieurs éléments <code><col></code> au sein de <code><colgroup></code>.</div> - </dd> -</dl> +<p>Comme pour tous les éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a> sur cet élément.</p> <dl> - <dt>{{htmlattrdef("valign")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt> - <dd>Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont : - <ul> - <li><code>baseline</code> : qui alignera le texte à la ligne la plus basse possible en utilisant la <a class="external" href="https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code>.</li> - <li><code>bottom</code> : qui placera le texte au plus bas de la cellule</li> - <li><code>middle</code> : qui centrera verticalement le texte dans la cellule</li> - <li><code>top</code> : qui placera le texte au plus haut de la cellule.</li> - </ul> - - <div class="note"><strong>Notes d'utilisation : </strong>Cet attribut étant maintenant obsolète (et n'étant plus supporté), il est fortement déconseillé de l'utiliser. - - <ul> - <li>Il ne faut pas essayer de régler la propriété {{cssxref("vertical-align")}} sur un sélecteur retournant un élément {{HTMLElement("colgroup")}}. En effet les éléments {{HTMLElement("td")}} n'étant pas des descendants de l'élément {{HTMLElement("colgroup")}} ils n'hériteront pas de la propriété.</li> - <li>Si le tableau n'utilise pas d'attribut {{htmlattrxref("colspan", "td")}} il est possible d'utiliser le sélecteur CSS <code>tr:nth-child(an+b)</code> avec a le nombre de colonne du tableau et b la position ordinale de la colonne dans le tableau puis d'utiliser la propriété {{cssxref("vertical-align")}} sur le sélecteur.</li> - <li>Si le tableau n'utilise pas l'attribut {{htmlattrxref("colspan", "td")}} l'effet peut être obtenu avec une combinaison de différents sélecteurs CSS comme <code>[colspan=n]</code>. Cependant cela n'est pas trivial à réaliser.</li> - </ul> - </div> - </dd> -</dl> + <dt><strong id="attr-span"><code>span</code></strong></dt> + <dd>Cet attribut contient un nombre entier positif indiquant le nombre de colonnes consécutives que l'élément <code><colgroup></code> couvre. S'il n'est pas présent, sa valeur par défaut est <code>1</code>. + <div class="notecard note"> + <p><strong>Note:</strong></p> + <p>Cet attribut est appliqué sur les attributs du groupe de colonnes, il n'a aucun effet sur les règles de style CSS qui lui sont associées ni, a fortiori, sur les cellules des membres du groupe de la colonne.</p> + <ul> + <li>L'attribut <code>span</code> n'est pas autorisé s'il y a un ou plusieurs éléments <code><col></code> dans le <code><colgroup></code>.</li> + </ul> + </div> + </dd> + </dl> + +<h3 id="deprecated_attributes">Attributs dépréciés</h3> + +<p>Les attributs suivants sont dépréciés et ne doivent pas être utilisés. Ils sont documentés ci-dessous à titre de référence lors de la mise à jour du code existant et uniquement pour des raisons historiques.</p> <dl> - <dt>{{htmlattrdef("width")}} {{obsolete_inline("html5")}}</dt> - <dd>Cet attribut définit la largeur par défaut pour chaque colonne dans le groupe de colonnes. En plus de la notation standard en pixels et en pourcents, cet attribut peut prendre la valeur spéciale<code> 0*</code>, indiquant ainsi que la largeur de chaque colonne doit être suffisante pour contenir les contenus des cellules. On peut également utiliser cette notation de manière relative (par exemple <code>0.5*</code>).</dd> + <dt><strong id="attr-align"><code>align</code></strong> {{deprecated_inline}}</dt> + <dd>Cet attribut de type énumératif indique comment l'alignement horizontal du contenu des cellules de chaque colonne sera traité. Les valeurs possibles sont : + <ul> + <li><code>left</code>, aligner le contenu à gauche de la cellule</li> + <li><code>center</code>, centrer le contenu dans la cellule</li> + <li><code>right</code>, aligner le contenu à droite de la cellule</li> + <li><code>justify</code>, insérer des espaces dans le contenu textuel afin que le contenu soit justifié dans la cellule</li> + <li><code>char</code>, aligner le contenu textuel sur un caractère spécial avec un décalage minimal, défini par les attributs <a href="/fr/docs/Web/HTML/Element/col#attr-char"><code>char</code></a> et <a href="/fr/docs/Web/HTML/Element/col#attr-charoff"><code>charoff</code></a>.</li> + </ul> + + <p>Si cet attribut n'est pas défini, la valeur <code>left</code> est adoptée. Les éléments <a href="/fr/docs/Web/HTML/Element/col"><code><col></code></a> descendants peuvent remplacer cette valeur en utilisant leur propre attribut <a href="/fr/docs/Web/HTML/Element/col#attr-align"><code>align</code></a>.</p> + + <div class="notecard note"> + <p><b>Note :</b></p> + <ul> + <li>N'essayez pas de définir la propriété <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a> sur un sélecteur donnant un élément <a href="/fr/docs/Web/HTML/Element/colgroup"><code><colgroup></code></a>. Comme les éléments <a href="/fr/docs/Web/HTML/Element/td"><code><td></code></a> ne sont pas des descendants de l'élément <a href="/fr/docs/Web/HTML/Element/colgroup"><code><colgroup></code></a>, ils n'en hériteront pas.</li> + <li>Si le tableau n'utilise pas d'attribut <a href="/fr/docs/Web/HTML/Element/td#attr-colspan">code>colspan</code></a>, utilisez un <code>td:nth-child(an+b)</code> sélecteur CSS par colonne, où a est le nombre total de colonnes du tableau et b est la position ordinale de cette colonne dans le tableau. Ce n'est qu'après ce sélecteur que la propriété <code>text-align</code> peut être utilisée.</li> + <li>Si le tableau utilise bien un attribut <a href="/fr/docs/Web/HTML/Element/td#attr-colspan"><code>colspan</code></a>, l'effet peut être obtenu en combinant des sélecteurs d'attributs CSS adéquats comme <code>[colspan=n]</code>, bien que cela ne soit pas trivial.</li> + </ul> + </div> + </dd> + <dt><strong id="attr-bgcolor"><code>bgcolor</code></strong> {{deprecated_inline}}</dt> + <dd> + <p>La couleur de fond du tableau. Il s'agit d'un <a href="/fr/docs/Web/CSS/color_value#rgb_colors">code RVB hexadécimal à 6 chiffres</a>, préfixé par un « <code>#</code> ». L'un des <a href="/fr/docs/Web/CSS/color_value#color_keywords">mots-clés de couleur</a> prédéfinis peut également être utilisé.</p> + + <p>Pour obtenir un effet similaire, utilisez la propriété CSS <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a>.</p> + </dd> + <dt><strong id="attr-char"><code>char</code></strong> {{deprecated_inline}}</dt> + <dd>Cet attribut spécifie l'alignement du contenu d'un groupe de colonnes sur un caractère. Les valeurs typiques de cet attribut comprennent un point (.) lorsqu'on tente d'aligner des chiffres ou des valeurs monétaires. Si <a href="#attr-align"><code>align</code></a> n'est pas défini sur <code>char</code>, cet attribut est ignoré, bien qu'il sera toujours utilisé comme valeur par défaut pour le <a href="/fr/docs/Web/HTML/Element/col#attr-align"><code>align</code></a> du <a href="/fr/docs/Web/HTML/Element/col"><code><col></code></a> qui sont membres de ce groupe de colonnes.</dd> + <dt><strong id="attr-charoff"><code>charoff</code></strong> {{deprecated_inline}}</dt> + <dd>Cet attribut est utilisé pour indiquer le nombre de caractères pour décaler les données de la colonne par rapport au caractère d'alignement spécifié par l'attribut <code>char</code>.</dd> + <dt><strong id="attr-valign"><code>valign</code></strong> {{deprecated_inline}}</dt> + <dd>Cet attribut spécifie l'alignement vertical du texte dans chaque cellule de la colonne. Les valeurs possibles de cet attribut sont les suivantes : + <ul> + <li><code>baseline</code>, mettra le texte aussi près du bas de la cellule que possible, mais l'alignera sur la <a href="https://fr.wikipedia.org/wiki/Ligne_de_base_(typographie)">ligne de base</a> des caractères au lieu du bas de ceux-ci. Si les caractères sont tous de la même taille, cela a le même effet que <code>bottom</code> ;</li> + <li><code>bottom</code>, placera le texte aussi près du bas de la cellule que possible ;</li> + <li><code>middle</code>, permet de centrer le texte dans la cellule ;</li> + <li>and <code>top</code>, placera le texte aussi près du haut de la cellule que possible.</li> + </ul> + + <div class="notecard note"> + <p><b>Note :</b></p> + <ul> + <li>N'essayez pas de définir la propriété <a href="/fr/docs/Web/CSS/vertical-align"><code>vertical-align</code></a> sur un sélecteur donnant un élément <code><col></code>. Comme les éléments <a href="/fr/docs/Web/HTML/Element/td"><code><td></code></a> ne sont pas des descendants de l'élément <code><col></code>, ils n'en hériteront pas.</li> + <li>Si le tableau n'utilise pas d'attribut <a href="/fr/docs/Web/HTML/Element/td#attr-colspan"><code>colspan</code></a>, utilisez le sélecteur CSS <code>td:nth-child(an+b)</code> où a est le nombre total de colonnes du tableau et b la position ordinale de la colonne dans le tableau. Ce n'est qu'après ce sélecteur que la propriété <code>vertical-align</code> peut être utilisée.</li> + <li>Si le tableau utilise bien un attribut <a href="/fr/docs/Web/HTML/Element/td#attr-colspan"><code>colspan</code></a>, l'effet peut être obtenu en combinant des sélecteurs d'attributs CSS adéquats comme <code>[colspan=n]</code>, bien que cela ne soit pas trivial.</li> + </ul> + </div> + </dd> </dl> -<h2 id="Exemples">Exemples</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><table> - <colgroup> - <col class="premiereColonne"> - <col class="deuxDernieresColonnes" span="2"> - </colgroup> - <tr> - <th>Citron vert</th> - <th>Citron</th> - <th>Orange</th> - </tr> - <tr> - <td>Vert</td> - <td>Jaune</td> - <td>Orange</td> - </tr> -</table></pre> - -<h3 id="Résultat">Résultat</h3> +<h2 id="examples">Exemples</h2> -<p>{{EmbedLiveSample("Exemples","200","100")}}</p> +<p>Veuillez consulter la page <a href="/fr/docs/Web/HTML/Element/table"><code><table></code></a> pour des exemples sur <code><colgroup></code>.</p> -<div class="note"> -<p><strong>Note :</strong> On pourra consulter la page {{HTMLElement("table")}} pour d'autres exemples sur les tableaux.</p> -</div> -<h2 id="Résumé_technique">Résumé technique</h2> +<h2 id="specifications">Spécifications</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>Aucune.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td>Si l'attribut {{htmlattrxref("span", "colgroup")}} est présent : aucun car c'est un élément vide.<br> - Si l'attribut n'est pas présent, zéro ou plusieurs éléments {{HTMLElement("col")}}.</td> - </tr> - <tr> - <th scope="row">Omission de balises</th> - <td>La balise de début peut être absente si le premier élément fils {{HTMLElement("col")}} et que celui-ci n'est pas précédé par un élément {{HTMLElement("colgroup")}} dont la balise de fin est absente. La balise de fin peut être absente s'il n'est pas suivi par un blanc ou par un commentaire.</td> - </tr> - <tr> - <th scope="row">Éléments parents autorisés</th> - <td>Un élément {{HTMLElement("table")}}. {{HTMLElement("colgroup")}} doit apparaître après tout élément {{HTMLElement("caption")}} optionnel et avant tout élément {{HTMLElement("thead")}}, {{HTMLElement("th")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}} et {{HTMLElement("tr")}}.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Aucun.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLTableColElement")}}</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('HTML WHATWG', 'tables.html#the-colgroup-element', '<colgroup>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'tabular-data.html#the-colgroup-element', '<colgroup>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'tables.html#edef-COLGROUP', '<colgroup>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td> </td> - </tr> - </tbody> -</table> +<p>{{Specifications}}</p> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> +<p>{{Compat}}</p> -<p>{{Compat("html.elements.colgroup")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>Les autres éléments HTML liés aux tableaux : - <ul> - <li>{{HTMLElement("caption")}}</li> - <li>{{HTMLElement("col")}}</li> - <li>{{HTMLElement("table")}}</li> - <li>{{HTMLElement("tbody")}}</li> - <li>{{HTMLElement("td")}}</li> - <li>{{HTMLElement("tfoot")}}</li> - <li>{{HTMLElement("th")}}</li> - <li>{{HTMLElement("thead")}}</li> - <li>{{HTMLElement("tr")}}</li> - </ul> - </li> - <li>Les propriétés et pseudo-classes CSS qui peuvent s'avérer utiles pour mettre en forme l'élément <code><col></code> : - <ul> - <li>la propriété {{cssxref("width")}} pour contrôler la largeur de la colonne</li> - <li>la pseudo-classe {{cssxref(":nth-child")}} pour définir l'alignement des cellules d'une colonne</li> - <li>la propriété {{cssxref("text-align")}} pour aligner le contenu de cellules sur le même caractère (par exemple un point « . »).</li> - </ul> - </li> + <li>Les propriétés et pseudo-classes CSS notamment utiles pour mettre en forme l'élément <code><col></code> : + <ul> + <li>la propriété <a href="/fr/docs/Web/CSS/width"><code>width</code></a> pour contrôler la largeur de la colonne ;</li> + <li>la pseudo-classe <a href="/fr/docs/Web/CSS/:nth-child"><code>:nth-child</code></a> pour définir l'alignement des cellules de la colonne ;</li> + <li>la propriété <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a> pour aligner le contenu de toutes les cellules sur le même caractère, comme « . ».</li> + </ul> + </li> </ul> diff --git a/files/fr/web/html/element/content/index.html b/files/fr/web/html/element/content/index.html index e3c3c4b46f..4997c16527 100644 --- a/files/fr/web/html/element/content/index.html +++ b/files/fr/web/html/element/content/index.html @@ -1,39 +1,76 @@ --- -title: <content> +title: '<content> : l''élément Shadow DOM d''emplacement du contenu' slug: Web/HTML/Element/content tags: - - Déprécié + - Content + - DOM + - Deprecated - Element - HTML + - HTML Web Components + - Placeholder - Reference - Web + - Web Components + - shadow dom translation_of: Web/HTML/Element/content +browser-compat: html.elements.content --- -<div>{{Deprecated_header}}{{HTMLRef}}</div> +<div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><content></code></strong> était utilisé au sein d'un <em><a href="/fr/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a></em> comme point d'insertion. Cet élément est désormais obsolète et n'était pas conçu pour être utilisé dans un document HTML simple mais pour être employé dans <a href="/fr/docs/Web/Web_Components">des composants web</a>. Il est désormais remplacé par l'élément <code><strong><slot></strong></code> qui permet de créer un point d'insertion pour un <em>shadow DOM</em> au sein du DOM.</p> - -<div class="note"> -<p><strong>Note : </strong>Bien que cet élément soit présent dans les premiers brouillons ded la spécification et implémenté dans plusieurs navigateurs, il a été retiré des dernières versions de la spécification et ne doit pas être utilisé. Cet élément est documenté afin d'aider à la migration.</p> +<div class="notecard deprecated"> + <p><strong>Déprécié</strong></p> + <p>Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.</p> </div> -<h2 id="Attributes">Attributes</h2> +<p class="summary">L'élément HTML <strong><code><content></code></strong> — une partie obsolète de la suite de technologies <a href="/fr/docs/Web/Web_Components">Web Components</a> — était utilisé à l'intérieur de <a href="/fr/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> comme un point d'insertion, et n'était pas destiné à être utilisé dans du HTML ordinaire. Il a maintenant été remplacé par l'élément <a href="/fr/docs/Web/HTML/Element/slot"><code><slot></code></a>, qui crée un point dans le DOM où un Shadow DOM peut être inséré.</p> -<p>Comme pour tous les éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur <code><content></code>.</p> +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Bien que présent dans les premières versions des spécifications et mis en œuvre dans plusieurs navigateurs, cet élément a été supprimé dans les versions ultérieures de la spécification, et ne doit pas être utilisé. Il est documenté ici pour aider à adapter le code écrit à l'époque où il était inclus dans la spécification afin qu'il fonctionne avec les versions plus récentes de la spécification.</p> +</div> + +<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#transparent_content_model">Contenu transparent</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</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 du contenu de flux.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLContentElement"><code>HTMLContentElement</code></a></td> + </tr> + </tbody> + </table> + +<h2 id="attributes">Attributs</h2> + +<p>Comme pour tous les éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a> sur <code><content></code>.</p> <dl> - <dt><code>select</code></dt> - <dd>Une liste de sélecteurs séparés par des virgules. La syntaxe utilisée est la même que celle utilisée pour les sélecteurs CSS. Ils permettent de sélectionner le contenu à insérer à la place de l'élément <code><content></code>.</dd> + <dt><code id="attr-select">select</code></dt> + <dd>Une liste de sélecteurs séparés par des virgules. La syntaxe utilisée est la même que celle utilisée pour les sélecteurs CSS. Ils permettent de sélectionner le contenu à insérer à la place de l'élément <code><content></code>.</dd> </dl> -<h2 id="Exemples">Exemples</h2> +<h2 id="example">Exemple</h2> <p>Voici un exemple simple d'utilisation de l'élément <code><content></code>. Il s'agit d'un fichier HTML It is an HTML file with everything needed in it.</p> -<h3 id="HTML">HTML</h3> - -<div class="note"> -<p><strong>Note :</strong> Pour que ce code fonctionne, le navigateur utilisé doit prendre en charge les composants web (voir par exemple <a href="/fr/docs/Web/Web_Components#Activer_les_Web_Components_dans_Firefox">l'activation des composants web dans Firefox</a>).</p> +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Pour que ce code fonctionne, le navigateur utilisé doit prendre en charge les composants web (voir par exemple <a href="/fr/docs/Web/Web_Components#enabling_web_components_in_firefox">l'activation des composants web dans Firefox</a>).</p> </div> <pre class="brush: html"><html> @@ -60,57 +97,21 @@ translation_of: Web/HTML/Element/content </html> </pre> -<h3 id="Résultat">Résultat</h3> +<p>Si vous l'affichez dans un navigateur web, il devrait ressembler à ce qui suit.</p> -<p>{{EmbedLiveSample("Exemples","200","130")}}</p> +<p><img alt="Contenu de l'exemple" src="content-example.png"></p> -<h3 id="Capture">Capture</h3> - -<p><img alt="Contenu de l'exemple" src="https://mdn.mozillademos.org/files/10325/Capture.JPG" style="height: 193px; width: 464px;"></p> - -<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" title="HTML/Content_categories">Catégories de contenu</a></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Modèle_de_contenu_transparent" title="HTML/Content_categories#Transparent_content_model">Contenu transparent</a>.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</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 contenu de flux.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLContentElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Spécifications">Spécifications</h2> +<h2 id="specifications">Spécifications</h2> <p>Ce document ne fait plus partie d'aucune spécification.</p> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<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.content")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li> - <li>{{HTMLElement("shadow")}}</li> - <li>{{HTMLElement("template")}}</li> - <li>{{HTMLElement("slot")}}</li> - <li>{{HTMLElement("element")}}</li> -</ul> + <li><a href="/fr/docs/Web/Web_Components">Web Components</a></li> + <li>Les éléments <a href="/fr/docs/Web/HTML/Element/Shadow"><code><shadow></code></a>, <a href="/fr/docs/Web/HTML/Element/slot"><code><slot></code></a>, <a href="/fr/docs/Web/HTML/Element/template"><code><template></code></a></li> + </ul> diff --git a/files/fr/web/html/element/data/index.html b/files/fr/web/html/element/data/index.html index 83c25b0833..921d4205ff 100644 --- a/files/fr/web/html/element/data/index.html +++ b/files/fr/web/html/element/data/index.html @@ -1,37 +1,68 @@ --- -title: <data> +title: "<data> : l'élément de données" slug: Web/HTML/Element/data tags: - Element - HTML + - HTML text-level semantics - Reference - Web translation_of: Web/HTML/Element/data +browser-compat: html.elements.data --- <div>{{HTMLRef}}</div> -<p>L'élément <strong>HTML <code><data></code> </strong>relie un contenu à une version de ce contenu interprétable par un ordinateur. Si le contenu possède une composante temporelle, l'élément {{HTMLElement("time")}} doit être utiisé.</p> +<p>L'élément HTML <strong><code><data></code></strong> relie un contenu à une version de ce contenu interprétable par un ordinateur. Si le contenu possède une composante temporelle, l'élément <a href="/fr/docs/Web/HTML/Element/time"><code><time></code></a> doit être utilisé.</p> <div>{{EmbedInteractiveExample("pages/tabbed/data.html", "tabbed-shorter")}}</div> -<p 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> !</p> +<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 de 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#palpable_content">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><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">Éléments parents autorisés</th> + <td>Tout élément acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><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>Tous les rôles.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLDataElement"><code>HTMLDataElement</code></a></td> + </tr> + </tbody> +</table> -<h2 id="Attributs">Attributs</h2> +<h2 id="attributes">Attributs</h2> -<p>Comme pour tous les autres éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur <code><data></code>.</p> +<p>Comme pour tous les autres éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a> sur <code><data></code>.</p> <dl> - <dt>{{htmlattrdef("value")}}</dt> - <dd>Cet attribut définit la version du contenu qui doit être interprétée par une machine.</dd> + <dt><code id="attr-value">value</code></dt> + <dd>Cet attribut définit la version du contenu qui doit être interprétée par une machine.</dd> </dl> -<h2 id="Exemples">Exemples</h2> +<h2 id="examples">Exemples</h2> <p>Dans l'exemple suivant, on affiche des noms de produits avec des codes correspondants :</p> -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><p>Nouveaux produits</p> +<pre class="brush: html"><p>Nouveaux produits</p> <ul> <li><data value="3251546">Mini voiture</data></li> <li><data value="5867654">Grande voiture</data></li> @@ -39,69 +70,16 @@ translation_of: Web/HTML/Element/data </ul> </pre> -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples","200","180")}}</p> - -<h2 id="Résumé_technique">Résumé technique</h2> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></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égorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Contenu autorisé</dfn></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Omission de balises</dfn></th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row"><dfn>Parents autorisés</dfn></th> - <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Interface DOM</dfn></th> - <td>{{domxref("HTMLDataElement")}}</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('HTML WHATWG', 'semantics.html#the-data-element', '<data>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Pas de changement depuis {{Spec2('HTML5 W3C')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'textlevel-semantics.html#the-data-element', '<data>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +<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.data")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>L'élément {{HTMLElement("time")}}.</li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/time"><code><time></code></a>.</li> </ul> diff --git a/files/fr/web/html/element/datalist/index.html b/files/fr/web/html/element/datalist/index.html index 732a5ad5ed..831b1f5372 100644 --- a/files/fr/web/html/element/datalist/index.html +++ b/files/fr/web/html/element/datalist/index.html @@ -1,28 +1,62 @@ --- -title: <datalist> +title: '<datalist> : l''élément de liste des données' slug: Web/HTML/Element/datalist tags: - Element - - Formulaires - HTML + - HTML forms + - HTML5 - Reference - Web - - polyfill translation_of: Web/HTML/Element/datalist +browser-compat: html.elements.datalist --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><datalist></code></strong> contient un ensemble d'éléments {{HTMLElement("option")}} qui représentent les valeurs possibles pour d'autres contrôles.</p> +<p class="summary">L'élément HTML <strong><code><datalist></code></strong> contient un ensemble d'éléments <a href="/fr/docs/Web/HTML/Element/Option"><code><option></code></a> qui représentent les valeurs possibles pour d'autres contrôles.</p> <div>{{EmbedInteractiveExample("pages/tabbed/datalist.html", "tabbed-standard")}}</div> -<h2 id="Attributs">Attributs</h2> +<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 de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Soit <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">du contenu phrasé</a> ou zéro ou plusieurs éléments <a href="/fr/docs/Web/HTML/Element/Option"><code><option></code></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>N'importe quel élément qui accepte <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">du contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><a href="/fr/docs/Web/Accessibility/ARIA/Roles/listbox_role"><code>listbox</code></a></td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLDataListElement"><code>HTMLDataListElement</code></a></td> + </tr> + </tbody> +</table> + +<h2 id="attributes">Attributs</h2> -<p>Cet élément ne possède que <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>, communs à tous les éléments.</p> +<p>Cet élément ne possède que <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>, communs à tous les éléments.</p> -<h2 id="Exemples">Exemples</h2> +<h2 id="examples">Exemples</h2> -<h3 id="HTML">HTML</h3> +<h3 id="basic_datalist">HTML</h3> <pre class="brush: html"><label for="monNavigateur">Veuillez choisir un navigateur parmi ceux-ci :</label> <input list="navigateurs" id="monNavigateur" name="monNavigateur"/> @@ -32,83 +66,24 @@ translation_of: Web/HTML/Element/datalist <option value="Internet Explorer"> <option value="Opera"> <option value="Safari"> -</datalist> -</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples","200","200")}}</p> - -<h2 id="Résumé_technique">Résumé technique</h2> + <option value="Microsoft Edge"> +</datalist></pre> -<p 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> !</p> - -<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égorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td>Soit <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">du contenu phrasé</a> ou zéro ou plus d'éléments {{HTMLElement("option")}}.</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>N'importe quel élément qui accepte <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">du contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Aucun.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLDataListElement")}}</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('HTML WHATWG', 'forms.html#the-datalist-element', '<datalist>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#the-datalist-element', '<datalist>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> +<h4 id="result">Résultat</h4> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<p>{{EmbedLiveSample("examples", "", 100)}}</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="specifications">Spécifications</h2> -<p>{{Compat("html.elements.datalist")}}</p> +<p>{{Specifications}}</p> -<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<p>Il est possible d'utiliser <a href="https://github.com/mfranzke/datalist-polyfill">cette bibliothèque</a> pour émuler la fonctionnalité dans les anciens navigateurs.</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>{{HTMLElement("input")}} et plus précisément son attribut {{htmlattrxref("list", "input")}}.</li> - <li>{{HTMLElement("option")}}.</li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> et plus précisément son attribut <a href="/fr/docs/Web/HTML/Element/Input#attr-list"><code>list</code></a>.</li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/Option"><code><option></code></a>.</li> </ul> diff --git a/files/fr/web/html/element/dd/index.html b/files/fr/web/html/element/dd/index.html index 473103b350..bb76b3f403 100644 --- a/files/fr/web/html/element/dd/index.html +++ b/files/fr/web/html/element/dd/index.html @@ -2,116 +2,82 @@ title: '<dd> : l''élément de détail d''une description' slug: Web/HTML/Element/dd tags: + - Definition + - Description Details + - Description list - Element - HTML + - HTML grouping content - Reference - Web + - dd + - details translation_of: Web/HTML/Element/dd +browser-compat: html.elements.dd --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><dd></code></strong> (pour <em><strong>d</strong>efinition <strong>d</strong>escription</em>) indique la définition d'un terme au sein d'une liste de définitions (élément ({{HTMLElement("dl")}}). Cet élément ne peut apparaître qu'en tant qu'élément appartenant à une liste de définitions et doit être précédé d'un élément {{HTMLElement("dt")}}.</p> +<p class="summary">L'élément HTML <strong><code><dd></code></strong> fournit la description, la définition ou la valeur du terme précédent (<a href="/fr/docs/Web/HTML/Element/dt"><code><dt></code></a>) dans une liste de description (<a href="/fr/docs/Web/HTML/Element/dl"><code><dl></code></a>).</p> <div>{{EmbedInteractiveExample("pages/tabbed/dd.html","tabbed-standard")}}</div> -<p 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> !</p> +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th> + <td>Aucune.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Cet élément doit avoir une balise ouvrante. La balise de fin peut être omise s'il est immédiatement suivi par un autre élément <code><dd></code> ou un autre élément <code><dt></code> ou s'il n'y a plus d'autre contenu dans l'élément parent.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Au sein d'un élément <a href="/fr/docs/Web/HTML/Element/dl"><code><dl></code></a> après un élément <a href="/fr/docs/Web/HTML/Element/dt"><code><dt></code></a> ou après un élément <a href="/fr/docs/Web/HTML/Element/dd"><code><dd></code></a>. Sinon (selon le WHATWG), au sein d'un élément <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> situé dans un élément <a href="/fr/docs/Web/HTML/Element/dl"><code><dl></code></a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><a href="https://w3c.github.io/aria/#definition"><code>definition</code></a></td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td> + </tr> + </tbody> +</table> -<h2 id="Attributs">Attributs</h2> +<h2 id="attributes">Attributs</h2> -<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> <dl> - <dt>{{htmlattrdef("nowrap")}} {{Non-standard_inline}}</dt> - <dd>Si la valeur de cet attribut est <code>yes</code>, il n'y aura pas de retour à la ligne si le texte de la définition dépasse la taille de la ligne. La valeur par défaut est <code>no</code>.</dd> + <dt><code id="attr-nowrap">nowrap</code> {{non-standard_inline}}</dt> + <dd>Si la valeur de cet attribut est <code>yes</code>, il n'y aura pas de retour à la ligne si le texte de la définition dépasse la taille de la ligne. La valeur par défaut est <code>no</code>.</dd> </dl> -<h2 id="Exemples">Exemples</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><dl> - <dt>Dancing</dt> - <dd> - A series of movements involving two partners - where speed and rhythm match harmoniously with - music. - </dd> -</dl> -</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples","200","130")}}</p> +<h2 id="examples">Exemples</h2> -<h2 id="Résumé_technique">Résumé technique</h2> +<p>Pour des exemples, voir les <a href="/fr/docs/Web/HTML/Element/dl#examples">exemples fournis pour l'élément <code><dl></code></a>.</p> -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu" title="HTML/Content_categories">Catégories de contenu</a></th> - <td>Aucune.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content_categories#Flow_content">Contenu de flux</a>.</td> - </tr> - <tr> - <th scope="row">Omission de balises</th> - <td>Cet élément doit avoir une balise ouvrante. La balise de fin peut être omise s'il est immédiatement suivi par un autre élément <code><dd></code> ou un autre élément <code><dt></code> ou s'il n'y a plus d'autre contenu dans l'élément parent.</td> - </tr> - <tr> - <th scope="row">Parents autorisés</th> - <td>Au sein d'un élément {{HTMLElement("dl")}} après un élément {{HTMLElement("dt")}} ou après un élément {{HTMLElement("dd")}}. Sinon (selon le WHATWG), au sein d'un élément {{HTMLElement("div")}} situé dans un élément {{HTMLElement("dl")}}.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Aucun.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLElement")}}</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('HTML WHATWG', 'grouping-content.html#the-dd-element', '<dd>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dd-element', '<dd>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dd>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td></td> - </tr> - </tbody> -</table> +<h2 id="specifications">Spécifications</h2> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<p>{{Specifications}}</p> -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<p>{{Compat("html.elements.dd")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>{{HTMLELement("dl")}}</li> - <li>{{HTMLElement("dt")}}</li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/dl"><code><dl></code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/dt"><code><dt></code></a></li> </ul> diff --git a/files/fr/web/html/element/del/index.html b/files/fr/web/html/element/del/index.html index 94839d3584..dfb07d4fde 100644 --- a/files/fr/web/html/element/del/index.html +++ b/files/fr/web/html/element/del/index.html @@ -2,46 +2,79 @@ title: '<del> : l''élément de texte supprimé' slug: Web/HTML/Element/del tags: + - Deleted Text - Element - HTML + - HTML edits - Reference - Web + - del translation_of: Web/HTML/Element/del +browser-compat: html.elements.del --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><del></code> </strong>représente une portion de texte ayant été supprimée d'un document. Cet élément est souvent (mais pas nécessairement) affiché rayé.</p> - -<p>L'élément {{HTMLElement("ins")}} est quant à lui utilisé pour représenter des portions de texte ajoutées.</p> +<p class="summary">L'élément HTML <strong><code><del></code> </strong>représente une portion de texte ayant été supprimée d'un document. Cet élément est souvent (mais pas nécessairement) affiché rayé. L'élément <a href="/fr/docs/Web/HTML/Element/ins"><code><ins></code></a> est quant à lui utilisé pour représenter des portions de texte ajoutées.</p> <div>{{EmbedInteractiveExample("pages/tabbed/del.html", "tabbed-standard")}}</div> -<p 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> !</p> +<p>Cet élément est souvent (mais pas nécessairement) rendu en appliquant un style barré au texte.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</ahttp></th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_phras.c3.a9">Contenu phrasé</a> ou <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#transparent_content_model">Transparent</a>.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Aucune balise manquante n'est autorisée.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Tout élément qui accepte du <a href="/fr/docs/Web/Guide/HTML/Content_categories#cphrasing_content">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><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>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLModElement"><code>HTMLModElement</code></a></td> + </tr> + </tbody> +</table> -<h2 id="Attributs">Attributs</h2> +<h2 id="attributes">Attributs</h2> -<p>Comme pour tous les autres éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur <code><del></code>.</p> +<p>Comme pour tous les autres éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a> sur <code><del></code>.</p> <dl> - <dt>{{htmlattrdef("cite")}}</dt> - <dd>Une URL pour une ressource expliquant le changement (cela peut être un procès verbal d'une réunion par exemple).</dd> - <dt>{{htmlattrdef("datetime")}}</dt> - <dd>Cet attribut indique l'heure et la date du changement et doit être une date valide avec une heure facultative. Si la valeur ne peut pas être analysée comme telle, l'élément n'aura pas d'information temporelle associée. Voir <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">l'article sur les formats</a> pour la représentation d'<a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates">une date seule</a> ou d'<a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates_et_heures_locales">une date avec une heure</a>.</dd> + <dt><code id="attr-cite">cite</code></dt> + <dd>Une URL pour une ressource expliquant le changement (cela peut être un procès verbal d'une réunion par exemple).</dd> + <dt><code id="attr-datetime">datetime</code></dt> + <dd>Cet attribut indique l'heure et la date du changement et doit être une date valide avec une heure facultative. Si la valeur ne peut pas être analysée comme telle, l'élément n'aura pas d'information temporelle associée. Voir <a href="/fr/docs/Web/HTML/Date_and_time_formats">l'article sur les formats</a> pour la représentation d'<a href="/fr/docs/Web/HTML/Date_and_time_formats#date_strings">une date seule</a> ou d'<a href="/fr/docs/Web/HTML/Date_and_time_formats#local_date_and_time_strings">une date avec une heure</a>.</dd> </dl> -<h2 id="Exemples">Exemples</h2> - -<h3 id="HTML">HTML</h3> +<h2 id="examples">Exemples</h2> <pre class="brush: html"><p><del>Ce texte a été supprimé.</del> mais pas celui-ci</p></pre> -<h3 id="Résultat">Résultat</h3> +<h3 id="result">Résultat</h3> -<p>{{EmbedLiveSample("Exemples","200","100")}}</p> +<p>{{EmbedLiveSample("examples", "", 100)}}</p> -<h2 id="Accessibilité">Accessibilité</h2> +<h2 id="accessibility_concerns">Accessibilité</h2> -<p>Par défaut, la plupart des outils d'assistance n'annoncent pas la présence de l'élément <code>del</code>. On peut le rendre annonçable via la propriété CSS {{cssxref("content")}} et grâce aux pseudo-éléments {{cssxref("::before")}} et {{cssxref("::after")}}.</p> +<p>Par défaut, la plupart des outils d'assistance n'annoncent pas la présence de l'élément <code>del</code>. On peut le rendre annonçable via la propriété CSS <a href="/fr/docs/Web/CSS/content"><code>content</code></a> et grâce aux pseudo-éléments <a href="/fr/docs/Web/CSS/::before"><code>::before</code></a> et <a href="/fr/docs/Web/CSS/::after"><code>::after</code></a>.</p> <pre>del::before, del::after { @@ -60,85 +93,26 @@ del::before { del::after { content: " [Fin de la suppression] "; -} -</pre> +}</pre> <p>Certaines personnes qui utilisent des lecteurs d'écran désactivent sciemment ces annonces pour éviter une verbosité trop importante. Il est donc important de ne pas abuser de cette technique et de ne l'appliquer qu'à des situations où il est nécessaire de comprendre que du contenu a été supprimé.</p> <ul> - <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/"><em>Short note on making your mark (more accessible) | The Paciello Group</em> (en anglais)</a></li> - <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html"><em>Tweaking Text Level Styles | Adrian Roselli</em> (en anglais)</a></li> + <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">Short note on making your mark (more accessible) | The Paciello Group</a> <small>(en anglais)</small></li> + <li><a href="https://adrianroselli.com/2017/12/tweaking-text-level-styles.html">Tweaking Text Level Styles | Adrian Roselli</a> <small>(en anglais)</small></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_phras.C3.A9">Contenu phrasé</a> ou <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</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">Transparent</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>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Tous les rôles sont autorisés.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLModElement")}}</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('HTML WHATWG', 'edits.html#the-del-element', '<del>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'edits.html#the-del-element', '<del>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.4', '<del>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td> </td> - </tr> - </tbody> -</table> +<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.del")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>{{HTMLElement("ins")}} qui permet de représenter les insertions dans un texte</li> - <li>{{HTMLElement("s")}} qui permet de représenter des portions de texte qui ne sont plus pertinentes (elles sont généralement barrées)</li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/ins"><code><ins></code></a> permet de représenter les insertions dans un texte</li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/s"><code><s></code></a> permet de représenter des portions de texte qui ne sont plus pertinentes (elles sont généralement barrées)</li> </ul> diff --git a/files/fr/web/html/element/details/index.html b/files/fr/web/html/element/details/index.html index 70797fa6b9..d9a30d8797 100644 --- a/files/fr/web/html/element/details/index.html +++ b/files/fr/web/html/element/details/index.html @@ -1,111 +1,154 @@ --- -title: <details> +title: '<details> : l''élément de divulgation des détails' slug: Web/HTML/Element/details tags: + - Disclosure Box + - Disclosure Widget - Element - HTML + - HTML interactive elements - Reference - Web + - details translation_of: Web/HTML/Element/details +browser-compat: html.elements.details --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><details></code></strong> est utilisé comme un outil permettant de révéler une information. Un résumé ou un intitulé peuvent être fournis grâce à un élément {{HTMLElement("summary")}}.</p> +<p class="summary">L'élément HTML <strong><code><details></code></strong> est utilisé comme un outil permettant de révéler une information. Un résumé ou un intitulé peuvent être fournis grâce à un élément <a href="/fr/docs/Web/HTML/Element/summary"><code><summary></code></a>.</p> <p>La plupart du temps, le contrôle utilisé pour cet élément est un triangle qui est tourné ou tordu afin d'indiquer si l'élément est révélé ou non. Si le premier élément fils de l'élément <code><details></code> est un élément <code><summary></code>, c'est le contenu de ce dernier qui est utilisé comme intitulé pour le contenu à révéler (l'intitulé est donc toujours visible).</p> <div>{{EmbedInteractiveExample("pages/tabbed/details.html", "tabbed-standard")}}</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> +<div class="notecard note"> + <p><b>Note :</b></p> + <p>L'utilisation courante d'un triangle qui tourne ou s'enroule pour représenter l'ouverture ou la fermeture du widget explique pourquoi on les appelle parfois « twisties » en anglais.</p> +</div> -<h2 id="Attributs">Attributs</h2> +<p>Un widget <code><details></code> peut être dans l'un des deux états suivants. L'état par défaut <em>fermé</em> affiche uniquement le triangle et l'étiquette à l'intérieur du <code><summary></code> (ou une chaîne par défaut définie par <a href="/fr/docs/Glossary/User_agent">l'agent utilisateur</a> si aucun <code><summary></code>). Cela peut ressembler à ce qui suit :</p> -<p>Comme tous les éléments HTML, cet élément accepte les <a href="/fr/docs/Web/HTML/Attributs_universels" title="fr/HTML/Global_attributes">attributs universels</a>.</p> +<figure style="margin: 1em 0; padding: 1em; border: 1px solid black; box-shadow: 0 0 4px 1px black; width: 640px;"><img alt="Capture d'écran du widget fermé <details>. Un triangle noir pointant vers la gauche se trouve à droite du texte « System Requirements »." src="details-closed.png"></figure> + +<p>Nous voyons ici un widget de divulgation standard avec l'étiquette "System Requirements", dans son état fermé par défaut. Lorsque l'utilisateur clique sur le widget ou le met au point, puis appuie sur la barre d'espacement, il s'ouvre par "torsion", révélant son contenu :</p> + +<figure style="margin: 1em 0; padding: 1em; border: 1px solid black; box-shadow: 0 0 4px 1px black; width: 640px;"><img alt="Capture d'écran du widget <details> ouvert. Le triangle pointe maintenant vers le bas, et une description détaillée de ce que signifie « System Requirements » est affichée." src="details-open.png"></figure> + +<p>À partir de là, vous pouvez utiliser les feuilles de style en cascade pour donner un style au widget de divulgation, et vous pouvez ouvrir et fermer le widget de façon programmatique en définissant ou en supprimant son attribut <a href="/fr/docs/Web/HTML/Element/details#attr-open"><code>open</code></a>.</p> + +<p>Par défaut, lorsqu'il est fermé, le widget est seulement assez haut pour afficher le triangle de divulgation et le résumé. Lorsqu'il est ouvert, il s'étend pour afficher les détails qu'il contient.</p> + +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Malheureusement, à l'heure actuelle, il n'existe aucun moyen intégré d'animer la transition entre l'ouverture et la fermeture.</p> +</div> + +<p>Les implémentations entièrement conformes aux normes appliquent automatiquement le code CSS <code><a href="/fr/docs/Web/CSS/display">display</a>: list-item</code> à l'élément <a href="/fr/docs/Web/HTML/Element/summary"><code><summary></code></a>. Vous pouvez l'utiliser pour personnaliser davantage son apparence. Voir <a href="#customizing_the_disclosure_widget">personnaliser le marqueur de révélation</a> pour plus de détails.</p> + +<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 de flux</a>, racine de section, <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content">contenu interactif</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Un élément <a href="/fr/docs/Web/HTML/Element/summary"><code><summary></code></a> suivi par du <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</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 acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><a href="https://w3c.github.io/aria/#group">group</a></td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Aucun.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLDetailsElement"><code>HTMLDetailsElement</code></a></td> + </tr> + </tbody> +</table> + +<h2 id="attributes">Attributs</h2> + +<p>Comme tous les éléments HTML, cet élément accepte les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>.</p> <dl> - <dt>{{htmlattrdef("open")}}</dt> - <dd>Cet attribut booléen indique si les détails seront affichés lors du chargement de la page. La valeur par défaut est <code>false</code> (les détails sont alors cachés).</dd> + <dt><code id="attr-open">open</code></dt> + <dd> + <p>Cet attribut booléen indique si les détails — c'est-à-dire le contenu de l'élément <code><details></code> — sont actuellement visibles ou non. Les détails sont affichés lorsque cet attribut existe, ou cachés lorsque cet attribut est absent. Par défaut, cet attribut est absent, ce qui signifie que les détails ne sont pas visibles.</p> + + <div class="note"> + <p><b>Note :</b></p> + <p>Vous devez supprimer entièrement cet attribut pour que les détails soient cachés. Attention, <code>open="false"</code> rend les détails visibles, car cet attribut est booléen.</p> + </div> + </dd> </dl> -<h2 id="Évènement_toggle">Évènement <code>toggle</code></h2> +<h2 id="Events">Évènements</h2> -<p>En plus des évènements classiques pris en charge par les éléments HTML, l'élément <code><details></code> prend en charge l'évènement {{event("toggle")}} qui est envoyé sur l'élément lorsque son état change entre ouvert et fermé (que ce soit dans un sens ou dans l'autre). L'évènement est envoyé après que l'état ait été changé et si plusieurs changement d'état ont eu lieu avant que le navigateur envoie l'évènement, le navigateur fusionnera ces évènements en un seul.</p> +<p>En plus des évènements classiques pris en charge par les éléments HTML, l'élément <code><details></code> prend en charge l'évènement <a href="/fr/docs/Web/API/HTMLDetailsElement/toggle_event">toggle</a> qui est envoyé sur l'élément lorsque son état change entre ouvert et fermé (que ce soit dans un sens ou dans l'autre). L'évènement est envoyé après que l'état ait été changé et si plusieurs changements d'état ont eu lieu avant que le navigateur envoie l'évènement, le navigateur fusionnera ces évènements en un seul.</p> <p>On peut alors écouter cet évènement en JavaScript afin de détecter le changement d'état du contrôle :</p> -<pre class="brush: js">detailsElem.addEventListener("toggle", function(evt){ - if(detailsElem.open) { +<pre class="brush: js">details.addEventListener("toggle", function(evt){ + if(details.open) { /* l'état est passé en "ouvert" */ } else { /* l'état est passé en "fermé" */ } }, false);</pre> -<h2 id="Exemples">Exemples</h2> +<h2 id="examples">Exemples</h2> -<h3 id="Un_exemple_simple">Un exemple simple</h3> +<h3 id="a_simple_disclosure_example">Un exemple simple</h3> <p>Dans cet exemple, on utilise un élément <code><details></code> sans résumé/intitulé.</p> -<h4 id="HTML">HTML</h4> - <pre class="brush: html"><details> - <p>Requires a computer running an operating system. The computer - must have some memory and ideally some kind of long-term storage. - An input device as well as some form of output device is - recommended.</p> + <p>Il faut un ordinateur équipé d'un système d'exploitation. + L'ordinateur doit disposer d'une mémoire et, idéalement, d'une sorte + de stockage à long terme. Un dispositif d'entrée et un dispositif de + sortie sont recommandés.</p> </details></pre> <p>Ici, le navigateur utilisera alors un intitulé par défaut (généralement, ce sera "Détails").</p> -<h4 id="Résultat">Résultat</h4> - -<p>{{EmbedLiveSample("Un_exemple_simple", 650, 150)}}</p> - -<h3 id="Fournir_un_résumé">Fournir un résumé</h3> - -<p>Dans cet exemple, on ajoute un résumé grâce à l'élément {{HTMLElement("summary")}} qu'on imbrique au début de l'élément <code><details></code> :</p> - -<h4 id="HTML_2">HTML</h4> - -<pre class="brush: html"><details> - <summary>System Requirements</summary> - <p>Requires a computer running an operating system. The computer - must have some memory and ideally some kind of long-term storage. - An input device as well as some form of output device is - recommended.</p> -</details></pre> - -<h4 id="Résultat_2">Résultat</h4> - -<p>{{EmbedLiveSample("Fournir_un_résumé", 650, 150)}}</p> +<p>{{EmbedLiveSample("a_simple_disclosure_example", "", 100)}}</p> -<h3 id="Créer_un_contrôle_déja_ouvert">Créer un contrôle déja ouvert</h3> +<h3 id="creating_an_open_disclosure_box">Créer un contrôle déjà ouvert</h3> <p>Pour obtenir une boîte <code><details></code> dans un état ouvert, il suffit d'ajouter l'attribut booléen <code>open</code> :</p> -<h4 id="HTML_3">HTML</h4> - <pre class="brush: html"><details open> - <summary>System Requirements</summary> - <p>Requires a computer running an operating system. The computer - must have some memory and ideally some kind of long-term storage. - An input device as well as some form of output device is - recommended.</p> + <summary>Configuration requise</summary> + <p>Il faut un ordinateur équipé d'un système d'exploitation. + L'ordinateur doit disposer d'une mémoire et, idéalement, d'une sorte + de stockage à long terme. Un dispositif d'entrée et un dispositif de + sortie sont recommandés.</p> </details></pre> -<h4 id="Résultat_3">Résultat</h4> +<p>Cela se traduit par :</p> -<p>{{EmbedLiveSample("Créer_un_contrôle_déja_ouvert", 650, 150)}}</p> +<p>{{EmbedLiveSample("creating_an_open_disclosure_box", "", 130)}}</p> -<h3 id="Personnaliser_l’apparence">Personnaliser l’apparence</h3> +<h3 id="customizing_the_appearance">Personnaliser l'apparence</h3> <p>Utilisons un peu de CSS afin de personnaliser l'apparence du contrôle fourni par <code><details></code>.</p> -<h4 id="CSS">CSS</h4> +<h4 id="css">CSS</h4> <pre class="brush: css">details { - font: 16px "Open Sans", "Arial", sans-serif; + font: 16px "Open Sans", Calibri, sans-serif; width: 620px; } @@ -115,6 +158,7 @@ details > summary { background-color: #ddd; border: none; box-shadow: 3px 3px 4px black; + cursor: pointer; } details > p { @@ -124,37 +168,38 @@ details > p { margin: 0; box-shadow: 3px 3px 4px black; } -</pre> + +details[open] > summary { + background-color: #ccf; +}</pre> <p>Ce fragment de feuille de style CSS crée une apparence similaire à un onglet où, lorsqu'on clique sur l'onglet, il s'étend et révèle le contenu.</p> -<h4 id="HTML_4">HTML</h4> +<p>Le sélecteur <code>details[open]</code> peut être utilisé pour donner un style à l'élément qui est ouvert.</p> -<pre class="brush: html"><details> - <summary>System Requirements</summary> - <p>Requires a computer running an operating system. The computer - must have some memory and ideally some kind of long-term storage. - An input device as well as some form of output device is - recommended.</p> +<h4 id="html">HTML</h4> + +<pre class="brush: html"><details open> + <summary>Configuration requise</summary> + <p>Il faut un ordinateur équipé d'un système d'exploitation. + L'ordinateur doit disposer d'une mémoire et, idéalement, d'une sorte + de stockage à long terme. Un dispositif d'entrée et un dispositif de + sortie sont recommandés.</p> </details></pre> -<h4 id="Résultat_4">Résultat</h4> +<h4 id="result">Résultat</h4> -<p>{{EmbedLiveSample("Personnaliser_l’apparence", 650, 150)}}</p> +<p>{{EmbedLiveSample("customizing_the_appearance", "", 120)}}</p> -<h3 id="Personnaliser_le_marqueur_de_révélation">Personnaliser le marqueur de révélation</h3> +<h3 id="customizing_the_disclosure_widget">Personnaliser le marqueur de révélation</h3> <p>Le triangle généralement utilisé peut également être personnalisé. Toutefois, cette fonctionnalité a été standardisée récemment et n'est pas encore largement prise en charge. De plus, la méthode de prise en charge varie encore d'un navigateur à un autre.</p> -<p>L'élément {{HTMLElement("summary")}} permet d'utiliser la propriété raccourcie {{cssxref("list-style")}} ainsi que les propriétés détaillées associées (telle que {{cssxref("list-style-type")}}) afin de modifier l'icône utilisée pour le contrôle.</p> - -<p>Il est possible de retirer l'icône en utilisant la valeur <code>none</code> pour la propriété <code>list-style</code>. Il est aussi possible d'utiliser d'autres valeurs sur <code>list-style</code> afin de configurer l'apparence du contrôle.</p> - -<p>Actuellement, Chrome ne prend pas en charge cette fonctionnalité et il faut utiliser <a href="/fr/docs/Web/CSS/Pseudo-%C3%A9l%C3%A9ments">le pseudo-élément</a> spécifique <code>::-webkit-details-marker</code> afin de personnaliser l'apparence.</p> +<p>L'élément <a href="/fr/docs/Web/HTML/Element/summary"><code><summary></code></a> prend en charge la propriété raccourcie <a href="/fr/docs/Web/CSS/list-style"><code>list-style</code></a> et ses propriétés longues, comme <a href="/fr/docs/Web/CSS/list-style-type"><code>list-style-type</code></a>, pour changer le triangle de divulgation en ce que vous choisissez (généralement avec <a href="/fr/docs/Web/CSS/list-style-image"><code>list-style-image</code></a>). Par exemple, nous pouvons supprimer l'icône du widget de divulgation en définissant <code>list-style : none</code>.</p> -<p>Pour une meilleure compatibilité à court terme, vous pouvez utiliser <code>display: none</code> sur l'élément <code><summary></code> afin de désactiver l'affichage du contrôle.</p> +<p>Actuellement, Chrome ne prend pas en charge cette fonctionnalité et il faut utiliser <a href="/fr/docs/Web/CSS/Pseudo-elements">le pseudo-élément</a> spécifique <code>::-webkit-details-marker</code> afin de personnaliser l'apparence.</p> -<h4 id="CSS_2">CSS</h4> +<h4 id="css_2">CSS</h4> <pre class="brush: css; highlight:[12, 15-17]">details { font: 16px "Open Sans", "Arial", sans-serif; @@ -180,86 +225,34 @@ details > p { padding: 2px 6px; margin: 0; box-shadow: 3px 3px 4px black; -} -</pre> +}</pre> -<h4 id="HTML_5">HTML</h4> +<p>Ce CSS crée un aspect similaire à celui d'une interface à onglets, où l'activation de l'onglet le développe et l'ouvre pour révéler son contenu.</p> -<pre class="brush: html"><details> - <summary>System Requirements</summary> - <p>Requires a computer running an operating system. The computer - must have some memory and ideally some kind of long-term storage. - An input device as well as some form of output device is - recommended.</p> -</details></pre> +<h4 id="html_2">HTML</h4> -<h4 id="Résultat_5">Résultat</h4> - -<p>{{EmbedLiveSample("Personnaliser_le_marqueur_de_révélation", 650, 150)}}</p> +<pre class="brush: html"><details open> + <summary>Configuration requise</summary> + <p>Il faut un ordinateur équipé d'un système d'exploitation. + L'ordinateur doit disposer d'une mémoire et, idéalement, d'une sorte + de stockage à long terme. Un dispositif d'entrée et un dispositif de + sortie sont recommandés.</p> +</details></pre> -<h2 id="Résumé_technique">Résumé technique</h2> +<h4 id="result_2">Résultat</h4> -<table class="properties"> - <tbody> - <tr> - <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, racine de section, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Contenu autorisé</dfn></th> - <td>Un élément {{HTMLElement("summary")}} suivi par du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Omission de balises</dfn></th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row"><dfn>Parents autorisés</dfn></th> - <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Aucun.</td> - </tr> - <tr> - <th scope="row"><dfn>Interface DOM</dfn></th> - <td>{{domxref("HTMLDetailsElement")}}</td> - </tr> - </tbody> -</table> +<p>{{EmbedLiveSample("customizing_the_disclosure_widget", "", 120)}}</p> -<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('HTML WHATWG', 'interactive-elements.html#the-details-element', '<details>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-details-element', '<details>')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +<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.details")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>{{HTMLElement("summary")}}</li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/summary"><code><summary></code></a></li> </ul> diff --git a/files/fr/web/html/element/dfn/index.html b/files/fr/web/html/element/dfn/index.html index 7ff128d4f2..147a16f0a6 100644 --- a/files/fr/web/html/element/dfn/index.html +++ b/files/fr/web/html/element/dfn/index.html @@ -2,52 +2,97 @@ title: '<dfn> : l''élément de définition' slug: Web/HTML/Element/dfn tags: + - Definition + - Definitions - Element - HTML + - HTML text-level semantics - Reference + - Semantic Markup - Web + - dfn translation_of: Web/HTML/Element/dfn +browser-compat: html.elements.dfn --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><dfn></code></strong> est utilisé afin d'indiquer le terme qui est en train d'être défini dans une phrase ou un paragraphe (sa définition est écrite dans son parent {{HTMLElement("p")}} ou {{HTMLElement("dt")}}/{{HTMLElement("dd")}} ou {{HTMLElement("section")}} le plus proche).</p> - -<div class="note"> -<p><strong>Note :</strong> Si cette phrase vous paraît absconse, n'hésitez pas à consulter les exemples ci-après.</p> -</div> - -<p>Le rôle de l'élément <code><dfn></code> est purement sémantique.</p> +<p class="summary">L'élément HTML <strong><code><dfn></code></strong> (aussi nommé « définition ») est utilisé pour indiquer le terme défini dans le contexte d'une expression ou d'une phrase de définition. L'élément <a href="/fr/docs/Web/HTML/Element/p"><code><p></code></a>, le couple <a href="/fr/docs/Web/HTML/Element/dt"><code><dt></code></a>/<a href="/fr/docs/Web/HTML/Element/dd"><code><dd></code></a> ou l'élément <a href="/fr/docs/Web/HTML/Element/section"><code><section></code></a> qui est le plus proche ancêtre de <code><dfn></code> est considéré comme la définition du terme.</p> <div>{{EmbedInteractiveExample("pages/tabbed/dfn.html", "tabbed-shorter")}}</div> -<p 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> !</p> +<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 de 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#palpable_content">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">Contenu phrasé</a> mais sans élément <code><dfn></code> qui soit un descendant.</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 acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><a href="https://w3c.github.io/aria/#term"><code>term</code></a></td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>.</td> + </tr> + </tbody> +</table> -<h2 id="Attributs">Attributs</h2> +<h2 id="attributes">Attributs</h2> -<p>Comme pour tous les éléments, on peut appliquer <a href="/fr/docs/Web/HTML/Attributs_globaux">les attributs universels</a> sur <code><dfn></code>.</p> +<p>Comme pour tous les éléments, on peut appliquer <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a> sur <code><dfn></code>.</p> <p>Pour cet élément, l'attribut <code><strong>title</strong></code> possède un sens particulier noté ci-après.</p> -<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation :</strong></h2> +<h2 id="usage_notes">Notes d'utilisation</h2> -<ul> - <li>L'élément <code><dfn></code> marque le terme étant défini. La définition du terme doit être donnée par l'élément {{HTMLElement("p")}}, ou {{HTMLElement("section")}} parent ou par un groupe de liste de définitions (généralement une paire {{HTMLElement("dt")}}, {{HTMLElement("dd")}}).</li> - <li>La valeur exacte du terme étant défini est déterminé par les règles suivantes : - <ol> - <li>Si l'élément <code><dfn></code> possède un attribut <code><strong>title</strong></code> alors le terme en question est la valeur de cet attribut. Dans ce cas, l'élément doit toujours contenir du texte mais ce dernier peut être une autre forme du terme (par exemple une abbréviation, auquel cas on utilisera un élément {{HTMLElement("abbr")}})</li> - <li>Sinon et s'il contient seulement un élément {{HTMLElement("abbr")}} avec l'attribut {{htmlattrxref("title", "abbr")}}, alors le terme en question est la valeur de cet attribut.</li> - <li>Dans tous les autres cas, le texte contenu par l'élément <code><dfn></code> est le terme qui est défini.</li> - </ol> - </li> -</ul> +<p>L'utilisation de l'élément <code><dfn></code> présente certains aspects peu évidents. Nous les examinons ici.</p> + +<h3 id="specifying_the_term_being_defined">Spécifier le terme à définir</h3> -<h2 id="Exemples">Exemples</h2> +<p>Le terme à définir est identifié selon ces règles :</p> -<h3 id="Identification_simple_d’un_terme">Identification simple d’un terme</h3> +<ol> + <li>Si l'élément <code><dfn></code> possède un attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-title"><code>title</code></a>, la valeur de l'attribut <code>title</code> est considérée comme étant le terme défini. L'élément doit toujours contenir du texte, mais ce texte peut être une abréviation (peut-être en utilisant <a href="/fr/docs/Web/HTML/Element/abbr"><code><abbr></code></a>) ou une autre forme du terme.</li> + <li>Si le <code><dfn></code> contient un seul élément enfant et n'a pas de contenu textuel propre, et que l'élément enfant est un élément <a href="/fr/docs/Web/HTML/Element/abbr"><code><abbr></code></a> avec un attribut <code>title</code> lui-même, alors la valeur exacte du <code><abbr></code> de l'élément <code>title</code> est le terme défini.</li> + <li>Sinon, le contenu textuel de l'élément <code><dfn></code> est le terme défini. Ceci est illustré <a href="#basic_identification_of_a_term">dans le premier exemple ci-dessous</a>.</li> +</ol> + +<div class="note"> + <p><b>Note :</b></p> + <p>Si l'élément <code><dfn></code> possède un attribut <code>title</code>, il <em>doit</em> contenir le terme défini et aucun autre texte.</p> +</div> + +<h3 id="links_to_dfn_elements">Liens vers des éléments de type <code><dfn></code></h3> + +<p>Si vous incluez un attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a> sur l'élément <code><dfn></code>, vous pouvez ensuite créer un lien vers celui-ci en utilisant des éléments <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a>. Ces liens doivent être des utilisations du terme, l'objectif étant que le lecteur puisse accéder rapidement à la définition du terme s'il ne la connaît pas déjà, en cliquant sur le lien du terme.</p> + +<p>C'est ce que montre l'exemple sous <a href="#links_to_definitions">Liens vers les définitions</a> ci-dessous.</p> + +<h2 id="examples">Exemples</h2> + +<p>Voyons quelques exemples de divers scénarios d'utilisation.</p> + +<h3 id="basic_identification_of_a_term">Identification simple d'un terme</h3> <p>Dans cet exemple, on utilise simplement l'élément <code><dfn></code> afin d'identifier l'emplacement du terme défini au sein de sa définition.</p> -<h4 id="HTML">HTML</h4> +<h4 id="html">HTML</h4> <pre class="brush: html"><p> L'élément HTML de définition @@ -58,15 +103,15 @@ translation_of: Web/HTML/Element/dfn <p>L'élément <code><dfn></code> n'ayant ici pas d'attribut <code>title</code>, c'est le contenu textuel qui représente le terme que l'on définit.</p> -<h4 id="Résultat">Résultat</h4> +<h4 id="result">Résultat</h4> -<p>{{EmbedLiveSample("Identification_simple_d’un_terme", 650, 120)}}</p> +<p>{{EmbedLiveSample("basic_identification_of_a_term", "", 120)}}</p> -<h3 id="Liens_vers_des_définitions">Liens vers des définitions</h3> +<h3 id="links_to_definitions">Liens vers des définitions</h3> -<p>Il est possible d'utiliser l'attribut <code>id</code> afin de créer des liens avec des éléments {{HTMLElement("a")}} qui pointent vers la définition.</p> +<p>Il est possible d'utiliser l'attribut <code>id</code> afin de créer des liens avec des éléments <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> qui pointent vers la définition.</p> -<h4 id="HTML_2">HTML</h4> +<h4 id="html_2">HTML</h4> <pre class="brush: html"><p>L'élément de définition (<strong><dfn id="definition-dfn">&lt;dfn&gt;</dfn></strong>) est @@ -89,108 +134,45 @@ agere divinius? </p> <code><a href="#definition-dfn">&lt;dfn&gt;</a></code> pour ce projet.</p></pre> -<p>On voit ici que l'élément possède désormais un attribut {{htmlattrxref("id")}} avec la valeur <code>"definition-dfn"</code>. Cet attribut permet d'utiliser l'élément comme cible d'un lien. Plus bas, on crée un tel lien avec un élément {{HTMLElement("a")}} dont l'attribut {{htmlattrxref("href", "a")}} vaut <code>"#definition-dfn"</code>, ce qui permet de remonter à la définition.</p> +<p>On voit ici que l'élément possède désormais un attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a> avec la valeur <code>"definition-dfn"</code>. Cet attribut permet d'utiliser l'élément comme cible d'un lien. Plus bas, on crée un tel lien avec un élément <a href="/fr/docs/Web/HTML/Element/a"><code><a></code></a> dont l'attribut <a href="/fr/docs/Web/HTML/Element/a#attr-href"><code>href</code></a> vaut <code>"#definition-dfn"</code>, ce qui permet de remonter à la définition.</p> -<h4 id="Résultat_2">Résultat</h4> +<h4 id="result_2">Résultat</h4> -<p>{{EmbedLiveSample("Liens_vers_des_définitions", 650, 300)}}</p> +<p>{{EmbedLiveSample("links_to_definitions", "", 350)}}</p> -<h3 id="Combiner_les_abbréviations_et_les_définitions">Combiner les abbréviations et les définitions</h3> +<h3 id="using_abbreviations_and_definitions_together">Utiliser les abréviations et les définitions</h3> -<p>Dans certains cas, on souhaite utiliser l'abbréviation d'un terme lorsqu'on le définit. Pour cela, on peut utiliser <code><dfn></code> et {{HTMLElement("abbr")}} de la façon suivante :</p> +<p>Dans certains cas, on souhaite utiliser l'abréviation d'un terme lorsqu'on le définit. Pour cela, on peut utiliser <code><dfn></code> et <a href="/fr/docs/Web/HTML/Element/abbr"><code><abbr></code></a> de la façon suivante :</p> -<h4 id="HTML_3">HTML</h4> +<h4 id="html_3">HTML</h4> -<pre class="brush: html"><p>The <dfn><abbr title="Hubble Space Telescope">HST</abbr></dfn> -is among the most productive scientific instruments ever constructed. -It has been in orbit for over 20 years, scanning the sky and -returning data and photographs of unprecedented quality and -detail.</p> +<pre class="brush: html"><p>Le <dfn><abbr title="Télescope Spatial Hubble">TSH</abbr></dfn> +est l'un des instruments scientifiques les plus productifs jamais +construits. Il est en orbite depuis plus de 20 ans, scrutant le ciel +et renvoyant des données et des photographies d'une qualité et d'un +niveau de détail sans précédent.</p> -<p>Indeed, the <abbr title="Hubble Space Telescope">HST</abbr> has -arguably done more to advance science than any device ever built.</p></pre> +<p>En effet, le <abbr title="Télescope Spatial Hubble">TSH</abbr> a sans +doute fait plus pour faire avancer la science que tout autre appareil +jamais construit.</p></pre> -<p>On notera que l'élément <code><abbr></code> est imbriqué dans l'élément <code><dfn></code>. L'élément <code><abbr></code> indique que le terme est une abbréviation ("HST") et indique le détail de cette abbrévation ("Hubble Space Telescope") grâce à son attribut <code>title</code>. L'élément <code><dfn></code> indique quant à lui que c'est bien ce terme abrégé qu'on est en train de définir.</p> +<p>On notera que l'élément <code><abbr></code> est imbriqué dans l'élément <code><dfn></code>. L'élément <code><abbr></code> indique que le terme est une abréviation ("HST") et indique le détail de cette abrévation ("Hubble Space Telescope") grâce à son attribut <code>title</code>. L'élément <code><dfn></code> indique quant à lui que c'est bien ce terme abrégé qu'on est en train de définir.</p> -<h4 id="Résultat_3">Résultat</h4> +<h4 id="result_3">Résultat</h4> -<p>{{EmbedLiveSample("Combiner_les_abbréviations_et_les_définitions", 650, 200)}}</p> +<p>{{EmbedLiveSample("using_abbreviations_and_definitions_together", "", 200)}}</p> -<h2 id="Résumé_technique">Résumé technique</h2> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></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égorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Contenu autorisé</dfn></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a> mais sans élément {{HTMLElement("dfn")}} qui soit un descendant.</td> - </tr> - <tr> - <th scope="row"><dfn>Omission de balises</dfn></th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row"><dfn>Parents autorisés</dfn></th> - <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Tous les rôles sont autorisés.</td> - </tr> - <tr> - <th scope="row"><dfn>Interface DOM</dfn></th> - <td>{{domxref("HTMLElement")}}.</td> - </tr> - </tbody> -</table> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécifications</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'semantics.html#the-dfn-element', '<dfn>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-dfn-element', '<dfn>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<dfn>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td></td> - </tr> - </tbody> -</table> +<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.dfn")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>Les éléments HTML en lien avec les listes de définitions : - <ul> - <li>{{HTMLElement("dl")}}</li> - <li>{{HTMLElement("dt")}}</li> - <li>{{HTMLElement("dd")}}</li> - </ul> - </li> - <li>{{HTMLElement("abbr")}}</li> + <li>Éléments liés aux listes de définitions : <a href="/fr/docs/Web/HTML/Element/dl"><code><dl></code></a>, <a href="/fr/docs/Web/HTML/Element/dt"><code><dt></code></a>, <a href="/fr/docs/Web/HTML/Element/dd"><code><dd></code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/abbr"><code><abbr></code></a></li> </ul> diff --git a/files/fr/web/html/element/dialog/index.html b/files/fr/web/html/element/dialog/index.html index e748648f51..ea1a1effa4 100644 --- a/files/fr/web/html/element/dialog/index.html +++ b/files/fr/web/html/element/dialog/index.html @@ -2,46 +2,94 @@ title: '<dialog> : l''élément de boîte de dialogue' slug: Web/HTML/Element/dialog tags: + - Dialog - Element - - Experimental - HTML + - HTML interactive elements - Reference - Web + - polyfill translation_of: Web/HTML/Element/dialog +browser-compat: html.elements.dialog --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <code><strong><dialog></strong></code> représente une boite de dialogue ou un composant interactif (par exemple un inspecteur ou une fenêtre).</p> +<p class="summary">L'élément HTML <code><strong><dialog></strong></code> représente une boite de dialogue ou un composant interactif (par exemple un inspecteur ou une fenêtre).</p> -<h2 id="Attributes">Attributes</h2> - -<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>. L'attribut <code>tabindex</code> ne doit pas être utilisé sur l'élément <code><dialog></code>.</p> +<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 de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#sectioning_roots"> racine de sectionnement</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</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 du <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><a href="/fr/docs/Web/Accessibility/ARIA/Roles/dialog_role"><code>dialog</code></a></td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td><a href="https://w3c.github.io/aria/#alertdialog"><code>alertdialog</code></a></td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLDialogElement"><code>HTMLDialogElement</code></a></td> + </tr> + </tbody> + </table> + +<h2 id="attributes">Attributs</h2> + +<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> + +<div class="notecard warning"> + <p>L'attribut <code>tabindex</code> ne doit pas être utilisé sur l'élément <code><dialog></code>.</p> +</div> <dl> - <dt>{{htmlattrdef("open")}}</dt> - <dd>Cet attribut indique que la boîte de dialogue est active et peut être utilisée de façon interactive. Si l'attribut n'est pas renseigné, la boîte de dialogue ne doit pas être présentée à l'utilisateur.</dd> + <dt><code id="attr-open">open</code></dt> + <dd>Cet attribut indique que la boîte de dialogue est active et peut être utilisée de façon interactive. Si l'attribut n'est pas renseigné, la boîte de dialogue ne doit pas être présentée à l'utilisateur.</dd> </dl> -<h2 id="Notes">Notes</h2> +<h2 id="usage_notes">Notes d'utilisation</h2> <ul> - <li>L'élément <code><form></code> peut être intégré dans une boîte de dialogue en spécifiant l'attribut <code><code>method="dialog</code>"</code>. Lorsqu'un formulaire de ce type est envoyé, la boîte de dialogue est fermée avec un attribut {{domxref("HTMLDialogElement.returnValue", "returnValue")}} mis à jour avec la valeur <code>value</code> du bouton d'envoi utilisé.</li> - <li>Le pseudo-élément CSS {{cssxref('::backdrop')}} peut être utilisé pour mettre en forme l'arrière plan d'un élément <code><dialog></code>. On peut par exemple estomper un contenu inaccessible pendant que la boîte de dialogue est active. Cette ombre portée est uniquement dessinée lorsque l'élément <code><dialog></code> est affiché via {{domxref("HTMLDialogElement.showModal()")}}.</li> + <li>Les éléments <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a> peuvent fermer un dialogue s'ils possèdent l'attribut <code>method="dialog"</code>. Lorsqu'un tel formulaire est soumis, le dialogue se ferme avec sa propriété <a href="/fr/docs/Web/API/HTMLDialogElement/returnValue"><code>returnValue</code></a> définie sur la <code>value</code> (valeur) du bouton qui a été utilisé pour soumettre le formulaire.</li> + <li>Le pseudo-élément CSS <a href="/fr/docs/Web/CSS/::backdrop"><code>::backdrop</code></a> peut être utilisé pour créer un style derrière un élément <code><dialog></code> lorsque le dialogue est affiché avec <a href="/fr/docs/Web/API/HTMLDialogElement/showModal"><code>HTMLDialogElement.showModal()</code></a>. Par exemple, pour atténuer le contenu inaccessible derrière la boîte de dialogue modale.</li> </ul> -<h2 id="Exemples">Exemples</h2> +<h2 id="examples">Exemples</h2> + +<h3 id="simple_example">Exemple simple</h3> + +<pre class="brush: html"><dialog open> + <p>Salutations, à tous et à toutes !</p> +</dialog></pre> + +<h3 id="advanced_example">Exemple avancé</h3> -<h3 id="HTML">HTML</h3> +<h4 id="html">HTML</h4> -<pre class="brush: html"><!-- Une boîte de dialogue qui contient un formulaire --> +<pre class="brush: html"><!-- Boîte de dialogue contextuelle simple contenant un formulaire --> <dialog id="favDialog"> <form method="dialog"> <p><label>Animal préféré : <select> <option></option> - <option>Panda roux</option> - <option>Macrotus</option> - <option>Koala</option> + <option>Crevette en saumure</option> + <option>Panda rouge</option> + <option>Singe-araignée</option> </select> </label></p> <menu> @@ -55,112 +103,55 @@ translation_of: Web/HTML/Element/dialog <button id="updateDetails">Mettre à jour les détails</button> </menu> -<output aria-live="polite"></output> -</pre> +<output aria-live="polite"></output></pre> -<h3 id="JavaScript">JavaScript</h3> +<h4 id="javascript">JavaScript</h4> -<pre class="brush: js">(function() { - var updateButton = document.getElementById('updateDetails'); - var favDialog = document.getElementById('favDialog'); - var outputBox = document.getElementsByTagName('output')[0]; - var selectEl = document.getElementsByTagName('select')[0]; - var confirmBtn = document.getElementById('confirmBtn'); +<pre class="brush: js">let updateButton = document.getElementById('updateDetails'); +let favDialog = document.getElementById('favDialog'); +let outputBox = document.querySelector('output'); +let selectEl = document.querySelector('select'); +let confirmBtn = document.getElementById('confirmBtn'); - // Le bouton "mettre à jour les détails" ouvre la boîte de dialogue - updateButton.addEventListener('click', function onOpen() { - if (typeof favDialog.showModal === "function") { - favDialog.showModal(); - } else { - console.error("L'API dialog n'est pas prise en charge par votre navigateur"); - } - }); - // Le champ "animal préféré" définit la valeur pour le bouton submit - selectEl.addEventListener('change', function onSelect(e) { - confirmBtn.value = selectEl.value; - }); - // Le bouton "Confirmer" déclenche l'évènement "close" sur le dialog avec [method="dialog"] - favDialog.addEventListener('close', function onClose() { - outputBox.value = "Vous avez cliqué sur le bouton " + favDialog.returnValue + " !"; - }); -})(); +// Le bouton "Mettre à jour les détails" ouvre le <dialogue> ; modulaire +updateButton.addEventListener('click', function onOpen() { + if (typeof favDialog.showModal === "function") { + favDialog.showModal(); + } else { + console.error("L'API <dialog> n'est pas prise en charge par ce navigateur."); + } +}); +// L'entrée "Animal favori" définit la valeur du bouton d'envoi. +selectEl.addEventListener('change', function onSelect(e) { + confirmBtn.value = selectEl.value; +}); +// Le bouton "Confirmer" du formulaire déclenche la fermeture +// de la boîte de dialogue en raison de [method="dialog"] +favDialog.addEventListener('close', function onClose() { + outputBox.value = favDialog.returnValue + " bouton cliqué - " + (new Date()).toString(); +});</pre> -</pre> +<h4 id="result">Résultat</h3> -<h3 id="Résultat">Résultat</h3> +<p>{{EmbedLiveSample("advanced_example", "", 300)}}</p> -<p>{{EmbedLiveSample("Exemples","400","500")}}</p> +<h2 id="specifications">Spécifications</h2> -<h2 id="Résumé_technique">Résumé technique</h2> +<p>{{Specifications}}</p> -<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/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement"> racine de sectionnement</a>.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</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_de_flux">contenu de flux</a>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>{{ARIARole("alertdialog")}}</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLDialogElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Prothèse_d'émulation_(polyfill)">Prothèse d'émulation (<em>polyfill</em>)</h2> - -<p>Cette prothèse peut être utilisée pour fournir un support pour les navigateurs : <a href="https://github.com/GoogleChrome/dialog-polyfill">dialog-polyfill</a>.</p> - -<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('HTML WHATWG', 'forms.html#the-dialog-element', '<dialog>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5.2', 'interactive-elements.html#the-dialog-element', '<dialog>')}}</td> - <td>{{Spec2('HTML5.2')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<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> - -<p>{{Compat("html.elements.dialog")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat}}</p> + +<h2 id="Polyfill">Prothèse d'émulation (polyfill)</h2> + +<p>Incluez ce polyfill pour fournir un support aux navigateurs sans élément <code><dialog></code> : <a href="https://github.com/GoogleChrome/dialog-polyfill">dialog-polyfill</a>.</p> + +<h2 id="See_also">Voir aussi</h2> <ul> - <li>L'évènement {{event("close")}}</li> - <li>L'évènement {{event("cancel")}}</li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Guide sur les formulaires HTML</a></li> - <li>Le pseudo-élément {{cssxref("::backdrop")}}</li> + <li>L'évènement <a href="/fr/docs/Web/Reference/HTMLDialogElement/close_event">close</a></li> + <li>L'évènement <a href="/fr/docs/Web/Reference/HTMLDialogElement/cancel_event">cancel</a></li> + <li><a href="/fr/docs/Learn/Forms">Guide sur les formulaires HTML</a></li> + <li>Le pseudo-élément <a href="/fr/docs/Web/CSS/::backdrop"><code>::backdrop</code></a></li> </ul> diff --git a/files/fr/web/html/element/dir/index.html b/files/fr/web/html/element/dir/index.html index 4b62a33fbf..6c1dc7e17d 100644 --- a/files/fr/web/html/element/dir/index.html +++ b/files/fr/web/html/element/dir/index.html @@ -1,58 +1,69 @@ --- -title: '<dir> : l''élément de répertoire (obsolète)' +title: '<dir> : l''élément de répertoire' slug: Web/HTML/Element/dir tags: + - Directory - Element - HTML - - Obsolete + - HTML Lists + - Deprecated - Reference - Web + - dir + - lists translation_of: Web/HTML/Element/dir +browser-compat: html.elements.dir --- -<div>{{Obsolete_header}}{{HTMLRef}}</div> +<div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><dir></code></strong> (pour <em>directory</em>) est utilisé comme un conteneur pour un répertoire (c'est-à-dire un ensemble de fichiers). Des styles et icônes peuvent être appliqués par l'agent utilisateur. Cet élément obsolète ne doit pas être utilisé, il peut être remplacé par l'élément {{HTMLElement("ul")}} qui permet de représenter des listes et, entre autres, des listes de fichiers.</p> +<div class="notecard obsolete"> + <p><b>Obsolète :</b></p> + <p>Cette fonctionnalité est obsolète. Bien qu'encore supportée par des navigateurs, son utilisation est découragée pour tout nouveau projet. Évitez de l'utiliser.</p> +</div> -<div class="note"><strong>Note d'utilisation : </strong>Cet élément ne doit pas être utilisé. Bien que présent dans les premières spécifications HTML, il a été déprécié dans HTML 4, et rendu obsolète avec HTML5. Il faudra privilégier l'élément {{HTMLElement("ul")}}. De plus, aucun navigateur majeur ne prend en charge cet élément.</div> +<p class='summary'>L'élément HTML <strong><code><dir></code></strong> (pour <em>directory</em>) est utilisé comme un conteneur pour un répertoire (c'est-à-dire un ensemble de fichiers). Des styles et icônes peuvent être appliqués par l'agent utilisateur. Cet élément obsolète ne doit pas être utilisé, il peut être remplacé par l'élément <a href="/fr/docs/Web/HTML/Element/ul"><code><ul></code></a> qui permet de représenter des listes et, entre autres, des listes de fichiers.</p> -<h2 id="Interface_DOM">Interface DOM</h2> +<div class="notecard note"> + <p><b>Note d'utilisation :</b></p> + <p>Cet élément ne doit pas être utilisé. Bien que présent dans les premières spécifications HTML, il a été déprécié dans HTML 4, et rendu obsolète avec HTML5. Il faudra privilégier l'élément <a href="/fr/docs/Web/HTML/Element/ul"><code><ul></code></a>. De plus, aucun navigateur majeur ne prend en charge cet élément.</p> +</div> -<p>Cet élément implémente l'interface {{domxref("HTMLDirectoryElement")}}.</p> +<h2 id="dom_interface">Interface DOM</h2> -<h2 id="Attributs">Attributs</h2> +<p>Cet élément implémente l'interface <a href="/fr/docs/Web/API/HTMLDirectoryElement"><code>HTMLDirectoryElement</code></a>.</p> -<p>Comme pour tous les autres éléments HTML, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur cet élément.</p> +<h2 id="attributes">Attributs</h2> + +<p>Comme pour tous les autres éléments HTML, on peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a> sur cet élément.</p> <dl> - <dt>{{htmlattrdef("compact")}}</dt> - <dd>Cet attribut booléen indique que la liste doit être rendue avec un affichage compact. L'interprétation de cet attribut dépend de l'agent utilisateur. Il ne fonctionne pas dans tous les navigateurs. - <div class="note"><strong>Note d'utilisation : </strong>Cet attribut ne doit pas être utilisé car il a été déprécié. L'élément {{HTMLElement("dir")}} doit être mis en forme en utilisant <a href="/fr/docs/Web/CSS">CSS</a>. Pour obtenir un effect visuel similaire à l'attribut <code>compact</code>, la propriété CSS {{cssxref("line-height")}} peut être utilisé avec la valeur <code>80%</code>.</div> - </dd> + <dt><code id="attr-compact">compact</code></dt> + <dd>Cet attribut booléen indique que la liste doit être rendue avec un affichage compact. L'interprétation de cet attribut dépend de l'agent utilisateur. Il ne fonctionne pas dans tous les navigateurs. + <div class="notecard note"> + <p><b>Note d'utilisation :</b></p> + <p>Cet attribut ne doit pas être utilisé, car il a été déprécié. L'élément <a href="/fr/docs/Web/HTML/Element/dir"><code><dir></code></a> doit être mis en forme en utilisant <a href="/fr/docs/Web/CSS">CSS</a>. Pour obtenir un effect visuel similaire à l'attribut <code>compact</code>, la propriété CSS <a href="/fr/docs/Web/CSS/line-height"><code>line-height</code></a> peut être utilisé avec la valeur <code>80%</code>.</p> + </div> + </dd> </dl> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<h2 id="specifications">Spécifications</h2> + +<p>Ne fait pas partie des spécifications actuelles.</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.dir")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>Les autres éléments HTML utilisés pour les listes : - <ul> - <li>{{HTMLElement("ol")}}</li> - <li>{{HTMLElement("ul")}}</li> - <li>{{HTMLElement("li")}}</li> - <li>{{HTMLElement("menu")}}</li> - </ul> - </li> - <li>Les propriétés CSS qui peuvent être utilisées pour mettre en forme l'élément <code><dir></code> : - <ul> - <li>La propriété {{cssxref('list-style')}} est utile pour choisir l'apparence des puces.</li> - <li><a href="/fr/docs/Web/CSS/Compteurs_CSS">Les compteurs CSS</a> sont utiles pour gérer des listes imbriquées complexes.</li> - <li>La propriété {{cssxref('line-height')}} est utile pour reproduire l'attribut déprécié {{htmlattrxref("compact", "dir")}}.</li> - <li>La propriété {{cssxref('margin')}} est utile pour contrôler l'indentation de la liste.</li> - </ul> - </li> + <li>Les autres éléments HTML utilisés pour les listes : <a href="/fr/docs/Web/HTML/Element/ol"><code><ol></code></a>, <a href="/fr/docs/Web/HTML/Element/ul"><code><ul></code></a>, <a href="/fr/docs/Web/HTML/Element/li"><code><li></code></a>, and <a href="/fr/docs/Web/HTML/Element/menu"><code><menu></code></a>;</li> + <li>Les propriétés CSS qui peuvent être utilisées pour mettre en forme l'élément <code><dir></code> : + <ul> + <li>La propriété <a href="/fr/docs/Web/CSS/list-style"><code>list-style</code></a> est utile pour choisir l'apparence des puces.</li> + <li><a href="/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">Les compteurs CSS</a> sont utiles pour gérer des listes imbriquées complexes.</li> + <li>La propriété <a href="/fr/docs/Web/CSS/line-height"><code>line-height</code></a> est utile pour reproduire l'attribut déprécié <a href="/fr/docs/Web/HTML/Element/dir#attr-compact"><code>compact</code></a>.</li> + <li>La propriété <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> est utile pour contrôler l'indentation de la liste.</li> + </ul> + </li> </ul> diff --git a/files/fr/web/html/element/div/index.html b/files/fr/web/html/element/div/index.html index b6371f8dda..35b092a859 100644 --- a/files/fr/web/html/element/div/index.html +++ b/files/fr/web/html/element/div/index.html @@ -2,63 +2,99 @@ title: '<div> : l''élément de division du contenu' slug: Web/HTML/Element/div tags: + - Content Division - Element - HTML + - HTML grouping content + - HTML:Flow content + - Layout - Reference - Web + - div translation_of: Web/HTML/Element/div +browser-compat: html.elements.div --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><div></code></strong> (qui signifie <em>division du document</em>) est un conteneur générique qui permet d'organiser le contenu sans représenter rien de particulier. Il peut être utilisé afin de grouper d'autres éléments pour leur appliquer un style (en utilisant les attributs {{htmlattrxref("class")}} ou {{htmlattrxref("id")}}) ou parce qu'ils partagent des attributs aux valeurs communes, tel que {{htmlattrxref("lang")}}. Il doit uniquement être utilisé lorsqu'aucun autre élément sémantique (par exemple {{HTMLElement("article")}} ou {{HTMLElement("nav")}}) n'est approprié.</p> +<p class="summary">L'élément HTML <strong><code><div></code></strong> (ou division) est le conteneur générique du contenu du flux. Il n'a aucun effet sur le contenu ou la mise en page tant qu'il n'est pas mis en forme d'une manière quelconque à l'aide de <a href="/fr/docs/Web/CSS">CSS</a>.</p> <div>{{EmbedInteractiveExample("pages/tabbed/div.html","tabbed-standard")}}</div> -<p 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> !</p> +<p>En tant que conteneur « pur », l'élément <code><div></code> ne représente rien en soi. Il est plutôt utilisé pour regrouper le contenu afin qu'il puisse être facilement stylé à l'aide des attributs <a href="/fr/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> ou <a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a>, pour marquer une section d'un document comme étant écrite dans une langue différente (à l'aide de l'attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-lang"><code>lang</code></a>), etc.</p> -<h2 id="Attributs">Attributs</h2> +<table class="properties"> + <tbody> + <tr> + <th scope="row"><dfn><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></dfn></th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>. Selon le WHATWG, si l'élément parent est un élément <a href="/fr/docs/Web/HTML/Element/dl"><code><dl></code></a>, un ou plusieurs éléments <a href="/fr/docs/Web/HTML/Element/dt"><code><dt></code></a> suivis par un ou plusieurs éléments <a href="/fr/docs/Web/HTML/Element/dd"><code><dd></code></a> éventuellement entrecoupés par des éléments <a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a> ou <a href="/fr/docs/Web/HTML/Element/template"><code><template></code></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 un <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a>. Selon le WHATWG, un élément <a href="/fr/docs/Web/HTML/Element/dl"><code><dl></code></a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><a href="https://www.w3.org/TR/wai-aria-1.2/#generic">generic</a></td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLDivElement"><code>HTMLDivElement</code></a></td> + </tr> + </tbody> +</table> + +<h2 id="attributes">Attributs</h2> -<p>Comme tous les autres éléments HTML, cet élément accepte <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +<p>Comme tous les autres éléments HTML, cet élément accepte <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> <div class="note"> -<p><strong>Note :</strong> L'attribut <code><strong>align</strong></code> est désormais obsolète et ne doit plus être appliqué pour un <code><div></code>. On privilégiera l'utilisation des propriétés et outils CSS (tels que <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">la grille CSS</a> ou <a href="/fr/docs/Glossaire/Flexbox">les boîtes flexibles (flexbox)</a>) pour aligner et positionner des éléments <code><div></code>.</p> + <p><b>Note :</b></p> + <p>L'attribut <code><strong>align</strong></code> est désormais obsolète et ne doit plus être appliqué pour un <code><div></code>. On privilégiera l'utilisation des propriétés et outils CSS (tels que <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">la grille CSS</a> ou <a href="/fr/docs/Glossary/Flexbox">les boîtes flexibles (flexbox)</a>) pour aligner et positionner des éléments <code><div></code>.</p> </div> -<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> +<h2 id="usage_notes">Notes d'utilisation</h2> -<p>L'élément <code><div></code> doit uniquement être utilisé lorsqu'il n'existe aucun autre élément dont la sémantique permet de représenter le contenu (par exemple {{HTMLElement("article")}} ou {{HTMLElement("nav")}}).</p> - -<h2 id="Exemples">Exemples</h2> +<ul> + <li>L'élément <code><div></code> doit uniquement être utilisé lorsqu'il n'existe aucun autre élément dont la sémantique permet de représenter le contenu (par exemple <a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a> ou <a href="/fr/docs/Web/HTML/Element/nav"><code><nav></code></a>).</li> +</ul> -<h3 id="Un_exemple_simple">Un exemple simple</h3> +<h2 id="examples">Exemples</h2> -<h4 id="HTML">HTML</h4> +<h3 id="a_simple_example">Un exemple simple</h3> <pre class="brush: html"><div> - <p> - Tout type de contenu. Par exemple - &lt;p&gt;, &lt;table&gt;. À vous - de voir&nbsp;! - </p> -</div> -</pre> + <p>Tout type de contenu. Par exemple &lt;p&gt;, + &lt;table&gt;. À vous de voir&nbsp;!</p> +</div></pre> -<h4 id="Résultat">Résultat</h4> +<p>Le résultat ressemble à ceci :</p> -<p>{{EmbedLiveSample("Un_exemple_simple","200","200")}}</p> +<p>{{EmbedLiveSample("a_simple_example", "", 80)}}</p> -<h3 id="Un_exemple_mis_en_forme">Un exemple mis en forme</h3> +<h3 id="a_styled_example">Un exemple mis en forme</h3> -<p>Cet exemple crée une boîte avec une ombre en appliquant la mise en forme via du CSS sur l'élément <code><div></code>. On notera l'utilisation de l'attribut {{htmlattrxref("class")}} sur l'élément <code><div></code> afin d'appliquer la règle <code>"shadowbox"</code>.</p> +<p>Cet exemple crée une boîte avec une ombre en appliquant la mise en forme via du CSS sur l'élément <code><div></code>. On notera l'utilisation de l'attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> sur l'élément <code><div></code> afin d'appliquer la règle <code>"shadowbox"</code>.</p> -<h4 id="HTML_2">HTML</h4> +<h4 id="html">HTML</h4> <pre class="brush: html"><div class="shadowbox"> - <p>Voici un paragraphe très intéressant inscrit - dans une boîte avec une ombre.</p> + <p>Voici un paragraphe très intéressant inscrit dans une boîte + avec une ombre.</p> </div></pre> -<h4 id="CSS">CSS</h4> +<h4 id="css">CSS</h4> <pre class="brush: css">.shadowbox { width: 15em; @@ -68,87 +104,25 @@ translation_of: Web/HTML/Element/div background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc); }</pre> -<h4 id="Résultat_2">Résultat</h4> +<h4 id="result">Résultat</h4> -<p>{{EmbedLiveSample("Un_exemple_mis_en_forme", 650, 120)}}</p> +<p>{{EmbedLiveSample("a_styled_example", "", 150)}}</p> -<h2 id="Résumé_technique">Résumé technique</h2> +<h2 id="accessibility_concerns">Accessibilité</h2> -<table class="properties"> - <tbody> - <tr> - <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></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égorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Contenu autorisé</dfn></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>. Selon le WHATWG, si l'élément parent est un élément {{HTMLElement("dl")}}, un ou plusieurs éléments {{HTMLElement("dt")}} suivis par un ou plusieurs élément {{HTMLElement("dd")}} éventuellement entrecoupés par des éléments {{HTMLElement("script")}} ou {{HTMLElement("template")}}.</td> - </tr> - <tr> - <th scope="row"><dfn>Omission de balises</dfn></th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row"><dfn>Parents autorisés</dfn></th> - <td>Tout élément qui accepte un <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>. Selon le WHATWG, un élément {{HTMLElement("dl")}}.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Tous les rôles sont autorisés.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLDivElement")}}</td> - </tr> - </tbody> -</table> +<p>L'élément <code><div></code> possède un rôle ARIA implicite <a href="https://www.w3.org/TR/wai-aria-1.2/#generic"><code>generic</code></a> (plutôt qu'aucun rôle). Cela peut avoir un impact sur certaines combinaisons de déclarations ARIA qui nécessitent un élément descendant direct avec un rôle donné pour fonctionner correctement.</p> -<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('HTML WHATWG', 'grouping-content.html#the-div-element', '<div>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Aucune modification depuis la dernière dérivation.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '<div>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>L'attribut <strong><code>align</code></strong> est désormais considéré obsolète.</td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '<div>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td> </td> - </tr> - </tbody> -</table> +<h2 id="specifications">Spécifications</h2> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<p>{{Specifications}}</p> -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<p>{{Compat("html.elements.div")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>Les éléments dont la sémantique est liée au sectionnement du document : - <ul> - <li>{{HTMLElement("section")}}</li> - <li>{{HTMLElement("article")}}</li> - <li>{{HTMLElement("nav")}}</li> - <li>{{HTMLElement("header")}}</li> - <li>{{HTMLElement("footer")}}.</li> - </ul> - </li> - <li>{{HTMLElement("span")}} pour mettre en forme un contenu phrasé.</li> + <li>Les éléments de sectionnement sémantique : <a href="/fr/docs/Web/HTML/Element/section"><code><section></code></a>, <a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a>, <a href="/fr/docs/Web/HTML/Element/nav"><code><nav></code></a>, <a href="/fr/docs/Web/HTML/Element/header"><code><header></code></a>, <a href="/fr/docs/Web/HTML/Element/footer"><code><footer></code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/span"><code><span></code></a> pour la mise en forme du contenu du phrasé</li> </ul> diff --git a/files/fr/web/html/element/dl/index.html b/files/fr/web/html/element/dl/index.html index 44c315b040..963cb4a33b 100644 --- a/files/fr/web/html/element/dl/index.html +++ b/files/fr/web/html/element/dl/index.html @@ -2,29 +2,68 @@ title: '<dl> : l''élément de liste de descriptions' slug: Web/HTML/Element/dl tags: + - Definition List + - Description list - Element - HTML + - HTML grouping content + - HTML:Flow content + - HTML:Palpable Content - Reference - Web translation_of: Web/HTML/Element/dl +browser-compat: html.elements.dl --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><dl></code></strong> représente une liste de descriptions sous la forme d'une liste de paires associant des termes (fournis par des éléments {{HTMLElement("dt")}}) et leurs descriptions ou définitions (fournies par des éléments {{HTMLElement("dd")}}). On utilisera par exemple cet élément pour implémenter un glossaire.</p> +<p>L'élément HTML <strong><code><dl></code></strong> représente une liste de descriptions sous la forme d'une liste de paires associant des termes (fournis par des éléments <a href="/fr/docs/Web/HTML/Element/dt"><code><dt></code></a>) et leurs descriptions ou définitions (fournies par des éléments <a href="/fr/docs/Web/HTML/Element/dd"><code><dd></code></a>). On utilisera par exemple cet élément pour implémenter un glossaire.</p> <div>{{EmbedInteractiveExample("pages/tabbed/dl.html", "tabbed-standard")}}</div> -<p 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> !</p> - -<h2 id="Attributs">Attributs</h2> +<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 de flux</a> et, si les éléments enfants de <code><dl></code> incluent une paire avec un nom et une valeur, du <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td> + <p>Zéro ou plusieurs groupes composés d'un ou plusieurs éléments <a href="/fr/docs/Web/HTML/Element/dt"><code><dt></code></a>, chacun suivi par un ou plusieurs éléments <a href="/fr/docs/Web/HTML/Element/dd"><code><dd></code></a> entre lesquels on pourra éventuellement avoir des éléments <a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a> et <a href="/fr/docs/Web/HTML/Element/template"><code><template></code></a>.</p> + + <p>Selon le WHATWG : un ou plusieurs éléments <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> éventuellement entrecoupés d'éléments <a href="/fr/docs/Web/HTML/Element/script"><code><script></code></a> ou <a href="/fr/docs/Web/HTML/Element/template"><code><template></code></a>.</p> + </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 acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_de_flux">contenu de flux</a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><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><a href="https://w3c.github.io/aria/#group">group</a>, <code><a href="/fr/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></code>, <code><a href="https://w3c.github.io/aria/#none">none</a></code>, <a href="https://w3c.github.io/aria/#presentation">presentation</a></td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLDListElement"><code>HTMLDListElement</code></a></td> + </tr> + </tbody> +</table> -<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +<h2 id="attributes">Attributs</h2> -<h2 id="Exemples">Exemples</h2> +<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> -<h3 id="Un_seul_terme_et_une_seule_définition">Un seul terme et une seule définition</h3> +<h2 id="examples">Exemples</h2> -<h4 id="HTML">HTML</h4> +<h3 id="single_term_and_description">Un seul terme et une seule définition</h3> <pre class="brush: html"><dl> <dt>Firefox</dt> @@ -34,16 +73,11 @@ translation_of: Web/HTML/Element/dl volontaires. </dd> <!-- D'autres termes et leurs descriptions --> -</dl> -</pre> - -<h4 id="Résultat">Résultat</h4> - -<p>{{EmbedLiveSample("Un_seul_terme_et_une_seule_définition","400","200")}}</p> +</dl></pre> -<h3 id="Plusieurs_termes_avec_une_même_définition">Plusieurs termes avec une même définition</h3> +<p>{{EmbedLiveSample("single_term_and_description", "", 120)}}</p> -<h4 id="HTML_2">HTML</h4> +<h3 id="multiple_terms_single_description">Plusieurs termes avec une même définition</h3> <pre class="brush: html"><dl> <dt>Firefox</dt> @@ -55,16 +89,11 @@ translation_of: Web/HTML/Element/dl volontaires. </dd> <!-- D'autres termes et leurs définitions --> -</dl> -</pre> - -<h4 id="Résultat_2">Résultat</h4> - -<p>{{EmbedLiveSample("Plusieurs_termes_avec_une_même_définition","400","200")}}</p> +</dl></pre> -<h3 id="Un_seul_terme_avec_plusieurs_définitions">Un seul terme avec plusieurs définitions</h3> +<p>{{EmbedLiveSample("multiple_terms_single_description", "", 180)}}</p> -<h4 id="HTML_3">HTML</h4> +<h3 id="single_term_multiple_descriptions">Un seul terme avec plusieurs définitions</h3> <pre class="brush: html"><dl> <dt>Firefox</dt> @@ -79,121 +108,84 @@ translation_of: Web/HTML/Element/dl de l'Himalaya et de la Chine méridionale. </dd> <!-- D'autres termes et leurs définitions --> -</dl> -</pre> +</dl></pre> + +<p>{{EmbedLiveSample("single_term_multiple_descriptions", "", 180)}}</p> -<h4 id="Résultat_3">Résultat</h4> +<h3 id="multiple_terms_and_descriptions">Termes et descriptions multiples</h3> -<p>{{EmbedLiveSample("Un_seul_terme_avec_plusieurs_définitions","400","200")}}</p> +<p>Il est également possible de définir plusieurs termes avec plusieurs descriptions correspondantes, en combinant les exemples ci-dessus.</p> -<h3 id="Métadonnées">Métadonnées</h3> +<h3 id="metadata">Métadonnées</h3> <p>Les listes de définitions sont utiles lorsqu'on souhaite afficher des métadonnées sous forme d'une liste de clés-valeurs.</p> <pre class="brush: html"><dl> - <dt>Name</dt> - <dd>Godzilla</dd> - <dt>Born</dt> - <dd>1952</dd> - <dt>Birthplace</dt> - <dd>Japan</dd> - <dt>Color</dt> - <dd>Green</dd> + <dt>Nom</dt> + <dd>Godzilla</dd> + <dt>Né le</dt> + <dd>1952</dd> + <dt>Lieu de naissance</dt> + <dd>Japon</dd> + <dt>Couleur</dt> + <dd>Vert</dd> </dl></pre> -<div class="note"> -<p><strong>Astuce :</strong> Il peut être pratique de définir un séparateur clé/valeur en CSS3, par exemple : dt:after {content: ": ";}.</p> -</div> +<p>Conseil : il peut être pratique de définir un séparateur clé-valeur dans le CSS, par exemple :</p> -<h2 id="Notes">Notes</h2> +<pre class="brush: css">dt::after { + content: ": "; +}</pre> -<p>Cet élément ne doit pas être utilisé (de même que les éléments {{HTMLElement("ul")}}), dans le seul but de créer une indentation sur la page. Bien que cela fonctionne parfaitement, c'est une pratique déconseillée qui mêle mise en forme et sémantique. Cela modifie le rôle que doivent avoir les listes de définitions.</p> +<h3 id="wrapping_name-value_groups_in_htmlelementdiv_elements">Intégration de groupes nom-valeur dans les éléments <code><div></code>.</h3> -<p>Pour changer l'indentation de la définition d'un terme, il faut utiliser la propriété <a href="/fr/docs/Web/CSS">CSS</a> {{cssxref("margin")}}.</p> +<p><a href="/fr/docs/Glossary/WHATWG">WHATWG</a> HTML permet d'envelopper chaque groupe nom-valeur d'un élément <a href="/fr/docs/Web/HTML/Element/dl"><code><dl></code></a> dans un élément <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a>. Cela peut être utile lors de l'utilisation de <a href="/fr/docs/Web/HTML/Microdata">microdonnées</a>, ou lorsque les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a> s'appliquent à un groupe entier, ou encore à des fins de style.</p> -<h2 id="Accessibilité">Accessibilité</h2> +<pre class="brush: html"><dl> + <div> + <dt>Nom</dt> + <dd>Godzilla</dd> + </div> + <div> + <dt>Né le</dt> + <dd>1952</dd> + </div> + <div> + <dt>Lieu de naissance</dt> + <dd>Japon</dd> + </div> + <div> + <dt>Couleur</dt> + <dd>Vert</dd> + </div> +</dl></pre> -<p>Les lecteurs d'écran annoncent <code><dl></code> de façon différente. Certains lecteurs d'écran tels que VoiceOver sur iOS n'annonceront pas le fait que le contenu de <code><dl></code> est une liste. Il faut donc s'assurer que la relation entre les éléments de la liste est bien communiquée grâce aux contenus des éléments.</p> +<h2 id="notes">Notes</h2> -<ul> - <li><a href="https://s.codepen.io/aardrian/debug/NzGaKP"><code><dt></code> et <code><dd></code> sur CodePen</a></li> -</ul> +<p>Cet élément ne doit pas être utilisé (de même que les éléments <a href="/fr/docs/Web/HTML/Element/ul"><code><ul></code></a>), dans le seul but de créer une indentation sur la page. Bien que cela fonctionne parfaitement, c'est une pratique déconseillée qui mêle mise en forme et sémantique. Cela modifie le rôle que doivent avoir les listes de définitions.</p> -<p> </p> +<p>Pour changer l'indentation de la définition d'un terme, il faut utiliser la propriété <a href="/fr/docs/Web/CSS">CSS</a> <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>.</p> -<h2 id="Résumé_technique">Résumé technique</h2> +<h2 id="accessibility_concerns">Accessibilité</h2> -<table class="properties"> - <tbody> - <tr> - <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a> et, si les éléments enfants de <code><dl></code> incluent une paire avec un nom et une valeur, du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row"><dfn>Contenu autorisé</dfn></th> - <td> - <p>Zéro ou plusieurs groupes composés d'un ou plusieurs éléments {{HTMLElement("dt")}}, chacun suivi par un ou plusieurs éléments {{HTMLElement("dd")}} entre lesquels on pourra éventuellement avoir des éléments {{HTMLElement("script")}} et {{HTMLElement("template")}}.</p> - - <p>Selon le WHATWG : un ou plusieurs éléments {{HTMLElement("div")}} éventuellement entrecoupés d'éléments {{HTMLElement("script")}} ou {{HTMLElement("template")}}.</p> - </td> - </tr> - <tr> - <th scope="row">Omission de balises</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row"><dfn>Parents autorisés</dfn></th> - <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> - </tr> - <tr> - <th scope="row"><dfn>Interface DOM</dfn></th> - <td>{{domxref("HTMLDListElement")}}</td> - </tr> - </tbody> -</table> +<p>Les lecteurs d'écran annoncent <code><dl></code> de façon différente. À partir d'iOS 14, VoiceOver annoncera que le contenu de <code><dl></code> est une liste lors de la navigation au curseur (mais pas via la lecture générale). Il faut donc s'assurer que la relation entre les éléments de la liste est bien communiquée grâce aux contenus des éléments.</p> -<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('HTML WHATWG', 'semantics.html#the-dl-element', '<dl>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dl-element', '<dl>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dl>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +<ul> + <li><a href="https://codepen.io/aardrian/debug/NzGaKP">CodePen - Les camarades HTML : dt & dd</a> <small>(en)</small></li> + <li><a href="https://adrianroselli.com/2020/09/voiceover-on-ios-14-supports-description-lists.html">VoiceOver sous iOS 14 prend en charge les listes de descriptions</a> <small>(en)</small></li> + </ul> + +<h2 id="specifications">Spécifications</h2> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<p>{{Specifications}}</p> -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<p>{{Compat("html.elements.dl")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>{{HTMLElement("dt")}}</li> - <li>{{HTMLElement("dd")}}</li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/dt"><code><dt></code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/dd"><code><dd></code></a></li> </ul> diff --git a/files/fr/web/html/element/dt/index.html b/files/fr/web/html/element/dt/index.html index bf91a4d6e7..d4507d86fe 100644 --- a/files/fr/web/html/element/dt/index.html +++ b/files/fr/web/html/element/dt/index.html @@ -2,122 +2,78 @@ title: '<dt> : l''élément pour le terme d''une description' slug: Web/HTML/Element/dt tags: + - Definition + - Description list + - Definition Term + - Description Term - Element - HTML + - HTML grouping content - Reference + - Term - Web + - dt translation_of: Web/HTML/Element/dt +browser-compat: html.elements.dt --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><dt></code> </strong>identifie un terme dans une liste de définitions ou de descriptions. Cet élément n'apparaît qu'en tant qu'élément enfant d'un élément {{HTMLElement("dl")}} et est généralement suivi d'un élément {{HTMLElement("dd")}}.</p> - -<p>Cependant, on peut avoir plusieurs éléments <code><dt></code> à la suite qui indiquent que plusieurs termes seront définis par le même élément {{HTMLElement("dd")}} qui suivra.</p> +<p>L'élément HTML <strong><code><dt></code> </strong>identifie un terme dans une liste de définitions ou de descriptions. Cet élément n'apparaît qu'en tant qu'élément enfant d'un élément <a href="/fr/docs/Web/HTML/Element/dl"><code><dl></code></a> et est généralement suivi d'un élément <a href="/fr/docs/Web/HTML/Element/dd"><code><dd></code></a>. Plusieurs éléments <code><dt></code> qui se suivent indiqueront qu'ils partagent la définition/description fournie par le prochain élément <a href="/fr/docs/Web/HTML/Element/dd"><code><dd></code></a>.</p> <div>{{EmbedInteractiveExample("pages/tabbed/dt.html", "tabbed-standard")}}</div> -<p 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> !</p> - -<h2 id="Attributs">Attributs</h2> - -<p>On peut employer <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur cet élément.</p> - -<h2 id="Exemples">Exemples</h2> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><dl> - <dt>Firefox</dt> - <dd>Un navigateur Web libre, open-source, multi-plateforme - dévelopé par la Mozilla Corporation et des centaines de - volontaires.</dd> - <dd>Le petit panda, panda roux, panda fuligineux ou panda - éclatant (<em>Ailurus fulgens</em>), est un mammifère originaire - de l'Himalaya et de la Chine méridionale.</dd> - - <!-- D'autres termes et leurs définitions/descriptions --> -</dl> -</pre> - -<h4 id="Résultat">Résultat</h4> +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th> + <td>Aucune.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, sans élément <a href="/fr/docs/Web/HTML/Element/header"><code><header></code></a>, <a href="/fr/docs/Web/HTML/Element/footer"><code><footer></code></a>, sans contenu sectionnant et sans titre parmi les descendants.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Cet élément doit avoir une balise ouvrante. La balise de fin peut être omise si l'élément est immédiatement suivi par un autre élément <code><dd></code> ou par un élément <code><dt></code> ou s'il n'y a plus de contenu au sein de l'élément parent.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>L'élement doit être situé avant un élément <a href="/fr/docs/Web/HTML/Element/dt"><code><dt></code></a> ou <a href="/fr/docs/Web/HTML/Element/dd"><code><dd></code></a> et à l'intérieur d'un élément <a href="/fr/docs/Web/HTML/Element/dl"><code><dl></code></a>. Sinon (selon le WHATWG), au sein d'un élément <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> situé dans un élément <a href="/fr/docs/Web/HTML/Element/dl"><code><dl></code></a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><a href="https://w3c.github.io/aria/#term">term</a></td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td><code><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Listitem_role">listitem</a></code></td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a> Jusqu'à Gecko 1.9.2 inclus (Firefox 4), Firefox implémentait l'interface <a href="/fr/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> pour cet élément.</td> + </tr> + </tbody> +</table> -<p>{{EmbedLiveSample("Exemples","400","200")}}</p> +<h2 id="attributes">Attributs</h2> -<div class="note"> -<p><strong>Note :</strong> Pour d'autres exemples sur cet élément, on pourra consulter la page {{HTMLElement("dl")}}.</p> -</div> +<p>On peut employer <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a> sur cet élément.</p> -<h2 id="Résumé_technique">Résumé technique</h2> +<h2 id="examples">Exemples</h2> -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu" title="HTML/Content_categories">Catégories de contenu</a></th> - <td>Aucune.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content_categories#Phrasing_content">Contenu de flux</a>, sans élément {{HTMLElement("header")}}, {{HTMLElement("footer")}}, sans contenu sectionnant et sans titre parmi les descendants.</td> - </tr> - <tr> - <th scope="row">Omission de balises</th> - <td>Cet élément doit avoir une balise ouvrante. La balise de fin peut être omise si l'élément est immédiatement suivi par un autre élément <code><dd></code> ou par un élément <code><dt></code> ou s'il n'y a plus de contenu au sein de l'élément parent.</td> - </tr> - <tr> - <th scope="row">Parents autorisés</th> - <td>L'élement doit être situé avant un élément {{HTMLElement("dt")}} ou {{HTMLElement("dd")}} et à l'intérieur d'un élément {{HTMLElement("dl")}}. Sinon (selon le WHATWG), au sein d'un élément {{HTMLElement("div")}} situé dans un élément {{HTMLElement("dl")}}.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Aucun.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLElement")}} Jusqu'à Gecko 1.9.2 inclus (Firefox 4), Firefox implémentait l'interface <a href="/fr/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> pour cet élément.</td> - </tr> - </tbody> -</table> +<p>Pour des exemples, voir les <a href="/fr/docs/Web/HTML/Element/dl#examples">exemples fournis pour l'élément <code><dl></code></a>.</p> -<h2 id="Spécifications">Spécifications</h2> +<h2 id="specifications">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('HTML WHATWG', 'semantics.html#the-dt-element', '<dt>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-dt-element', '<dt>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.3', '<dt>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td></td> - </tr> - </tbody> -</table> +<p>{{Specifications}}</p> -<h2 id="Compatiblité_des_navigateurs">Compatiblité des navigateurs</h2> +<h2 id="browser_compatibility">Compatiblité des navigateurs</h2> -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> +<p>{{Compat}}</p> -<p>{{Compat("html.elements.dt")}}</p> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>Les autres éléments liés aux listes de définitions : - <ul> - <li>{{HTMLElement("dd")}}</li> - <li>{{HTMLElement("dl")}}</li> - </ul> - </li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/dd"><code><dd></code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/dl"><code><dl></code></a></li> </ul> diff --git a/files/fr/web/html/element/em/index.html b/files/fr/web/html/element/em/index.html index fb1de31a08..ea92b0a937 100644 --- a/files/fr/web/html/element/em/index.html +++ b/files/fr/web/html/element/em/index.html @@ -1,122 +1,99 @@ --- -title: '<em> : l''élément de mise en emphase' +title: '<em> : l''élément d''emphase' slug: Web/HTML/Element/em tags: - Element - HTML + - HTML text-level semantics - Reference - Web translation_of: Web/HTML/Element/em +browser-compat: html.elements.em --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><em></code></strong> (pour emphase) est utilisé afin de marquer un texte sur lequel on veut insister. Les éléments <code><em></code> peuvent être imbriqués, chaque degré d'imbrication indiquant un degré d'insistance plus élevé.</p> +<p class="summary">L'élément HTML <strong><code><em></code></strong> (pour emphase) est utilisé afin de marquer un texte sur lequel on veut insister. Les éléments <code><em></code> peuvent être imbriqués, chaque degré d'imbrication indiquant un degré d'insistance plus élevé.</p> <div>{{EmbedInteractiveExample("pages/tabbed/em.html", "tabbed-shorter")}}</div> -<p 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> !</p> - -<h2 id="Attributs">Attributs</h2> +<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 de 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#palpable_content">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><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 du <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><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>Tous les rôles sont autorisés.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>. Jusqu'à Gecko 1.9.2 inclus (Firefox 4), Firefox implémentait l'interface <a href="/fr/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> pour cet élément.</td> + </tr> + </tbody> +</table> -<p>Comme tous les éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +<h2 id="attributes">Attributs</h2> -<h2 id="Exemples">Exemples</h2> +<p>Comme tous les éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> -<p>L'élément <code><em></code> est souvent utilisé pour indiquer un contraste, implicite ou explicite.</p> +<h2 id="Usage_notes">Notes d'utilisation</h2> -<h3 id="HTML">HTML</h3> +<p>L'élément <code><em></code> est destiné aux mots dont l'accent est souligné par rapport au texte environnant, ce qui est souvent limité à un ou plusieurs mots d'une phrase et affecte le sens de la phrase elle-même.</p> -<pre class="brush: html"><p> - Dans HTML5, ce qui était appelé contenu de <em>type bloc</em> est maintenant appelé contenu de <em>flux</em>. -</p></pre> +<p>Habituellement, cet élément est affiché avec une police italique. Cependant, il ne doit pas être utilisé pour appliquer un style italique ; pour la mise en forme, on utilisera l'élément <a href="/fr/docs/Web/HTML/Element/i"><code><i></code></a> ou des styles CSS. Pour marquer le titre d'une œuvre (livre, chanson, pièce, etc.), on utilisera l'élément <a href="/fr/docs/Web/HTML/Element/cite"><code><cite></code></a> ; il est aussi habituellement affiché avec une police italique, mais porte un sens différent. Enfin, on utilisera l'élément <a href="/fr/docs/Web/HTML/Element/strong"><code><strong></code></a> pour marquer un texte plus important que le texte qui l'entoure.</p> -<h3 id="Résultat">Résultat</h3> +<h3 id="i_vs._em"><i> ou <em> ?</h3> -<p>{{EmbedLiveSample("Exemples","100%","100")}}</p> +<p>Lorsqu'on débute en développement web, on peut être dérouté⋅e de voir plusieurs éléments qui produisent des résultats similaires. <code><em></code> et <code><i></code> sont un exemple courant, car ils mettent tous deux le texte en italique. Quelle est la différence ? Laquelle doit-on utiliser ?</p> -<h2 id="Notes"><strong>Notes</strong></h2> +<p>Par défaut, le résultat visuel est le même. Cependant, la signification sémantique est différente. L'élément <code><em></code> représente l'accentuation de son contenu, tandis que l'élément <code><i></code> représente le texte qui se détache de la prose normale, comme un mot étranger, les pensées d'un personnage fictif, ou lorsque le texte fait référence à la définition d'un mot au lieu de représenter son sens sémantique. (Le titre d'une œuvre, comme le nom d'un livre ou d'un film, devrait utiliser <code><cite></code>).</p> -<p>Habituellement, cet élément est affiché avec une police italique. Cependant, il ne doit pas être utilisé pour appliquer un style italique ; pour la mise en forme, on utilisera l'élément {{HTMLElement("i")}} ou des styles CSS. Pour marquer le titre d'une œuvre (livre, chanson, pièce, etc.), on utilisera l'élément {{HTMLElement("cite")}} ; il est aussi habituellement affiché avec une police italique, mais porte un sens différent. Enfin, on utilisera l'élément {{HTMLElement("strong")}} pour marquer un texte plus important que le texte qui l'entoure.</p> +<p>Cela signifie que le choix de l'option à utiliser dépend de la situation. Ni l'un ni l'autre ne sont destinés à des fins purement décoratives, c'est à cela que sert le style CSS.</p> -<h3 id="Italique_ou_mise_en_évidence">Italique ou mise en évidence ?</h3> +<p>Un exemple pour <code><em></code> pourrait être : « <em>Faites</em>-le déjà ! », ou : « Nous <em>devions</em> faire quelque chose à ce sujet ». Une personne ou un logiciel lisant le texte prononcerait les mots en italique avec une emphase, en utilisant l'accentuation verbale.</p> -<p>Pour les nouveaux développeurs, il est souvent perturbant d'avoir autant de façons différentes pour afficher du texte dans un site web. Parmi les ambiguïtés les plus répandues, l'italique et la mise en évidence ont une bonne place. Pourquoi utiliser <code><em></em></code> au lieu de <code><i></i></code> si ces deux éléments produisent à première vue le même résultat ?</p> +<p>Un exemple pour <code><i></code> pourrait être : « Le <i>Queen Mary</i> a pris la mer la nuit dernière ». Ici, il n'y a pas d'accentuation ou d'importance supplémentaire sur le mot « Queen Mary ». Il est simplement indiqué que l'objet en question n'est pas une reine nommée Mary, mais un navire nommé <em>Queen Mary</em>. Un autre exemple de <code><i></code> pourrait être : « Le mot <i>the</i> est un article ».</p> -<p>Eh bien ce n'est pas le même résultat : la mise en évidence porte un état logique, et l'italique est un état physique. Les états logiques séparent la mise en forme du contenu, et ainsi, peuvent être exprimés de façons très différentes, par exemple au lieu d'afficher un texte en italique, il pourrait être en rouge, ou dans une taille différente, ou surligné, ou même en gras. Il est plus logique de changer les propriétés de présentation de <code><em></code>, que celle de l'italique. L'italique est une mise en forme typographique ; il n'y a aucune séparation entre la présentation et le contenu (pour indiquer le titre d'une œuvre tel que le titre d'un film ou d'un livre, on utilisera plutôt l'élément {{HTMLElement("cite")}}).</p> +<h2 id="example">Exemple</h2> -<p>Par exemple, pour <code><em></code>, « Il suffit de le <em>faire</em> ! » ou « ça tient à <em>un</em> fil », une personne ou un logiciel pourrait traduire l'emphase par une mise en italique ou avec un autre mécanisme.</p> +<p>L'élément <code><em></code> est souvent utilisé pour indiquer un contraste, implicite ou explicite.</p> -<p>Pour <code><i></code>, « Le <em>Charles de Gaulle</em> a appareillé le 15 novembre. » traduit bien la seule mise en forme. Il ne s'agit pas de mettre l'accent sur le nom du navire mais bien de respecter une règle typographique.</p> +<pre class="brush: html"><p> + Dans HTML5, ce qui était appelé contenu de <em>type bloc</em> + est maintenant appelé contenu de <em>flux</em>. +</p></pre> -<h2 id="Résumé_technique">Résumé technique</h2> +<h3 id="result">Résultat</h3> -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_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égorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td><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>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>Tous les rôles sont autorisés.</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLElement")}}.<br> - Jusqu'à Gecko 1.9.2 inclus (Firefox 4), Firefox implémentait l'interface {{domxref("HTMLSpanElement")}} pour cet élément.</td> - </tr> - </tbody> -</table> +<p>{{EmbedLiveSample("example", "", 100)}}</p> -<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('HTML WHATWG', 'text-level-semantics.html#the-em-element', '<em>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-em-element', '<em>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<em>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td> </td> - </tr> - </tbody> -</table> +<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.em")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>{{HTMLElement("i")}}</li> + <li><a href="/fr/docs/Web/HTML/Element/i"><code><i></code></a></li> </ul> diff --git a/files/fr/web/html/element/embed/index.html b/files/fr/web/html/element/embed/index.html index 7ad376450f..21f1ee793d 100644 --- a/files/fr/web/html/element/embed/index.html +++ b/files/fr/web/html/element/embed/index.html @@ -3,132 +3,102 @@ title: '<embed> : l''élément de contenu externe embarqué' slug: Web/HTML/Element/embed tags: - Element + - Embedding Content + - External content - HTML + - HTML embedded content + - HTML5 + - Plugins - Reference + - Web + - embed translation_of: Web/HTML/Element/embed +browser-compat: html.elements.embed --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><embed></code> </strong>représente un point d'intégration pour une application externe ou pour du contenu interactif (autrement dit, pour un <em>plug-in</em>).</p> +<p class="summary">L'élément HTML <strong><code><embed></code></strong> permet d'intégrer du contenu externe à cet endroit dans le document. Le contenu peut être fourni par une application externe ou une autre source telle qu'un <i>plugin</i> du navigateur.</p> <div>{{EmbedInteractiveExample("pages/tabbed/embed.html", "tabbed-standard")}}</div> -<p 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> !</p> - -<div class="note"> -<p><strong>Note :</strong> Cet article ne traite que de l'élément faisant partie du HTML5. Il ne concerne pas la version précédente et non normalisée de cet élément.</p> +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Cet article ne traite que de l'élément faisant partie du HTML5. Il ne concerne pas la version précédente et non normalisée de cet élément.</p> </div> -<p>Il faut garder à l'esprit que la plupart des navigateurs ont dépréciés voire retirer la prise en charge des plugins. Aussi, mieux vaut ne pas utiliser sur <code><embed></code> si on souhaite qu'un site ou une application soit fonctionnelle sur un navigateur moyen.</p> +<p>Il faut garder à l'esprit que la plupart des navigateurs ont déprécié voire retiré la prise en charge des plugins. Aussi, mieux vaut ne pas utiliser sur <code><embed></code> si on souhaite qu'un site ou une application soit fonctionnelle sur un navigateur moyen.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories" title="HTML/Content_categories">Catégories de contenu</a></th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content" title="HTML/Content categories#Flow content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content" title="HTML/Content categories#phrasing_content">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#embedded_content">contenu intégré</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content">contenu interactif</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Aucun, cet élément est un élément vide.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Cet élément doit avoir une balise ouvrante mais ne doit pas avoir de balise fermante.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Tout élément qui accepte du contenu intégré.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><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><a href="https://w3c.github.io/aria/#application"><code>application</code></a>, <a href="https://w3c.github.io/aria/#document"><code>document</code></a>, <a href="https://w3c.github.io/aria/#img"><code>img</code></a>, <a href="https://w3c.github.io/aria/#none"><code>none</code></a>, <a href="https://w3c.github.io/aria/#presentation"><code>presentation</code></a></td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLEmbedElement"><code>HTMLEmbedElement</code></a></td> + </tr> + </tbody> +</table> -<h2 id="Attributs">Attributs</h2> +<h2 id="attributes">Attributs</h2> -<p>Cet élément possède <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +<p>Cet élément possède <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> <dl> - <dt>{{htmlattrdef("height")}}</dt> - <dd>La hauteur utilisée pour l'affichage de la ressource, exprimée en pixels CSS (uniquement des valeurs absolues, les pourcentages ne sont pas autorisés).</dd> - <dt>{{htmlattrdef("src")}}</dt> - <dd>L'URL de la ressource à intégrer.</dd> - <dt>{{htmlattrdef("type")}}</dt> - <dd>Le type MIME à utiliser pour sélectionner le plug-in à instancier.</dd> - <dt>{{htmlattrdef("width")}}</dt> - <dd>La largeur utilisée pour l'affichage de la ressource, exprimée en pixels CSS (uniquement des valeurs absolues, les pourcentages ne sont pas autorisés).</dd> + <dt><code id="attr-height">height</code></dt> + <dd>La hauteur utilisée pour l'affichage de la ressource, exprimée en <a href="https://drafts.csswg.org/css-values/#px">pixels CSS</a>. La valeur est absolue, les pourcentages ne sont pas autorisés.</dd> + <dt><code id="attr-src">src</code></dt> + <dd>L'URL de la ressource à intégrer.</dd> + <dt><code id="attr-type">type</code></dt> + <dd>Le type MIME à utiliser pour sélectionner le plugin à instancier.</dd> + <dt><code id="attr-width">width</code></dt> + <dd>La largeur utilisée pour l'affichage de la ressource, exprimée en <a href="https://drafts.csswg.org/css-values/#px">pixels CSS</a>. La valeur est absolue, les pourcentages ne sont pas autorisés.</dd> </dl> -<h2 id="Notes_d'utilisation">Notes d'utilisation</h2> - -<p>Il est possible d'utiliser la propriété CSS {{cssxref("object-position")}} afin d'ajuster la position de l'objet embarqué au sein de la <em>frame</em> et la propriété CSS {{cssxref("object-fit")}} afin de contrôler la façon dont la taille de l'objet est ajustée par rapport à celle de la <em>frame</em>.</p> - -<h2 id="Exemples">Exemples</h2> +<h2 id="usage_notes">Notes d'utilisation</h2> -<h3 id="HTML">HTML</h3> +<p>Il est possible d'utiliser la propriété CSS <a href="/fr/docs/Web/CSS/object-position"><code>object-position</code></a> afin d'ajuster la position de l'objet embarqué au sein de la <em>frame</em> et la propriété CSS <a href="/fr/docs/Web/CSS/object-fit"><code>object-fit</code></a> afin de contrôler la façon dont la taille de l'objet est ajustée par rapport à celle de la <em>frame</em>.</p> -<pre class="brush: html"><embed type="video/quicktime" src="film.mov" width="640" height="480"> -</pre> +<h2 id="examples">Exemple</h2> -<h3 id="Résultat">Résultat</h3> +<pre class="brush: html"><embed type="video/quicktime" src="film.mov" width="640" height="480" title="Titre de ma vidéo"></pre> -<p>{{EmbedLiveSample("Exemples","650","490")}}</p> +<h2 id="accessibility_concerns">Accessibilité</h2> -<h2 id="Résumé_technique">Résumé technique</h2> +<p>Utilisez l'attribut <a href="/fr/docs/Web/HTML/Global_attributes/title"><code>title</code></a> sur un élément <code>embed</code> pour étiqueter son contenu afin que les personnes naviguant avec une technologie d'assistance telle qu'un lecteur d'écran puissent comprendre ce qu'il contient. La valeur du titre doit décrire de manière concise le contenu intégré. Sans titre, il se peut qu'elles ne soient pas en mesure de déterminer quel est son contenu intégré. Ce changement de contexte peut être source de confusion et de perte de temps, en particulier si l'élément <code>embed</code> contient du contenu interactif comme de la vidéo ou de l'audio.</p> -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu" title="HTML/Content_categories">Catégories de contenu</a></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content categories#Flow content">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9" title="HTML/Content categories#Phrasing content">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_int%C3%A9gr%C3%A9">contenu intégré</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_interactif">contenu interactif</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td>Aucun, cet élément est un élément vide.</td> - </tr> - <tr> - <th scope="row">Omission de balises</th> - <td>Cet élément doit avoir une balise ouvrante mais ne doit pas avoir de balise fermante.</td> - </tr> - <tr> - <th scope="row">Parents autorisés</th> - <td>Tout élément qui accepte du contenu intégré.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("img")}}, {{ARIARole("presentation")}}</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLEmbedElement")}}</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('HTML WHATWG', 'embedded-content.html#the-embed-element', '<embed>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-embed-element', '<embed>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<h2 id="specifications">Spécifications</h2> -<div class="note"> -<p><strong>Note</strong> : Avant Firefox 45, Firefox n'affichait pas le contenu HTML de la ressource mais utilisait un message générique indiquant que le contenu nécessitait un plugin (cf. {{bug("730768")}}).</p> -</div> +<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.embed")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>Les autres éléments HTML utilisés pour intégrer différents types de contenu : - <ul> - <li>{{HTMLElement("audio")}}</li> - <li>{{HTMLElement("canvas")}}</li> - <li>{{HTMLElement("iframe")}}</li> - <li>{{HTMLElement("img")}}</li> - <li>{{MathMLElement("math")}}</li> - <li>{{HTMLElement("object")}}</li> - <li>{{SVGElement("svg")}}</li> - <li>{{HTMLElement("video")}}</li> - </ul> - </li> + <li>D'autres éléments sont utilisés pour intégrer du contenu de différents types, notamment <a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a>, <a href="/fr/docs/Web/HTML/Element/canvas"><code><canvas></code></a>, <a href="/fr/docs/Web/HTML/Element/iframe"><code><iframe></code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code><img></code></a>, <a href="/fr/docs/Web/MathML/Element/math"><code><math></code></a>, <a href="/fr/docs/Web/HTML/Element/object"><code><object></code></a>, <a href="/fr/docs/Web/SVG/Element/svg"><code><svg></code></a>, and <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a>.</li> + <li>Positionnement et dimensionnement du contenu intégré dans son cadre : <a href="/fr/docs/Web/CSS/object-position"><code>object-position</code></a> and <a href="/fr/docs/Web/CSS/object-fit"><code>object-fit</code></a></li> </ul> diff --git a/files/fr/web/html/element/fieldset/index.html b/files/fr/web/html/element/fieldset/index.html index acbab754cb..3187ec76bd 100644 --- a/files/fr/web/html/element/fieldset/index.html +++ b/files/fr/web/html/element/fieldset/index.html @@ -3,74 +3,74 @@ title: '<fieldset> : l''élément pour les ensembles de champs' slug: Web/HTML/Element/Fieldset tags: - Element - - Formulaires + - Forms - HTML + - HTML forms - Reference - Web translation_of: Web/HTML/Element/fieldset +browser-compat: html.elements.fieldset --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><fieldset></code></strong> est utilisé afin de regrouper plusieurs contrôles interactifs ainsi que des étiquettes ({{HTMLElement("label")}}) dans un formulaire web.</p> +<p class="summary">L'élément HTML <strong><code><fieldset></code></strong> est utilisé afin de regrouper plusieurs contrôles interactifs ainsi que des étiquettes (<a href="/fr/docs/Web/HTML/Element/Label"><code><label></code></a>) dans un formulaire HTML.</p> <div>{{EmbedInteractiveExample("pages/tabbed/fieldset.html", "tabbed-standard")}}</div> -<p 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> !</p> +<p>Comme on peut le voir dans l'exemple ci-avant, l'élément <code><fieldset></code> permet de regrouper une partie d'un formulaire HTML et d'associer une légende (<a href="/fr/docs/Web/HTML/Element/Legend"><code><legend></code></a>) décrivant ce groupe. Cet élément utilise quelques attributs et notamment <code>form</code> dont la valeur correspond à la valeur de l'attribut <code>id</code> d'un élément <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a> de la même page. De cette façon, on peut avoir un élément <code><fieldset></code> qui soit rattaché à un formulaire mais qui ne soit pas imbriqué dans ce formulaire. L'attribut <code>disabled</code> permet de désactiver l'élément <code><fieldset></code> ainsi que l'ensemble de son contenu via une seule valeur.</p> -<p>Comme on peut le voir dans l'exemple ci-avant, l'élément <code><fieldset></code> permet de regrouper une partie d'un formulaire HTML et d'associer une légende ({{htmlelement("legend")}}) décrivant ce groupe. Cet élément utilise quelques attributs et notamment <code>form</code> dont la valeur correspond à la valeur de l'attribut <code>id</code> d'un élément {{htmlelement("form")}} de la même page. De cette façon, on peut avoir un élément <code><fieldset></code> qui soit rattaché à un formulaire mais qui ne soit pas imbriqué dans ce formulaire. L'attribut <code>disabled</code> permet de désactiver l'élément <code><fieldset></code> ainsi que l'ensemble de son contenu via une seule valeur.</p> +<h2 id="attributes">Attributs</h2> -<h2 id="Attributs">Attributs</h2> - -<p>Cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +<p>Cet élément prend en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> <dl> - <dt>{{htmlattrdef("disabled")}}{{HTMLVersionInline(5)}}</dt> - <dd>Si cet attribut booléen est utilisé, les contrôles de formulaires des éléments descendants sont désactivés (ils ne peuvent pas être édités). Bien qu'ils ne soient pas éditables, les données de ces contrôles seront envoyées avec le formulaire. Ces contrôles ne recevront pas les évènements liés à la navigations (tels que ceux liés aux clics ou au focus). La plupart du temps, ces contrôles désactivés apparaissent comme grisés. On notera que les éléments de formulaires au sein de l'élément {{HTMLElement("legend")}} ne seront pas désactivés.</dd> - <dt>{{htmlattrdef("form")}}</dt> - <dd>La valeur de cet attribut correspond à la valeur de l'attribut <code>id</code> de l'élément {{HTMLElement("form")}} auquel il est rattaché. La valeur par défaut est l'identifiant du plus proche élément {{HTMLElement("form")}} dont l'élément <code><fieldset></code> est le descendant.</dd> - <dt>{{htmlattrdef("name")}}</dt> - <dd>Le nom associé au groupe. - <div class="note"><strong>Note :</strong> L'étiquette du groupe de contrôle est donné par le premier élément enfant {{HTMLElement("legend")}} du <code><fieldset></code>.</div> - </dd> + <dt><code id="attr-disabled">disabled</code></dt> + <dd>Si cet attribut booléen est utilisé, les contrôles de formulaires des éléments descendants sont désactivés (ils ne peuvent pas être édités). Bien qu'ils ne soient pas éditables, les données de ces contrôles seront envoyées avec le formulaire. Ces contrôles ne recevront pas les évènements liés à la navigation (tels que ceux liés aux clics ou au focus). La plupart du temps, ces contrôles désactivés apparaissent comme grisés. On notera que les éléments de formulaires au sein de l'élément <a href="/fr/docs/Web/HTML/Element/Legend"><code><legend></code></a> ne seront pas désactivés.</dd> + <dt><code id="attr-form">form</code></dt> + <dd>La valeur de cet attribut correspond à la valeur de l'attribut <code>id</code> de l'élément <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a> auquel il est rattaché. La valeur par défaut est l'identifiant du plus proche élément <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a> dont l'élément <code><fieldset></code> est le descendant. Attention, cet attribut peut être source de confusion, tout élément <code><input></code> contenu au sein du <code><fieldset></code> et qui devra être associé au formulaire devra également avoir l'attribut <code>form</code> explicitement défini. En JavaScript, on pourra utiliser la propriété <a href="/fr/docs/Web/API/HTMLFormElement/elements"><code>HTMLFormElement.elements</code></a> pour vérifier le bon rattachement des éléments au formulaire.</dd> + <dt><code id="attr-name">name</code></dt> + <dd>Le nom associé au groupe. + <div class="note"><strong>Note :</strong> L'étiquette du groupe de contrôle est donné par le premier élément enfant <a href="/fr/docs/Web/HTML/Element/Legend"><code><legend></code></a> du <code><fieldset></code>.</div> + </dd> </dl> -<h2 id="Mise_en_forme_avec_CSS">Mise en forme avec CSS</h2> +<h2 id="styling_with_css">Mise en forme avec CSS</h2> <p>L'élément <code><fieldset></code> est quelque peu particulier pour la mise en forme.</p> -<p>La valeur initiale de la propriété {{cssxref("display")}} pour cet élément est <code>block</code> et l'élément crée un contexte de formatage de bloc. Si l'élément <code><fieldset></code> est mis en forme avec une valeur <code>display</code> qui correspond à un style en ligne, celui-ci se comportera comme <code>inline-block</code> et sinon comme <code>block</code>. Par défaut, une bordure de 2 pixels ondulée entoure le contenu de l'élément et il y a un léger <em>padding</em>. Par défaut, l'élément a <code>min-inline-size: min-content</code>.</p> +<p>La valeur initiale de la propriété <a href="/fr/docs/Web/CSS/display"><code>display</code></a> pour cet élément est <code>block</code> et l'élément crée un <a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">contexte de formatage de bloc</a>. Si l'élément <code><fieldset></code> est mis en forme avec une valeur <code>display</code> qui correspond à un style en ligne, celui-ci se comportera comme <code>inline-block</code> et sinon comme <code>block</code>. Par défaut, une bordure de 2 pixels ondulée entoure le contenu de l'élément et il y a un léger <em>padding</em>. Par défaut, l'élément a <code>min-inline-size: min-content</code>.</p> -<p>Si un élément <code><legend></code> est présent, il est placé au dessus de la bordure située au début de l'axe de bloc. L'élément <code><legend></code> se réduit si besoin et établit également un contexte de formatage. Sa valeur <code>display</code> utilisée est <code>block</code> (autrement dit, on pourra le cibler avec <code>display: inline</code>, il continuera de se comporter comme <code>block</code>).</p> +<p>Si un élément <a href="/fr/docs/Web/HTML/Element/Legend"><code><legend></code></a> est présent, il est placé au-dessus de la bordure située au début de l'axe de bloc. L'élément <code><legend></code> se réduit si besoin et établit également un contexte de formatage. Sa valeur <code>display</code> utilisée est <code>block</code> (autrement dit, on pourra le cibler avec <code>display: inline</code>, il continuera de se comporter comme <code>block</code>).</p> <p>Une boîte anonyme contiendra le contenu de <code><fieldset></code> et héritera de certaines propriétés de <code><fieldset></code>. Si l'élément <code><fieldset></code> est mis en forme avec <code>display: grid</code> ou <code>display: inline-grid</code>, la boîte anonyme aura un contexte de formatage de grille. Si <code><fieldset></code> est mis en forme avec <code>display: flex</code> ou <code>display: inline-flex</code>, la boîte anonyme aura un contexte de formatage flexible. Dans tous les autres cas, la boîte anonyme aura un contexte de formatage de bloc.</p> -<div class="note"> -<p><strong>Note : </strong>À l'heure où nous écrivons ces lignes, Microsoft Edge et Google Chrome contiennent des bogues qui empêchent d'utiliser <a href="/fr/docs/Glossaire/Flexbox">les boîtes flexibles</a> et <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">les grilles</a> à l'intérieur d'un élément {{HTMLElement("fieldset")}}. <a href="https://github.com/w3c/csswg-drafts/issues/321">Cette <em>issue</em> GitHub</a> fournit les liens vers les différents bugs.</p> -</div> +<p>N'hésitez pas à donner au <code><fieldset></code> et au <code><legend></code> le style que vous souhaitez pour l'adapter au design de votre page.</p> + +<h2 id="examples">Exemples</h2> -<h2 id="Exemples">Exemples</h2> +<h3 id="simple_fieldset">Exemple simple</h3> -<h3 id="Exemple_simple">Exemple simple</h3> +<p>Cet exemple montre un <code><fieldset></code> très simple, avec un <code><legend></code>, et un seul contrôle à l'intérieur.</p> -<h4 id="HTML">HTML</h4> +<h4 id="html">HTML</h4> -<pre class="brush: html"><form action="test.php" method="post"> +<pre class="brush: html"><form action="#"> <fieldset> - <legend>Titre</legend> + <legend>Titre simple</legend> <input type="radio" name="radio" id="radio"> - <label for="radio">Cliquez moi</label> + <label for="radio">L'esprit de la radio</label> </fieldset> </form></pre> -<h4 id="Résultat">Résultat</h4> +<h4 id="result">Résultat</h4> -<p>{{EmbedLiveSample("Exemple_simple","100%","80")}}</p> +<p>{{EmbedLiveSample('simple_fieldset', '100%', '80')}}</p> -<h3 id="<fieldset>_désactivé"><code><fieldset></code> désactivé</h3> +<h3 id="disabled_fieldset"><fieldset> désactivé</h3> <p>Dans cet exemple, on voit comment l'attribut <code>disabled</code> permet de désactiver un élément <code><fieldset></code> et l'ensemble de ses éléments par la même occasion.</p> -<h4 id="HTML_2">HTML</h4> +<h4 id="html_2">HTML</h4> <pre class="brush: html"><form action="#"> <fieldset disabled> @@ -86,95 +86,58 @@ translation_of: Web/HTML/Element/fieldset </fieldset> </form></pre> -<h4 id="Résultat_2">Résultat</h4> +<h4 id="result_2">Résultat</h4> -<p>{{EmbedLiveSample('fieldset_désactivé', '100%', '110') }}</p> +<p>{{EmbedLiveSample('disabled_fieldset', '100%', '110') }}</p> -<h2 id="Résumé_technique">Résumé technique</h2> +<h2 id="technical_summary">Résumé technique</h2> <table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_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/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement">racine de sectionnement</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_associé_aux_formulaires">contenu énuméré</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_associé_aux_formulaires">élément relatif aux formulaires</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td>Un éventuel élément {{HTMLElement("legend")}} suivi par du contenu de flux.</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_de_flux">contenu de flux</a>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLFieldSetElement")}}</td> - </tr> - </tbody> + <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 de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#sectioning_root">racine de sectionnement</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#form_listed">contenu énuméré</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#form_listed">élément relatif aux formulaires</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Un éventuel élément <a href="/fr/docs/Web/HTML/Element/Legend"><code><legend></code></a> suivi par du contenu de flux.</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 du <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_de_flux">contenu de flux</a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><a href="https://w3c.github.io/aria/#group"><code>group</code></a></td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td><a href="https://w3c.github.io/aria/#radiogroup"><code>radiogroup</code></a>, <a href="https://w3c.github.io/aria/#presentation"><code>presentation</code></a>, <a href="https://w3c.github.io/aria/#none"><code>none</code></a></td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLFieldSetElement"><code>HTMLFieldSetElement</code></a></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('HTML WHATWG', 'forms.html#the-fieldset-element', '<fieldset>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Définition de l'élément <code>fieldset</code>.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#the-fieldset-element', '<fieldset>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.10', '<fieldset>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +<h2 id="specifications">Spécifications</h2> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<p>{{Specifications}}</p> -<div class="hidden">Le tableau de compatibilité de cette page 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.fieldset")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>Les éléments HTML relatifs aux formulaires : - <ul> - <li>{{HTMLElement("form")}}</li> - <li>{{HTMLElement("legend")}}</li> - <li>{{HTMLElement("label")}}</li> - <li>{{HTMLElement("button")}}</li> - <li>{{HTMLElement("select")}}</li> - <li>{{HTMLElement("datalist")}}</li> - <li>{{HTMLElement("optgroup")}}</li> - <li>{{HTMLElement("option")}}</li> - <li>{{HTMLElement("textarea")}}</li> - <li>{{HTMLElement("keygen")}}</li> - <li>{{HTMLElement("input")}}</li> - <li>{{HTMLElement("output")}}</li> - <li>{{HTMLElement("progress")}}</li> - <li>{{HTMLElement("meter")}}</li> - </ul> - </li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/Legend"><code><legend></code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/Label"><code><label></code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a></li> </ul> diff --git a/files/fr/web/html/element/figcaption/index.html b/files/fr/web/html/element/figcaption/index.html index d03cbf7e74..d7e245b9ed 100644 --- a/files/fr/web/html/element/figcaption/index.html +++ b/files/fr/web/html/element/figcaption/index.html @@ -4,105 +4,68 @@ slug: Web/HTML/Element/figcaption tags: - Element - HTML + - HTML grouping content - Reference - - Web translation_of: Web/HTML/Element/figcaption +browser-compat: html.elements.figcaption --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><figcaption></code></strong> (pour <em>figure caption</em> en anglais) permet d'indiquer un sous-titre, une légende, associé à une figure ou à une illustration (cette dernière étant représentée par l'élément {{HTMLElement("figure")}} qui est le parent direct de la légende). L'élément <code><figcaption></code> est optionnel ; s'il n'est pas présent, la figure n'aura pas de légende.</p> +<p class="summary">L'élément HTML <strong><code><figcaption></code></strong> représente une légende décrivant le reste du contenu de son élément parent <a href="/fr/docs/Web/HTML/Element/figure"><code><figure></code></a>.</p> <div>{{EmbedInteractiveExample("pages/tabbed/figcaption.html","tabbed-shorter")}}</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="Attributs">Attributs</h2> - -<p>Cet élément prend uniquement en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> - -<h2 id="Exemples">Exemples</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><!-- Une image avec une légende : figcaption --> -<figure> - <img src="https://developer.mozilla.org/static/img/favicon144.png" alt="Une superbe photo"> - - <figcaption>Une légende pour cette photo</figcaption> -</figure> -</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples","100%","120")}}</p> +<table class="properties"> + <tbody> + <tr> + <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th> + <td>Aucune.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_de_flux">Contenu de flux</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>Un élément <a href="/fr/docs/Web/HTML/Element/figure"><code><figure></code></a>, l'élément <code><figcaption></code> doit être le premier ou le dernier élément fils pour cet élément <code><figure></code>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><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><a href="https://w3c.github.io/aria/#group"><code>group</code></a>, <a href="https://w3c.github.io/aria/#none"><code>none</code></a>, <a href="https://w3c.github.io/aria/#presentation"><code>presentation</code></a></td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td> + </tr> + </tbody> +</table> -<div class="note"> -<p><strong>Note :</strong> Voir la page sur l'élément {{HTMLElement("figure") }} pour d'autres exemples portant sur <code><figcaption></code>.</p> -</div> +<h2 id="attributes">Attributs</h2> -<h2 id="Résumé_technique">Résumé technique</h2> +<p>Cet élément prend uniquement en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu" title="HTML/Content_categories">Catégories de contenu</a></th> - <td>Aucune.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content categories#Flow content">Contenu de flux</a>.</td> - </tr> - <tr> - <th scope="row">Tag omission</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Parents autorisés</th> - <td>Un élément {{HTMLElement("figure")}}, l'élément <code><figcaption></code> doit être le premier ou le dernier élément fils pour cet élément <code><figure></code>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLElement")}}</td> - </tr> - </tbody> -</table> +<h2 id="examples">Exemple</h2> -<h2 id="Spécifications">Spécifications</h2> +<p>Veuillez consulter la page <a href="/fr/docs/Web/HTML/Element/figure"><code><figure></code></a> pour des exemples sur <code><figcaption></code>.</p> -<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('HTML WHATWG', 'semantics.html#the-figcaption-element', '<figcaption>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figcaption-element', '<figcaption>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> +<h2 id="specifications">Spécifications</h2> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<p>{{Specifications}}</p> -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<p>{{Compat("html.elements.figcaption")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>{{HTMLElement("figure")}}.</li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/figure"><code><figure></code></a></li> </ul> diff --git a/files/fr/web/html/element/figure/index.html b/files/fr/web/html/element/figure/index.html index faeea41797..7ab8953ba1 100644 --- a/files/fr/web/html/element/figure/index.html +++ b/files/fr/web/html/element/figure/index.html @@ -1,38 +1,71 @@ --- -title: '<figure> : l''élément de figure' +title: '<figure> : l''élément de figure avec légende facultative' slug: Web/HTML/Element/figure tags: - Element - HTML + - HTML grouping content + - Information + - Presentation - Reference - - Web + - figure translation_of: Web/HTML/Element/figure +browser-compat: html.elements.figure --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><figure></code></strong> représente une figure (un schéma), qui peut être accompagné d'une légende grâce à l'élément {{HTMLElement("figcaption")}}. Il est normalement référencé de manière unique. C'est souvent une image, une illustration, un diagramme, un fragment de code ou un schéma auquel il est fait référence dans le texte principal mais qui peut être utilisé sur une autre page ou dans une annexe sans que cela affecte le contenu principal.</p> +<p class="summary">L'élément HTML <strong><code><figure></code></strong> représente un contenu autonome, éventuellement accompagné d'une légende facultative, qui est spécifiée à l'aide de l'élément <a href="/fr/docs/Web/HTML/Element/figcaption"><code><figcaption></code></a>. La figure, sa légende et son contenu sont référencés comme une seule unité.</p> <div>{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}</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> +<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 de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#sectioning_roots">racine de sectionnement</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Un élément <a href="/fr/docs/Web/HTML/Element/figcaption"><code><figcaption></code></a> suivi d'un <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a> ou du contenu de flux suivi d'un élément <a href="/fr/docs/Web/HTML/Element/figcaption"><code><figcaption></code></a> ou du contenu de flux.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Aucune, la balise ouvrante et la balise fermante sont toutes les deux obligatoires.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Tout élément qui accepte du <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Figure_Role"><code>figure</code></a></td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td>Sans descendant <a href="/fr/docs/Web/HTML/Element/figcaption"><code><figcaption></code></a> descendant : <a href="https://www.w3.org/TR/html-aria/#dfn-any-role">n'importe quel rôle</a>, sinon aucun rôle autorisé.</td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td> + </tr> + </tbody> +</table> -<h2 id="Attributs">Attributs</h2> +<h2 id="attributes">Attributs</h2> -<p>Cet élément prend uniquement en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +<p>Cet élément prend uniquement en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> -<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation</strong></h2> +<h2 id="usage_notes">Notes d'utilisation</h2> <ul> - <li>Bien que cet élément soit en lien avec le contenu principal, sa position est indépendante du contenu principal du document.</li> - <li><code><figure></code> est <a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement">une racine de sectionnement</a>, son contenu est donc exclu du plan général du document.</li> - <li>Une légende peut être associée avec l'élément <code><figure></code> en insérant un élément {{HTMLElement("figcaption")}} à l'intérieur (en premier ou dernier élément enfant). C'est le premier élément <code><figcaption></code> qui sera trouvé dans la figure qui sera affiché comme légende.</li> + <li>Généralement, un élément <code><figure></code> est utilisé pour une image, une illustration, un diagramme, un fragment de code ou autre qui est référencé depuis le flux principal du document. Toutefois, cet élément peut être déplacé vers une autre partie du document ou en annexe sans que cela ait un impact sur le flux principal.</li> + <li><code><figure></code> est <a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#sectioning_roots">une racine de sectionnement</a>, son contenu est donc exclu du plan général du document.</li> + <li>Une légende peut être associée avec l'élément <code><figure></code> en insérant un élément <a href="/fr/docs/Web/HTML/Element/figcaption"><code><figcaption></code></a> à l'intérieur (en premier ou dernier élément enfant). C'est le premier élément <code><figcaption></code> qui sera trouvé dans la figure qui sera affiché comme légende.</li> </ul> -<h2 id="Exemples">Exemples</h2> - -<h3 id="Premier_exemple">Premier exemple</h3> +<h2 id="examples">Exemples</h2> -<h4 id="HTML">HTML</h4> +<h3 id="images">Images</h3> <pre class="brush: html"><!-- Une simple image --> <figure> @@ -47,22 +80,17 @@ translation_of: Web/HTML/Element/figure src="https://developer.mozilla.org/static/img/favicon144.png" alt="Le logo de MDN."> <figcaption>Logo MDN</figcaption> -</figure> -</pre> - -<h4 id="Résultat">Résultat</h4> - -<p>{{EmbedLiveSample("Premier_exemple","100%","375")}}</p> +</figure></pre> -<h3 id="Extrait_de_code">Extrait de code</h3> +<div>{{EmbedLiveSample("images", "100%", 400)}}</div> -<h4 id="HTML_2">HTML</h4> +<h3 id="code_snippets">Extrait de code</h3> <pre class="brush: html"><figure> <figcaption>Obtenir les détails du navigateur</figcaption> <pre> function NavigatorExample(){ - var txt; + let txt; txt = "Nom de code: " + navigator.appCodeName; txt += "Nom du navigateur : " + navigator.appName; txt += "Version : " + navigator.appVersion ; @@ -72,117 +100,50 @@ translation_of: Web/HTML/Element/figure console.log("NavigatorExample", txt); } </pre> -</figure> -</pre> - -<h4 id="Résultat_2">Résultat</h4> - -<p>{{EmbedLiveSample("Extrait_de_code","100%","300")}}</p> +</figure></pre> -<h3 id="Citation">Citation</h3> +<div>{{EmbedLiveSample("code_snippets", "100%", 250)}}</div> -<h4 id="HTML_3">HTML</h4> +<h3 id="quotations">Citation</h3> <pre class="brush: html"><figure> - <figcaption> - <cite>Edsger Dijkstra : </cite> - </figcaption> - <p>« Si le débogage correspond au retrait de bogues, alors la programmation correspond à l'ajout de bogues. »</p> + <figcaption> + <cite>Edsger Dijkstra : </cite> + </figcaption> + <p>« Si le débogage correspond au retrait de bogues, + alors la programmation correspond à l'ajout de bogues. » + </p> </figure></pre> -<h4 id="Résultat_3">Résultat</h4> - -<p>{{EmbedLiveSample("Citation","100%","150")}}</p> - -<h3 id="Poème">Poème</h3> +<div>{{EmbedLiveSample("quotations","", 150)}}</div> -<h4 id="HTML_4">HTML</h4> +<h3 id="poems">Poème</h3> <pre class="brush: html"><figure> - <p> - Bid me discourse, I will enchant thine ear, - Or like a fairy trip upon the green, - Or, like a nymph, with long dishevell'd hair, - Dance on the sands, and yet no footing seen: - Love is a spirit all compact of fire, - Not gross to sink, but light, and will aspire. - </p> - <figcaption><cite>Venus and Adonis</cite>. - By: William Shakespeare</figcaption> + <p style="white-space:pre"> + Bid me discourse, I will enchant thine ear, + Or like a fairy trip upon the green, + Or, like a nymph, with long dishevell'd hair, + Dance on the sands, and yet no footing seen: + Love is a spirit all compact of fire, + Not gross to sink, but light, and will aspire. + </p> + <figcaption><cite>Venus and Adonis</cite>. + By: William Shakespeare</figcaption> </figure></pre> -<h4 id="Résultat_4">Résultat</h4> - -<p>{{EmbedLiveSample("Poème","100%","150")}}</p> - -<h2 id="Résumé_technique">Résumé technique</h2> +<div>{{EmbedLiveSample("poems", "100%", 260)}}</div> -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu" title="HTML/Content_categories">Catégories de contenu</a></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content categories#Flow content">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement" title="Sections and Outlines of an HTML5 document#Sectioning root">racine de sectionnement</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td>Un élément {{HTMLElement("figcaption")}} suivi d'un <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content categories#Flow content">contenu de flux</a> ou du contenu de flux suivi d'un élément {{HTMLElement("figcaption")}} ou du contenu de flux.</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_de_flux" title="HTML/Content categories#Flow content">contenu de flux</a>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLElement")}}</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('HTML WHATWG', 'semantics.html#the-figure-element', '<figure>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5.2', 'grouping-content.html#the-figure-element', '<figure>')}}</td> - <td>{{Spec2('HTML5.2')}}</td> - <td>Aucune modification depuis HTML 5.0.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-figure-element', '<figure>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> +<h2 id="specifications">Spécifications</h2> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<p>{{Specifications}}</p> -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<p>{{Compat("html.elements.figure")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>{{HTMLElement("figcaption")}}</li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/figcaption"><code><figcaption></code></a></li> </ul> diff --git a/files/fr/web/html/element/font/index.html b/files/fr/web/html/element/font/index.html index cb7cab147f..bbb5f2386f 100644 --- a/files/fr/web/html/element/font/index.html +++ b/files/fr/web/html/element/font/index.html @@ -1,46 +1,55 @@ --- -title: <font> +title: '<font> : l''élément de police' slug: Web/HTML/Element/font tags: - Element - HTML - - Obsolete + - Deprecated - Reference - Web translation_of: Web/HTML/Element/font +browser-compat: html.elements.font --- -<div>{{obsolete_header}}{{HTMLRef}}</div> +<div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><font></code></strong> définit la taille du texte, sa couleur et la police utilisée.</p> +<div class="notecard deprecated"> + <p><b>Obsolète</b></p> + <p>Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la prendre en charge, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications web l'utilisant peuvent cesser de fonctionner à tout moment.</p> +</div> + +<p>L'élément HTML <strong><code><font></code></strong> définit la taille, la couleur et la police de son contenu.</p> -<div class="warning"> -<p><em><strong>Attention !</strong> </em><br> - <strong>Cet élément ne doit pas être utilisé ! </strong>Bien que cet élément ait été normalisé avec HTML 3.2, il a été déprécié avec HTML 4.01, au même moment que tous les éléments dont le rôle se limitaient à la présentation. Il a été rendu obsolète avec HTML5.</p> +<div class="notecard note"> + <p><b>Note d'utilisation :</b></p> -<p>À partir de HTML4, HTML ne doit plus définir les informations liées à la mise en forme (en dehors de l'élément {{HTMLElement("style")}} ou de l'attribut <strong><code>style</code></strong> de chaque élément). Pour tout nouveau développement web, le style (la forme) doit uniquement être décrit seulement par le <a href="/fr/docs/Web/CSS">CSS</a>.</p> + <p><strong>Ne pas utiliser cet élément !</strong> Bien qu'il ait été normalisé en HTML 3.2, il a été déprécié en HTML 4.01, en même temps que tous les éléments liés uniquement au style, puis rendu obsolète en HTML5.</p> -<p>Le comportement de l'élément {{HTMLElement("font")}} peut être obtenu, et même bien mieux contrôlé, en utilisant les propriétés CSS.</p> + <p>À partir de HTML 4, HTML ne véhicule plus d'informations de style (en dehors de l'élément <a href="/fr/docs/Web/HTML/Element/style"><code><style></code></a> ou de l'attribut <strong>style</strong> de chaque élément). Pour tout nouveau développement web, le style doit être écrit en utilisant le <a href="/fr/docs/Web/CSS">CSS</a> uniquement.</p> + + <p>L'ancien comportement de l'élément <a href="font"><code><font></code></a> peut être obtenu, et encore mieux contrôlé, en utilisant les propriétés CSS <a href="/fr/docs/Web/CSS/CSS_Fonts">relatives aux polices de caractères</a>.</p> </div> -<h2 id="Attributs">Attributs</h2> +<h2 id="attributes">Attributs</h2> -<p>Comme tous les autres éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +<p>Comme tous les autres éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> <dl> - <dt>{{htmlattrdef("color")}}</dt> - <dd>Cet attribut définit la couleur du texte en utilisant soit une couleur nommée, soit une couleur indiquée par le format hexadécimal #RRGGBB.</dd> - <dt>{{htmlattrdef("face")}}</dt> - <dd>Cet attribut contient une liste d'une ou plusieurs police, séparées par des virgules. Le texte est affiché avec la première police que le navigateur supporte. Si aucune des polices listées n'est installée sur le système, le navigateur prend habituellement la police proportionnelle, ou à taille fixe par défaut, du système.</dd> - <dt>{{htmlattrdef("size")}}</dt> - <dd>Cet attribut indique la taille du texte par une valeur numérique ou relative. Les valeurs numériques vont de <code>1</code> à <code>7</code>, <code>1</code> étant la plus petite taille et <code>3</code> la taille par défaut. Il peut être défini en utilisant une valeur relative, comme <code>+2</code> ou <code>-3</code>, qui est relative par rapport à la valeur de l'attribut {{htmlattrxref("size", "basefont")}} de l'élément {{HTMLElement("basefont")}}, ou relatif à <code>3</code>, la valeur par défaut, si aucune existe.</dd> + <dt><code id="attr-color">color</code></dt> + <dd>Cet attribut définit la couleur du texte en utilisant soit une couleur nommée, soit une couleur indiquée par le format hexadécimal #RRGGBB.</dd> + <dt><code id="attr-face">face</code></dt> + <dd>Cet attribut contient une liste d'une ou plusieurs polices, séparées par des virgules. Le texte est affiché avec la première police que le navigateur supporte. Si aucune des polices listées n'est installée sur le système, le navigateur prend habituellement la police proportionnelle, ou à taille fixe par défaut, du système.</dd> + <dt><code id="attr-size">size</code></dt> + <dd>Cet attribut indique la taille du texte par une valeur numérique ou relative. Les valeurs numériques vont de <code>1</code> à <code>7</code>, <code>1</code> étant la plus petite taille et <code>3</code> la taille par défaut. Il peut être défini en utilisant une valeur relative, comme <code>+2</code> ou <code>-3</code>, qui est relative par rapport à la valeur de l'attribut <a href="/fr/docs/Web/HTML/Element/basefont#attr-size"><code>size</code></a> de l'élément <a href="/fr/docs/Web/HTML/Element/basefont"><code><basefont></code></a>, ou relatif à <code>3</code>, la valeur par défaut, si aucune existe.</dd> </dl> -<h2 id="Interface_DOM">Interface DOM</h2> +<h2 id="dom_interface">Interface DOM</h2> + +<p>Cet élément implément l'interface <a href="/fr/docs/Web/API/HTMLFontElement"><code>HTMLFontElement</code></a>.</p> -<p>Cet élément implément l'interface {{domxref('HTMLFontElement')}}.</p> +<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.font")}}</p> +<p>{{Compat}}</p>
\ No newline at end of file diff --git a/files/fr/web/html/element/footer/index.html b/files/fr/web/html/element/footer/index.html index 66a20de631..1424e9896b 100644 --- a/files/fr/web/html/element/footer/index.html +++ b/files/fr/web/html/element/footer/index.html @@ -1,130 +1,92 @@ --- -title: <footer> +title: '<footer> : l''élément de pied de page ou de section' slug: Web/HTML/Element/footer tags: - Element - HTML + - HTML sections - Reference - - Web translation_of: Web/HTML/Element/footer +browser-compat: html.elements.footer --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><footer></code></strong> représente le pied de page de la section ou de la <a href="/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document#Racines_de_sectionnement">racine de sectionnement</a> la plus proche. Un pied de page ou de section contient habituellement des informations sur l'auteur de la section, les données relatives au droit d'auteur (<em>copyright</em>) ou les liens vers d'autres documents en relation.</p> +<p>L'élément HTML <strong><code><footer></code></strong> représente le pied de page de la <a href="/fr/docs/Web/Guide/HTML/Content_categories#sectioning_content">section</a> ou de la <a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#sectioning_root">racine de sectionnement</a> la plus proche. Un élément <code><footer></code> contient habituellement des informations sur l'autrice ou l'auteur de la section, les données relatives au droit d'auteur (<em>copyright</em>) ou les liens vers d'autres documents en relation.</p> <div>{{EmbedInteractiveExample("pages/tabbed/footer.html", "tabbed-standard")}}</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> +<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 de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a> sans élément descendant qui soit <code><footer></code> ou <a href="/fr/docs/Web/HTML/Element/header"><code><header></code></a>.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td>Aucune, la balise ouvrante et la balise fermante sont toutes les deux obligatoires.</td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td>Tout élément qui accepte du <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a>. Un élément <code><footer></code> ne doit pas descendre d'un élément <a href="/fr/docs/Web/HTML/Element/address"><code><address></code></a>, <a href="/fr/docs/Web/HTML/Element/header"><code><header></code></a> ou d'un autre élément <code><footer></code>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">contentinfo</a>, ou <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">pas de rôle correspondant</a> si un descendant d'un élément <a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a>, <a href="/fr/docs/Web/HTML/Element/aside"><code><aside></code></a>, <a href="/fr/docs/Web/HTML/Element/main"><code><main></code></a>, <a href="/fr/docs/Web/HTML/Element/nav"><code><nav></code></a> ou <a href="/fr/docs/Web/HTML/Element/section"><code><section></code></a>, ou un élément avec <code>role=<a href="/fr/docs/Web/Accessibility/ARIA/Roles/Article_Role">article</a></code>, <a href="/fr/docs/Web/Accessibility/ARIA/Roles/Complementary_role"><code>complementary</code></a>, <a href="/fr/docs/Web/Accessibility/ARIA/Roles/Main_role"><code>main</code></a>, <a href="/fr/docs/Web/Accessibility/ARIA/Roles/Navigation_Role"><code>navigation</code></a> ou <a href="/fr/docs/Web/Accessibility/ARIA/Roles/Region_role"><code>region</code></a>.</td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td><a href="https://w3c.github.io/aria/#group"><code>group</code></a>, <a href="https://w3c.github.io/aria/#none"><code>none</code></a>, <a href="https://w3c.github.io/aria/#presentation"><code>presentation</code></a></td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td> + </tr> + </tbody> +</table> -<h2 id="Attributs">Attributs</h2> +<h2 id="attributes">Attributs</h2> -<p>Comme tous les éléments HTML, cet élément accepte <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +<p>Comme tous les éléments HTML, cet élément accepte <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> -<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation</strong></h2> +<h2 id="usage_notes">Notes d'utilisation</h2> <ul> - <li>Les informations sur l'auteur doivent être placées dans un élément {{HTMLElement("address")}} et incluses dans l'élément <code><footer></code>.</li> - <li>L'élément <code><footer></code> n'a pas de contenu sectionnant et ne peut donc pas introduire une nouvelle section dans le <a href="/fr/docs/HTML/Sections_and_Outlines_of_an_HTML5_document">plan</a>.</li> + <li>Les informations sur l'autrice ou l'auteur doivent être placées dans un élément <a href="/fr/docs/Web/HTML/Element/address"><code><address></code></a> et incluses dans l'élément <code><footer></code>.</li> + <li>L'élément <code><footer></code> n'a pas de contenu sectionnant et ne peut donc pas introduire une nouvelle section dans le <a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">plan</a>.</li> </ul> -<h2 id="Exemples">Exemples</h2> - -<h3 id="HTML">HTML</h3> +<h2 id="examples">Exemples</h2> <pre class="brush: html"><footer> - Quelques informations de copyright ou bien quelques informations sur l'auteur de l'article. + Quelques informations de copyright ou bien quelques informations + sur l'auteur de l'article. </footer> </pre> -<h3 id="Résultat">Résultat</h3> +<h2 id="accessibility_concerns">Accessibilité</h2> -<p>{{EmbedLiveSample("Exemples","100%","120")}}</p> - -<h2 id="Accessibilité">Accessibilité</h2> - -<p>Le lecteur d'écran <a href="https://help.apple.com/voiceover/info/guide/">VoiceOver</a> rencontre un problème qui fait que <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics#SignpostsLandmarks">le balisage de rôle (landmark role)</a> n'est pas annoncé. Pour corriger ce point, on ajoutera <code>role="contentinfo"</code> à l'élément <code>footer</code>.</p> +<p>Avant la publication de Safari 13, le <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics#signpostslandmarks">rôle de repère</a> <code>contentinfo</code> n'était pas correctement exposé par <a href="https://help.apple.com/voiceover/info/guide/">VoiceOver</a>. Si vous devez prendre en charge les anciens navigateurs Safari, ajoutez <code>role="contentinfo"</code> à l'élément <code>footer</code> pour vous assurer que le landmark sera correctement exposé.</p> <ul> - <li><a href="https://bugs.webkit.org/show_bug.cgi?id=146930">Bug 146930 pour WebKit</a></li> + <li>En rapport : <a href="https://bugs.webkit.org/show_bug.cgi?id=146930">WebKit Bugzilla : 146930 - AX : Les éléments natifs HTML (header, footer, main, aside, nav) devraient fonctionner de la même manière que les points de repère ARIA, parfois ce n'est pas le cas</a>.</li> </ul> -<h2 id="Résumé_technique">Résumé technique</h2> +<h2 id="specifications">Spécifications</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égorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a> sans élément descendant qui soit <code><footer></code> ou {{HTMLElement("header")}}.</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_de_flux">contenu de flux</a>. Un élément <code><footer></code> ne doit pas descendre d'un élément {{HTMLElement("address")}}, {{HTMLElement("header")}} ou d'un autre élément <code><footer></code>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLElement")}}</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('HTML WHATWG', 'semantics#the-footer-element', '<footer>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'the-footer-element.html#the-footer-element', '<footer>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> +<p>{{Specifications}}</p> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> +<p>{{Compat}}</p> -<p>{{Compat("html.elements.footer")}}</p> - -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>Les autres éléments HTML en lien avec les sections : - <ul> - <li>{{HTMLElement("body")}}</li> - <li>{{HTMLElement("nav")}}</li> - <li>{{HTMLElement("article")}}</li> - <li>{{HTMLElement("aside")}}</li> - <li>{{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}</li> - <li>{{HTMLElement("hgroup")}}</li> - <li>{{HTMLElement("header")}}</li> - <li>{{HTMLElement("section")}}</li> - <li>{{HTMLElement("address")}}</li> - </ul> - </li> - <li class="last"><a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Plan et section d'un document HTML5</a></li> - <li class="last"><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">ARIA : le rôle <code>contentinfo</code></a></li> -</ul> + <li>Autres éléments liés à la section : <a href="/fr/docs/Web/HTML/Element/body"><code><body></code></a>, <a href="/fr/docs/Web/HTML/Element/nav"><code><nav></code></a>, <a href="/fr/docs/Web/HTML/Element/article"><code><article></code></a>, <a href="/fr/docs/Web/HTML/Element/aside"><code><aside></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h1></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h2></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h3></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h4></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h5></code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code><h6></code></a>, <a href="/fr/docs/Web/HTML/Element/hgroup"><code><hgroup></code></a>, <a href="/fr/docs/Web/HTML/Element/header"><code><header></code></a>, <a href="/fr/docs/Web/HTML/Element/section"><code><section></code></a>, <a href="/fr/docs/Web/HTML/Element/address"><code><address></code></a> ;</li> + <li><a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Utilisation des sections et des plans HTML</a></li> + <li class="last"><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">ARIA : rôle <code>contentinfo</code></a></li> + </ul> diff --git a/files/fr/web/html/element/form/index.html b/files/fr/web/html/element/form/index.html index 71dc418533..e3817ff92a 100644 --- a/files/fr/web/html/element/form/index.html +++ b/files/fr/web/html/element/form/index.html @@ -1,216 +1,188 @@ --- -title: <form> +title: '<form> : l''élément représentant un formulaire' slug: Web/HTML/Element/Form tags: - Element - - Formulaires - - Formulaires HTML + - Form Element + - Forms - HTML + - HTML Form Element + - HTML forms - Reference - Web translation_of: Web/HTML/Element/form +browser-compat: html.elements.form --- <div>{{HTMLRef}}</div> -<p>L'élément HTML <strong><code><form></code> </strong>représente une section d'un document qui contient des contrôles interactifs permettant à un utilisateur d'envoyer des données à un serveur web.</p> +<p class="summary">L'élément HTML <strong><code><form></code> </strong>représente un formulaire, c'est-à-dire une section d'un document qui contient des contrôles interactifs permettant à un utilisateur de fournir des informations.</p> <div>{{EmbedInteractiveExample("pages/tabbed/form.html", "tabbed-standard")}}</div> -<p 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> !</p> +<p>Il est possible d'utiliser les pseudo-classes CSS <a href="/fr/docs/Web/CSS/:valid"><code>:valid</code></a> et <a href="/fr/docs/Web/CSS/:invalid"><code>:invalid</code></a> pour mettre en forme un élément <code><form></code> selon que le contenu des éléments du formulaire est valide ou non.</p> -<p>Il est possible d'utiliser les pseudo-classes CSS {{cssxref(':valid')}} et {{cssxref(':invalid')}} pour mettre en forme un élément <code><form></code>.</p> +<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 de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a> qui ne contient pas d'élément <code><form></code>.</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 du <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a>.</td> + </tr> + <tr> + <th scope="row">Rôle ARIA implicite</th> + <td><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Form_Role"><code>form</code></a> si le formulaire a un <a href="https://www.w3.org/TR/accname-1.1/#dfn-accessible-name">nom accessible</a>, 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><a href="https://w3c.github.io/aria/#search"><code>search</code></a>, <a href="https://w3c.github.io/aria/#none"><code>none</code></a>, <a href="https://w3c.github.io/aria/#presentation"><code>presentation</code></a></td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td><a href="/fr/docs/Web/API/HTMLFormElement"><code>HTMLFormElement</code></a></td> + </tr> + </tbody> +</table> -<h2 id="Attributs">Attributs</h2> +<h2 id="attributes">Attributs</h2> -<p>Cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +<p>Cet élément prend en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> <dl> - <dt>{{htmlattrdef("accept")}} {{HTMLVersionInline(4)}} {{obsolete_inline}}</dt> - <dd>Cet attribut indique quels types de contenus sont acceptés par le serveur. Il peut y en avoir plusieurs, séparés par des virgules. - <div class="note"><strong>Note d'utilisation : </strong>Cet attribut a été retiré dans HTML5 et ne doit plus être utilisé. À la place, il faut utiliser l'attribut {{htmlattrxref("accept", "input")}} de l'élément {{HTMLElement("input")}}.</div> - </dd> - <dt>{{htmlattrdef("accept-charset")}}</dt> - <dd>Une liste des ensembles de caractères que le serveur accepte. Cette liste est délimitée par des espaces ou des virgules. Le navigateur les utilise dans l'ordre dans lequel ils ont été définis. La valeur par défaut est la chaîne de caractères réservée "UNKNOWN" ; dans ce cas, l'ensemble de caractères utilisé correspond à celui du document contenant l'élément {{HTMLElement("form")}}.<br> - Dans les versions précédentes de HTML, les différents ensembles de caractères pouvaient être délimités par des espaces ou des virgules. Ce n'est plus le cas en HTML5 où seuls les espaces sont autorisés.</dd> - <dt>{{htmlattrdef("action")}}</dt> - <dd>L'URI du programme qui traitera les informations soumises par le formulaire. Cette valeur peut être surchargée par un attribut {{htmlattrxref("formaction", "button")}} sur un élément {{HTMLElement("button")}} ou {{HTMLElement("input")}}.</dd> - <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt> - <dd>Cet attribut est un attribut non-standard utilisé sur iOS par Safari Mobile qui contrôle la façon dont la valeur du texte est automatiquement transcrite en majuscules lors de la saisie par l'utilisateur. Si l'attribut <code>autocapitalize</code> est défini sur un des descendants du formulaire, il surchargera la valeur de <code>autocapitalize</code> utilisée pour le formulaire. Les valeurs non-dépréciées sont disponibles pour iOS 5 et supérieurs. La valeur par défaut est <code>sentences</code>. Les valeurs possibles sont: - <ul> - <li><code>none</code> : La mise en majuscules est totalement désactivée</li> - <li><code>sentences</code> : Les premières lettres des phrases sont automatiquement passées en majuscules.</li> - <li><code>words</code> : La première lettre de chaque mot est automatiquement passée en majuscule.</li> - <li><code>characters</code> : Tous les caractères sont automatiquement passés en majuscules.</li> - <li><code>on</code> : {{deprecated_inline}} Déprécié depuis iOS 5.</li> - <li><code>off</code> : {{deprecated_inline}} Déprécié depuis iOS 5.</li> - </ul> - </dd> - <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline(5)}}</dt> - <dd>Cet attribut énuméré est utilisé pour définir le comportement du navigateur quant à l'autocomplétion des champs. Cet attribut peut être surchargé par chacun des éléments du formulaire. Il peut prendre deux valeurs : - <ul> - <li><code>on</code> : Le navigateur peut remplir automatiquement les valeurs d'après les précédentes informations qu'a entrées l'utilisateur lors d'usages antérieurs du formulaire.</li> - <li><code>off</code> : L'utilisateur doit remplir lui-même la valeur de chaque champ, à chaque utilisation du formulaire, ou le formulaire utilise son propre système d'auto-complétion ; le navigateur ne doit pas remplir automatiquement les valeurs.</li> - </ul> - - <p>En son absence, sa valeur par défaut est <code>on</code>. Les éléments du formulaire peuvent bien sûr outrepasser cette valeur via leur propre attribut <code><strong>autocomplete</strong></code>.</p> + <dt><code id="attr-accept">accept</code> {{deprecated_inline}}</dt> + <dd>Cet attribut indique quels types de contenus sont acceptés par le serveur. Il peut y en avoir plusieurs, séparés par des virgules. + <div class="notecard note"> + <p><b>Note :</b></p> + <p>Cet attribut a été retiré dans HTML5 et ne doit plus être utilisé. À la place, il faut utiliser l'attribut <a href="/fr/docs/Web/HTML/Element/Input#attr-accept"><code>accept</code></a> de l'élément <code><input type=file></code>.</p> + </div> + </dd> + <dt><code id="attr-accept-charset">accept-charset</code></dt> + <dd>Encodages de caractères séparés par des espaces que le serveur accepte. Le navigateur les utilise dans l'ordre dans lequel ils sont listés. La valeur par défaut signifie <a href="/fr/docs/Web/HTTP/Headers/Content-Encoding">le même encodage que celui de la page</a>.<br> + (Dans les versions précédentes de HTML, les codages de caractères pouvaient également être délimités par des virgules).</dd> + <dt><code id="attr-autocapitalize">autocapitalize</code> {{non-standard_inline}}</dt> + <dd>Cet attribut est un attribut non-standard utilisé sur iOS par Safari Mobile qui contrôle la façon dont la valeur du texte est automatiquement transcrite en majuscules lors de la saisie par l'utilisateur. Si l'attribut <code>autocapitalize</code> est défini sur un des descendants du formulaire, il surchargera la valeur de <code>autocapitalize</code> utilisée pour le formulaire. Les valeurs non-dépréciées sont disponibles pour iOS 5 et supérieurs. La valeur par défaut est <code>sentences</code>. Les valeurs possibles sont: + <ul> + <li><code>none</code> : La mise en majuscules est totalement désactivée</li> + <li><code>sentences</code> : Les premières lettres des phrases sont automatiquement passées en majuscules.</li> + <li><code>words</code> : La première lettre de chaque mot est automatiquement passée en majuscule.</li> + <li><code>characters</code> : Tous les caractères sont automatiquement passés en majuscules.</li> + </ul> + </dd> + <dt><code id="attr-autocomplete">autocomplete</code></dt> + <dd>Cet attribut énuméré est utilisé pour définir le comportement du navigateur quant à l'autocomplétion des champs. Cet attribut peut être surchargé par chacun des éléments du formulaire. Il peut prendre deux valeurs : + <ul> + <li><code>off</code> : Le navigateur ne peut pas compléter automatiquement les entrées. (Les navigateurs ont tendance à ignorer ce point pour les formulaires de connexion suspects ; voir <a href="/fr/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields">L'attribut autocomplete et les champs de connexion</a>.)</li> + <li><code>on</code> : Le navigateur peut compléter automatiquement les entrées.</li> + </ul> + </dd> + <dt><code id="attr-name">name</code></dt> + <dd>Le nom du formulaire. Il doit être unique parmi tous les formulaires d'un document, et ne doit pas être une chaîne de caractères vide.</dd> + <dt><code id="attr-rel">rel</code></dt> + <dd>Crée un hyperlien ou une annotation en fonction de la valeur, voir l'attribut <a href="/fr/docs/Web/HTML/Attributes/rel"><code id="attr-rel">rel</code></a> pour plus de détails.</dd> +</dl> - <div class="note"><strong>Note :</strong> Si autocomplete vaut <code>off</code> dans un formulaire parce que le document fournit son propre système d'auto-complétion, il faut aussi définir <code>autocomplete</code> à <code>off</code> pour chaque élément {{HTMLElement("input")}} du formulaire. Pour plus d'informations, voir <a href="#compatChartle">le tableau de compatibilité</a>.</div> - </dd> - <dt>{{htmlattrdef("enctype")}}</dt> - <dd>Lorsque la valeur de l'attribut <code>method</code> est <code>post</code>, cet attribut définit le <a href="https://fr.wikipedia.org/wiki/Type_MIME">type MIME</a> qui sera utilisé pour encoder les données envoyées au serveur. C'est un attribut énuméré qui peut prendre les valeurs suivantes : - <ul> - <li><code>application/x-www-form-urlencoded</code> : la valeur par défaut si l'attribut n'est pas défini</li> - <li><code>multipart/form-data</code> : la valeur utilisée par un élément {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut "file".</li> - <li><code>text/plain</code> {{HTMLVersionInline(5)}}, correspondant au <a class="external" href="https://fr.wikipedia.org/wiki/Type_MIME">type MIME</a> éponyme.</li> - </ul> - Cette valeur peut être surchargée par l'attribut {{htmlattrxref("formenctype", "button")}} des éléments {{HTMLElement("button")}} ou {{HTMLElement("input")}}.</dd> - <dt>{{htmlattrdef("method")}}</dt> - <dd>Cet attribut définit la méthode <a href="/fr/docs/Web/HTTP">HTTP</a> qui sera utilisée pour envoyer les données au serveur. C'est un attribut énuméré qui peut prendre les valeurs suivantes : - <ul> - <li><code>get</code> : correspondant à la <a href="/fr/docs/Web/HTTP/Methods/GET">méthode GET</a> du protocole HTTP. Les données du formulaires sont ajoutées à l'URI de l'attribut <code>action</code> avec '?' comme séparateur. L'URI ainsi composée est ensuite enovyée vers le serveur. On utilisera cette méthode lorsque le formulaire n'a pas d'effet de bord et qu'il ne contient que des caractères ASCII.</li> - <li><code>post</code> : correspondant à la <a href="/fr/docs/Web/HTTP/Methods/POST">méthode POST</a> du protocole HTTP, les données du formulaires sont incluses dans le corps du formulaire et envoyées vers le server.</li> - <li><code>dialog</code> : à utiliser lorsque le formulaire est placé dans un élément {{HTMLElement("dialog")}} afin de fermer la boîte de dialogue à l'envoi du formulaire.</li> - </ul> +<h3 id="attributes_for_form_submission">Attributs pour l'envoi de formulaires</h3> - <p>Si cet attribut n'est pas défini, la valeur par défaut utilisée est <code>get</code>. Cette valeur peut-être surchargée par l'attribut {{htmlattrxref("formmethod", "button")}} des éléments {{HTMLElement("button")}} ou {{HTMLElement("input")}}.</p> - </dd> - <dt>{{htmlattrdef("name")}}</dt> - <dd>Le nom du formulaire. Dans HTML 4, cet attribut est déprécié. (<code>id</code> doit être utilisé à la place). Il doit être unique parmi tous les formulaires d'un document, et ne doit pas être une chaîne de caractères vide en HTML5.</dd> - <dt>{{htmlattrdef("novalidate")}} {{HTMLVersionInline(5)}}</dt> - <dd>Cet attribut booléen indique si le formulaire doit être validé au moment de sa soumission. S'il n'est pas défini, le formulaire sera validé lors de sa soumission. Il peut être surchargé par l'attribut {{htmlattrxref("formnovalidate", "button")}} des éléments {{HTMLElement("button")}} ou {{HTMLElement("input")}} appartenant au formulaire.</dd> - <dt>{{htmlattrdef("target")}}</dt> - <dd>Un nom ou un mot-clé indiquant où afficher la réponse après avoir envoyé le formulaire. Dans HTML 4, c'est le nom, ou le mot-clé, d'une frame. Dans HTML5, c'est le nom, ou le mot-clé, d'un <em>contexte de navigation</em> (onglet, fenêtre, frame). Les mots-clés suivants ont un sens particulier : - <ul> - <li><code>_self</code> : charge la réponse dans la même frame HTML 4 (ou le même contexte de navigation HTML5) que l'actuelle. Il s'agit de la valeur par défaut quand cet attribut n'est pas défini ;</li> - <li><code>_parent</code> : charge la réponse dans le frameset parent HTML 4 de la frame actuelle, ou dans le contexte de navigation parent HTML5 de l'actuelle ;</li> - <li><code>_top</code> : HTML 4 : charge la réponse dans la fenêtre complête originale, annulant toutes les autres frames. HTML5 : charge la réponse dans le contexte de navigation le plus haut (c'est-à-dire le contexte de navigation qui est l'ancêtre de l'actuel, et qui n'a aucun parent). S'il n'y a pas de parent, l'option se comporte comme <code>_self</code> ;</li> - <li><code>_blank</code> : charge la réponse dans une fenêtre HTML 4 non nommée ou dans un contexte de navigation HTML5.</li> - </ul> +<p>Les attributs suivants contrôlent le comportement pendant l'envoi du formulaire.</p> - <p>HTML5 : Cette valeur peut être surchargée par l'attribut {{htmlattrxref("formtarget", "button")}} des éléments {{HTMLElement("button")}} ou {{HTMLElement("input")}}.</p> - </dd> +<dl> + <dt><code id="attr-action">action</code></dt> + <dd>L'URL qui traite l'envoi du formulaire. Cette valeur peut être remplacée par un attribut <a href="/fr/docs/Web/HTML/Element/Button#attr-formaction"><code>formaction</code></a> sur un <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a>, <code><a href="/fr/docs/Web/HTML/Element/Input/submit"><input type="submit"></a></code>, ou <code><a href="/fr/docs/Web/HTML/Element/Input/image"><input type="image"></a></code>.</dd> + <dt><code id="attr-enctype">enctype</code></dt> + <dd>Lorsque la valeur de l'attribut <code>method</code> est <code>post</code>, cet attribut définit le <a href="https://fr.wikipedia.org/wiki/Type_MIME">type MIME</a> qui sera utilisé pour encoder les données envoyées au serveur. C'est un attribut énuméré qui peut prendre les valeurs suivantes : + <ul> + <li><code>application/x-www-form-urlencoded</code> : la valeur par défaut si l'attribut n'est pas défini</li> + <li><code>multipart/form-data</code> : la valeur utilisée par un élément <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> avec l'attribut <code>type="file"</code>.</li> + <li><code>text/plain</code>, correspondant au <a href="https://fr.wikipedia.org/wiki/Type_MIME">type MIME</a> éponyme et utilisé à des fins de débogage.</li> + </ul> + + <p>Cette valeur peut être remplacée par un attribut <a href="/fr/docs/Web/HTML/Element/Button#attr-formenctype"><code>formenctype</code></a> sur un <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a>, <code><a href="/fr/docs/Web/HTML/Element/Input/submit"><input type="submit"></a></code>, ou <code><a href="/fr/docs/Web/HTML/Element/Input/image"><input type="image"></a></code>.</p> + </dd> + <dt><code id="attr-method">method</code></dt> + <dd>Cet attribut définit la méthode <a href="/fr/docs/Web/HTTP">HTTP</a> qui sera utilisée pour envoyer les données au serveur. C'est un attribut énuméré qui peut prendre les valeurs suivantes : + <ul> + <li><code>post</code> : La méthode <a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5">POST</a> ; données du formulaire envoyées comme <a href="/fr/docs/Web/API/Body">corps de la requête</a>.</li> + <li><code>get</code> : La méthode <a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3">GET</a> ; données du formulaire annexées à l'URL <code>action</code> avec un séparateur <code>?</code>. Utilisez cette méthode lorsque le formulaire <a href="/fr/docs/Glossary/Idempotent">n'a pas d'effets secondaires</a>.</li> + <li><code>dialog</code> : Lorsque le formulaire se trouve à l'intérieur d'un <a href="/fr/docs/Web/HTML/Element/dialog"><code><dialog></code></a>, ferme la boîte de dialogue à la soumission.</li> + </ul> + + <p>Si cet attribut n'est pas défini, la valeur par défaut utilisée est <code>get</code>. Cette valeur peut-être remplacée par un attribut <a href="/fr/docs/Web/HTML/Element/Button#attr-formmethod"><code>formmethod</code></a> sur un <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a>, <a href="/fr/docs/Web/HTML/Element/Input/submit"><code><input type="submit"></code></a>, ou <code><a href="/fr/docs/Web/HTML/Element/Input/image"><input type="image"></a></code>.</p> + </dd> + <dt><code id="attr-novalidate">novalidate</code></dt> + <dd>Cet attribut booléen indique si le formulaire doit être validé au moment de sa soumission. S'il n'est pas défini, le formulaire sera validé lors de sa soumission. Il peut être surchargé par l'attribut <a href="/fr/docs/Web/HTML/Element/Button#attr-formnovalidate"><code>formnovalidate</code></a> des éléments <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a> ou <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> appartenant au formulaire.</dd> + <dt><code id="attr-target">target</code></dt> + <dd>Un nom ou un mot-clé indiquant où afficher la réponse après avoir envoyé le formulaire. Dans HTML 4, c'est le nom, ou le mot-clé, d'une frame. Dans HTML5, c'est le nom, ou le mot-clé, d'un <em>contexte de navigation</em> (onglet, fenêtre, frame). Les mots-clés suivants ont un sens particulier : + <ul> + <li><code>_self</code> (par défaut) : Charger dans le même contexte de navigation que le contexte actuel.</li> + <li><code>_blank</code>: Chargement dans un nouveau contexte de navigation sans nom.</li> + <li><code>_parent</code>: Charge dans le contexte de navigation parent de celui en cours. S'il n'y a pas de parent, se comporte de la même manière que <code>_self</code>.</li> + <li><code>_top</code>: Charger dans le contexte de navigation de niveau supérieur (c'est-à-dire le contexte de navigation qui est un ancêtre du contexte actuel et qui n'a pas de parent). S'il n'y a pas de parent, se comporte de la même manière que <code>_self</code>.</li> + </ul> + + <p>Cette valeur peut être remplacée par un attribut <a href="/fr/docs/Web/HTML/Element/Button#attr-formtarget"><code>formtarget</code></a> sur un <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a>, <code><a href="/fr/docs/Web/HTML/Element/Input/submit"><input type="submit"></a></code>, ou <code><a href="/fr/docs/Web/HTML/Element/Input/image"><input type="image"></a></code>.</p> + <div class="notecard note"> + <p><b>Note :</b></p> + <p>La définition de <code>target="_blank"</code> sur les éléments <code><form></code> fournit implicitement le même comportement <code>rel</code> que la définition de <a href="/fr/docs/Web/HTML/Link_types/noopener"><code>rel="noopener"</code></a> qui ne définit pas <code>window.opener</code>.</p> + </div> + </dd> </dl> -<h2 id="Exemples">Exemples</h2> +<h2 id="examples">Exemples</h2> -<h3 id="HTML">HTML</h3> +<h3 id="html">HTML</h3> <pre class="brush: html"><!-- Formulaire simple qui enverra une requête GET --> -<form action="" method="get"> - <label for="GET-name">Nom :</label> - <input id="GET-name" type="text" name="name"> - <input type="submit" value="Enregistrer"> +<form> + <label>Nom : + <input name="submitted-name" autocomplete="name"> + </label> + <button>Sauvegarder</button> </form> -<!-- Formulaire simple qui enverra une requête POST --> -<form action="" method="post"> - <label for="POST-name">Nom :</label> - <input id="POST-name" type="text" name="name"> - <input type="submit" value="Enregistrer"> +<!-- Formulaire qui enverra une requête POST à l'URL actuelle --> +<form method="post"> + <label>Nom : + <input name="submitted-name" autocomplete="name"> + </label> + <button>Sauvegarder</button> </form> -<!-- Formulaire avec un fieldset, un legend, et un label --> -<form action="" method="post"> +<!-- Formulaire avec un ensemble de champs, une légende et une étiquette --> +<form method="post"> <fieldset> <legend>Titre</legend> - <input type="radio" name="radio" id="radio"> <label for="radio">Cliquez moi</label> + <label><input type="radio" name="radio">Sélectionnez-moi</label> </fieldset> -</form> -</pre> - -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples","100%",110)}}</p> +</form></pre> -<h2 id="Résumé_technique">Résumé technique</h2> +<h3 id="result">Résultat</h3> -<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>, contenu tangible.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a> qui ne contient pas d'élément <code><form></code>.</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_de_flux">contenu de flux</a>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLFormElement")}}</td> - </tr> - </tbody> -</table> +<div>{{EmbedLiveSample("examples", "100%", 130)}}</div> -<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('HTML WHATWG', 'forms.html#the-form-element', '<form>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#the-form-element', '<form>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.3', '<form>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +<h2 id="specifications">Spécifications</h2> -<h2 id="Compatibilité_des_navigateurs"><a id="compatChart">Compatibilité des navigateurs</a></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.form")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Le guide sur les formulaires HTML</a></li> - <li>Les autres éléments utilisés pour les formulaires - <ul> - <li>{{HTMLElement("button")}}</li> - <li>{{HTMLElement("datalist")}}</li> - <li>{{HTMLElement("fieldset")}}</li> - <li>{{HTMLElement("input")}}</li> - <li>{{HTMLElement("keygen")}}</li> - <li>{{HTMLElement("label")}}</li> - <li>{{HTMLElement("legend")}}</li> - <li>{{HTMLElement("meter")}}</li> - <li>{{HTMLElement("optgroup")}}</li> - <li>{{HTMLElement("option")}}</li> - <li>{{HTMLElement("output")}}</li> - <li>{{HTMLElement("progress")}}</li> - <li>{{HTMLElement("select")}}</li> - <li>{{HTMLElement("textarea")}}</li> - </ul> - </li> - <li>La méthode du DOM {{domxref("HTMLFormElement.elements")}} qui permet de récupérer une liste des éléments du formulaire.</li> - <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Form_Role">ARIA : le rôle <code>form</code></a></li> - <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Search_Role">ARIA : le rôle <code>search</code></a></li> -</ul> + <li><a href="/fr/docs/Learn/Forms">Guide des formulaires HTML</a></li> + <li>D'autres éléments qui sont utilisés lors de la création de formulaires : <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a>, <a href="/fr/docs/Web/HTML/Element/datalist"><code><datalist></code></a>, <a href="/fr/docs/Web/HTML/Element/Fieldset"><code><fieldset></code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a>, <a href="/fr/docs/Web/HTML/Element/Label"><code><label></code></a>, <a href="/fr/docs/Web/HTML/Element/Legend"><code><legend></code></a>, <a href="/fr/docs/Web/HTML/Element/Meter"><code><meter></code></a>, <a href="/fr/docs/Web/HTML/Element/Optgroup"><code><optgroup></code></a>, <a href="/fr/docs/Web/HTML/Element/Option"><code><option></code></a>, <a href="/fr/docs/Web/HTML/Element/output"><code><output></code></a>, <a href="/fr/docs/Web/HTML/Element/Progress"><code><progress></code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code><select></code></a>, <a href="/fr/docs/Web/HTML/Element/Textarea"><code><textarea></code></a>.</li> + <li>Obtenir une liste des éléments du formulaire : <a href="/fr/docs/Web/API/HTMLFormElement/elements"><code>HTMLFormElement.elements</code></a></li> + <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Form_Role">ARIA : rôle <code>form</code></a></li> + <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Search_role">ARIA : rôle <code>search</code></a></li> + </ul> diff --git a/files/fr/web/html/element/frame/index.html b/files/fr/web/html/element/frame/index.html index 753d4dc517..af1e94d6a3 100644 --- a/files/fr/web/html/element/frame/index.html +++ b/files/fr/web/html/element/frame/index.html @@ -1,68 +1,65 @@ --- -title: <frame> +title: '<frame> : l''élément représentant une zone particulière' slug: Web/HTML/Element/frame tags: - - Déprécié + - Deprecated - Element - HTML - Reference - Web translation_of: Web/HTML/Element/frame +browser-compat: html.elements.frame --- -<div>{{HTMLRef}}{{Deprecated_header}}</div> +<div>{{HTMLRef}}</div> -<p><strong><code><frame></code></strong> est un élément HTML qui définit une zone particulière dans laquelle un autre document HTML est affiché. Une <code><frame></code> doit être utilisée dans un élément {{HTMLElement("frameset")}}.</p> - -<div class="note"> -<p><strong>Note :</strong> On privilégiera l'utilisation de {{HTMLElement("iframe")}}.</p> +<div class="notecard deprecated"> + <p><b>Obsolète</b></p> + <p>Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications web l'utilisant peuvent cesser de fonctionner à tout moment.</p> </div> +<p>L'élément HTML <strong><code><frame></code></strong> définit une zone particulière dans laquelle un autre document HTML est affiché. Une <code><frame></code> (un « cadre ») doit être utilisée dans un élément <a href="/fr/docs/Web/HTML/Element/frameset"><code><frameset></code></a>.</p> + <p>Utiliser l'élément <code><frame></code> est déconseillé en raison de certains inconvénients tels que des problèmes de performance, et un manque d'accessibilité pour les utilisateurs de lecteurs d'écran.</p> -<h2 id="Attributs">Attributs</h2> +<h2 id="attributes">Attributs</h2> -<p>Comme tous les autres éléments HTML, cet élément prend en charge les <a href="/fr/docs/Web/HTML/Attributs_globaux">attributs universels</a>.</p> +<p>Comme tous les autres éléments HTML, cet élément prend en charge les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>.</p> <dl> - <dt>{{htmlattrdef("src")}}</dt> - <dd>Cet attribut indique le document qui doit être affiché dans la frame.</dd> - <dt>{{htmlattrdef("name")}}</dt> - <dd>Cet attribut sert à nommer les frames. Sans nommage, tous les liens seront ouverts dans la frame où ils se trouvent. Voir {{htmlattrxref("target","a")}} pour plus d'informations.</dd> - <dt>{{htmlattrdef("noresize")}}</dt> - <dd>Cet attribut empêche aux utilisateurs de redimensionner les frames.</dd> - <dt>{{htmlattrdef("scrolling")}}</dt> - <dd>Cet attribut définit l'existence des barres de défilement. Si cet attribut n'est pas utilisé, le navigateur mettre une barre de défilement si nécessaire. Il y a deux options : <code>yes</code> pour afficher les barres de défilement même quand ce n'est pas nécessaire, et <code>no</code> pour ne pas afficher les barres de défilement même quand c'est nécessaire.</dd> - <dt>{{htmlattrdef("marginheight")}}</dt> - <dd>Cet attribut définit la hauteur des marges entre les frames.</dd> - <dt>{{htmlattrdef("marginwidth")}}</dt> - <dd>Cet attribut définit la largeur des marges entre les frames.</dd> - <dt>{{htmlattrdef("frameborder")}}</dt> - <dd>Cet attribut permet de mettre des bordures à la frame.</dd> + <dt><code id="attr-src">src</code></dt> + <dd>Cet attribut indique le document qui doit être affiché dans la frame.</dd> + <dt><code id="attr-name">name</code></dt> + <dd>Cet attribut sert à nommer les frames. Sans nommage, tous les liens seront ouverts dans la frame où ils se trouvent. Voir <a href="/fr/docs/Web/HTML/Element/a#attr-target"><code>target</code></a> pour plus d'informations.</dd> + <dt><code id="attr-noresize">noresize</code></dt> + <dd>Cet attribut empêche aux utilisateurs de redimensionner les frames.</dd> + <dt><code id="attr-scrolling">scrolling</code></dt> + <dd>Cet attribut définit l'existence des barres de défilement. Si cet attribut n'est pas utilisé, le navigateur mettre une barre de défilement si nécessaire. Il y a deux options : <code>yes</code> pour afficher les barres de défilement même quand ce n'est pas nécessaire, et <code>no</code> pour ne pas afficher les barres de défilement même quand c'est nécessaire.</dd> + <dt><code id="attr-marginheight">marginheight</code></dt> + <dd>Cet attribut définit la hauteur des marges entre les frames.</dd> + <dt><code id="attr-marginwidth">marginwidth</code></dt> + <dd>Cet attribut définit la largeur des marges entre les frames.</dd> + <dt><code id="attr-frameborder">frameborder</code></dt> + <dd>Cet attribut permet de mettre des bordures à la frame.</dd> </dl> -<h2 id="Exemples">Exemples</h2> - -<h3 id="HTML">HTML</h3> +<h2 id="example">Exemple</h2> <pre class="brush: html"><frameset cols="50%,50%"> <frame src="https://developer.mozilla.org/fr/docs/Web/HTML/Element/iframe" /> <frame src="https://developer.mozilla.org/fr/docs/Web/HTML/Element/frame" /> -</frameset> -</pre> - -<h3 id="Résultat">Résultat</h3> +</frameset></pre> -<p>{{EmbedLiveSample("Exemples","100%","200")}}</p> +<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.frame")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>{{HTMLElement("frameset")}}</li> - <li>{{HTMLElement("iframe")}}</li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/frameset"><code><frameset></code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/iframe"><code><iframe></code></a></li> </ul> diff --git a/files/fr/web/html/element/frameset/index.html b/files/fr/web/html/element/frameset/index.html index cf4aed3aa3..f8674ebce1 100644 --- a/files/fr/web/html/element/frameset/index.html +++ b/files/fr/web/html/element/frameset/index.html @@ -1,53 +1,58 @@ --- -title: <frameset> +title: '<frameset> : l''élément contenant des frames' slug: Web/HTML/Element/frameset tags: - - Déprécié + - Deprecated - Element - HTML - Reference - Web translation_of: Web/HTML/Element/frameset +browser-compat: html.elements.frameset --- -<div>{{Deprecated_header}}{{HTMLRef}}</div> +<div>{{HTMLRef}}</div> -<p><strong><code><frameset></code></strong> est un élément HTML utilisé pour contenir les éléments {{HTMLElement("frame")}}.</p> +<div class="notecard deprecated"> + <p><b>Obsolète</b></p> + <p>Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la prendre en charge, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications web l'utilisant peuvent cesser de fonctionner à tout moment.</p> +</div> -<div class="note"><strong>Note :</strong> Les frames est maintenant découragé en faveur de {{HTMLElement("iframe")}}.</div> +<p>L'élément HTML <strong><code><frameset></code></strong> est utilisé pour contenir les éléments <a href="/fr/docs/Web/HTML/Element/frame"><code><frame></code></a>.</p> -<h2 id="Attributs">Attributs</h2> +<div class="notecard note"> + <p><b>Note :</b></p> + <p>L'utilisation de cadres étant désormais déconseillée au profit de l'utilisation de <a href="/fr/docs/Web/HTML/Element/iframe"><code><iframe></code></a>, cet élément n'est généralement pas utilisé par les sites web modernes.</p> +</div> -<p>Comme tous les autres éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p> +<h2 id="attributes">Attributs</h2> + +<p>Comme tous les autres éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p> <dl> - <dt>{{htmlattrdef("cols")}}</dt> - <dd>Cet attribut définit le nombre et la taille des espaces horizontaux dans un <code><frameset></code>.</dd> - <dt>{{htmlattrdef("rows")}}</dt> - <dd>Cet attribut définit le nombre et la taille des espaces verticaux dans un <code><frameset></code>.</dd> + <dt><code id="attr-cols">cols</code></dt> + <dd>Cet attribut définit le nombre et la taille des espaces horizontaux dans un <code><frameset></code>.</dd> + <dt><code id="attr-rows">rows</code></dt> + <dd>Cet attribut définit le nombre et la taille des espaces verticaux dans un <code><frameset></code>.</dd> </dl> -<h2 id="Exemples">Exemples</h2> - -<h3 id="HTML">HTML</h3> +<h2 id="example">Exemple</h2> <pre class="brush:html"><frameset cols="50%,50%"> <frame src="https://developer.mozilla.org/fr/docs/Web/HTML/Element/frameset" /> <frame src="https://developer.mozilla.org/fr/docs/Web/HTML/Element/frame" /> </frameset></pre> -<h3 id="Résultat">Résultat</h3> - -<p>{{EmbedLiveSample("Exemples","100%",200)}}</p> +<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.frameset")}}</p> +<p>{{Compat}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <ul> - <li>{{HTMLElement("frame")}}</li> - <li>{{HTMLElement("iframe")}}</li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/frame"><code><frame></code></a></li> + <li>L'élément <a href="/fr/docs/Web/HTML/Element/iframe"><code><iframe></code></a></li> </ul> diff --git a/files/fr/web/html/element/index.html b/files/fr/web/html/element/index.html index 554d337d1d..0f479e43f2 100644 --- a/files/fr/web/html/element/index.html +++ b/files/fr/web/html/element/index.html @@ -2,116 +2,131 @@ title: Référence des éléments HTML slug: Web/HTML/Element tags: + - Basic - Element - HTML - Reference - Web + - l10n:priority translation_of: Web/HTML/Element --- <div>{{HTMLSidebar("Elements")}}</div> -<p>Cette page énumère tous les éléments HTML, regroupés ici selon leurs fonctions. Sur la barre latérale présentée à gauche, vous pourrez trouver une liste suivant l'ordre alphabétique.</p> - -<h2 id="Éléments_de_base">Éléments de base</h2> - -<p>Les éléments de base constituent la colonne vertébrale de tout document HTML. Ils se trouvent sur toutes les pages web après la déclaration du <code>doctype</code> qui définit la version de (X)HTML utilisée par la page. Les éléments décrivant le contenu d'une page web se trouvent entre la balise ouvrante {{HTMLElement("html")}} et la balise fermante <code></html></code>. L'élément {{HTMLElement("html")}} est parfois appelé l'élément « racine ». Certains documents complexes peuvent avoir des racines spéciales appelées <em><a href="/fr/docs/Web/API/ShadowRoot">shadow-roots</a></em>.</p> +<p class="summary">Cette page répertorie tous les <a href="/fr/docs/Glossary/Element">éléments</a> <a href="/fr/docs/Glossary/HTML">HTML</a>, qui sont créés à l'aide de <a href="/fr/docs/Glossary/Tag">balises</a>. Ils sont regroupés par fonction pour vous aider à trouver facilement ce que vous avez en tête. Une liste alphabétique de tous les éléments est fournie dans la barre latérale de la page de chaque élément ainsi que de celle-ci.</p> <div class="note"> -<p><strong>Note :</strong> On pourra également consulter <a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_HTML">l'article introductif du guide HTML</a>.</p> + <p><b>Note :</b></p> + <p>Pour plus d'informations sur les bases des éléments et attributs HTML, voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML#elements_%e2%80%94_the_basic_building_blocks">la section sur les éléments dans l'article Introduction au HTML</a>.</p> </div> -<h3 id="Attributs">Attributs</h3> - -<p>La plupart des éléments peuvent, ou doivent, utiliser des informations supplémentaires afin de définir la façon dont ils fonctionnent. Ces détails sont fournis via des paires <code>nom="valeur"</code> qu'on appelle des <em>attributs</em> et qui sont inclus dans la balise ouvrante de l'élément. Chaque élément possède un ensemble d'attributs autorisés qui peuvent être utilisés (on se référera aux pages des différents éléments pour avoir le détail). En outre, il existe <a href="/fr/docs/Web/HTML/Attributs_universels">des attributs universels</a> qui peuvent être employés sur tous les éléments (dans certains cas, l'attribut n'aura pas d'impact sur l'élément). Les valeurs des attributs doivent être entourées de doubles quotes. On peut également définir <a href="/fr/docs/Web/HTML/Attributs_universels/data-*">des attributs de données</a> qui permettent de modéliser des données propriétaires, hors du cadre des spécifications HTML.</p> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre class="syntaxbox"><nomDeBalise attribut1="valeur" ... attributN="valeur">contenu de l'élément</nomDeBalise></pre> - -<h2 id="Racine_principale">Racine principale</h2> +<h2 id="main_root">Racine principale</h2> <p>{{HTMLRefTable("HTML Root Element")}}</p> -<h2 id="Métadonnées_du_document">Métadonnées du document</h2> +<h2 id="document_metadata">Métadonnées du document</h2> -<p>Les métadonnées contiennent des informations à propos de la page. On y retrouve les informations à propos des styles, des scripts et des données destinées à aider les moteurs de recherche et les navigateur. Les métadonnées relatives à la mise en forme ou aux scripts peuvent être définies à même la page ou sous la forme d'un lien vers un autre fichier.</p> +<p>Les métadonnées contiennent des informations à propos de la page. Elles comprennent des informations sur les styles, les scripts et les données qui aident les programmes (<a href="/fr/docs/Glossary/Search_engine">moteur de recherche</a>, <a href="/fr/docs/Glossary/Browser">navigateurs</a>, etc.) à utiliser et à rendre la page. Les métadonnées relatives aux styles et aux scripts peuvent être définies dans la page ou renvoyer à un autre fichier contenant ces informations.</p> <p>{{HTMLRefTable("HTML Document Metadata")}}</p> -<h2 id="Racine_de_sectionnement">Racine de sectionnement</h2> +<h2 id="sectioning_root">Racine de sectionnement</h2> <p>{{HTMLRefTable("Sectioning Root Element")}}</p> -<h2 id="Sectionnement_du_contenu">Sectionnement du contenu</h2> +<h2 id="content_sectioning">Sectionnement du contenu</h2> <p>Organiser le contenu d'une page en différentes sections permet d'avoir une structure logique au sein d'un document. Grâce à ces éléments, on peut créer un plan pour la page, ajouter des titres pour identifier les sections et également gérer un en-tête et un bas de page.</p> <p>{{HTMLRefTable("HTML Sections")}}</p> -<h2 id="Contenu_textuel">Contenu textuel</h2> +<h2 id="text_content">Contenu textuel</h2> <p>Le contenu HTML textuel permet d'organiser des blocs ou des sections de contenu entre la balise ouvrante {{HTMLElement("body")}} et la balise fermante <code></body></code>. Ces éléments sont cruciaux pour l'accessibilité et le référencement car ils permettent d'identifier le sens du contenu.</p> <p>{{HTMLRefTable("HTML Grouping Content")}}</p> -<h2 id="Sémantique_du_texte_en_ligne">Sémantique du texte en ligne</h2> +<h2 id="inline_text_semantics">Sémantique du texte en ligne</h2> <p>Les éléments pour le texte en ligne peuvent être utilisés pour définir la signification, la structure ou la mise en forme d'un terme, d'une ligne ou d'un fragment de texte.</p> <p>{{HTMLRefTable("HTML Text-Level Semantics")}}</p> -<h2 id="Images_et_médias">Images et médias</h2> +<h2 id="image_and_multimedia">Images et médias</h2> <p>HTML prend en charge différents fichiers multimédias pour les images, les fichiers audio et vidéo.</p> <p>{{HTMLRefTable("multimedia")}}</p> -<h2 id="Contenu_embarqué">Contenu embarqué</h2> +<h2 id="embedded_content">Contenu embarqué</h2> <p>En plus du contenu multimédia, un document HTML peut embarquer d'autres contenus (bien que les interactions soient plutôt limitées).</p> <p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p> -<h2 id="Scripts">Scripts</h2> +<h2 id="svg_and_math">SVG et MathML</h2> + +<p>Vous pouvez intégrer du contenu <a href="/en-US/docs/Web/SVG">SVG</a> et <a href="/en-US/docs/Web/MathML">MathML</a> directement dans des documents HTML, en utilisant les éléments <a href="/fr/docs/Web/SVG/Element/svg"><code><svg></code></a> et <a href="/fr/docs/Web/MathML/Element/math"><code><math></code></a>.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Élément</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td style="vertical-align: top;"><a href="/fr/docs/Web/SVG/Element/svg"><code><svg></code></a></td> + <td>L'élément <code>svg</code> est un conteneur qui définit un nouveau système de coordonnées et une <a href="/fr/docs/Web/SVG/Attribute/viewBox">vue</a>. Il est utilisé comme élément le plus externe des documents SVG, mais il peut également être utilisé pour intégrer un fragment SVG à l'intérieur d'un document SVG ou HTML.</td> + </tr> + <tr> + <td style="vertical-align: top;"><a href="/fr/docs/Web/MathML/Element/math"><code><math></code></a></td> + <td>L'élément de niveau supérieur en MathML est <code><math></code>. Chaque instance MathML valide doit être enveloppée dans des balises <code><math></code>. En outre, vous ne devez pas imbriquer un deuxième élément <code><math></code> dans un autre, mais vous pouvez avoir un nombre arbitraire d'autres éléments enfants dans celui-ci.</td> + </tr> + </tbody> +</table> + +<h2 id="scripting">Scripts</h2> <p>Afin de créer du contenu dynamique et des applications web, des langages de script peuvent être utilisés pour manipuler le document HTML. Certains éléments HTML permettent de gérer les liens entre les scripts et le document.</p> <p>{{HTMLRefTable("HTML Scripting")}}</p> -<h2 id="Gestion_de_l'édition">Gestion de l'édition</h2> +<h2 id="demarcating_edits">Gestion de l'édition</h2> <p>Ces éléments permettent d'indiquer si des portions du texte ont été modifiées.</p> <p>{{HTMLRefTable("HTML Edits")}}</p> -<h2 id="Contenu_tabulaire">Contenu tabulaire</h2> +<h2 id="table_content">Contenu tabulaire</h2> <p>Les éléments listés ici permettent de créer et de gérer des données tabulaires.</p> <p>{{HTMLRefTable("HTML tabular data")}}</p> -<h2 id="Formulaires">Formulaires</h2> +<h2 id="forms">Formulaires</h2> -<p>HTML fournit différents éléments qui permettent de créer des formulaires pouvant être remplis par les utilisateurs du site ou de l'application web.</p> +<p>HTML fournit un certain nombre d'éléments qui peuvent être utilisés ensemble pour créer des formulaires que l'utilisateur peut remplir et soumettre au site Web ou à l'application. De nombreuses informations complémentaires à ce sujet sont disponibles dans le <a href="/fr/docs/Learn/Forms">guide des formulaires HTML</a>.</p> <p>{{HTMLRefTable({"include": ["HTML forms"], "exclude":["Deprecated"]})}}</p> -<h2 id="Éléments_interactifs">Éléments interactifs</h2> +<h2 id="interactive_elements">Éléments interactifs</h2> <p>HTML fournit différents éléments qui permettent de créer des interfaces utilisateur interactives.</p> <p>{{HTMLRefTable("HTML interactive elements")}}</p> -<h2 id="Web_Components"><em>Web Components</em></h2> +<h2 id="web_components"><em>Web Components</em></h2> <p>Les composants web (ou « <em>Web Components</em> ») permettent de créer et d'utiliser des éléments personnalisés comme s'ils étaient des éléments HTML classiques. Cela permet également de créer ses propres versions des éléments standards HTML.</p> -<p>{{HTMLRefTable({"include":["Web Components"],"elements":["shadow"]})}}</p> +<p>{{HTMLRefTable({"include":["Web Components"],"exclude":["Deprecated", "Obsolete"]})}}</p> -<h2 id="Éléments_obsolètes_ou_dépréciés">Éléments obsolètes ou dépréciés</h2> +<h2 id="obsolete_and_deprecated_elements">Éléments obsolètes ou dépréciés</h2> -<div class="warning"> -<p><strong>Attention :</strong> Ces éléments sont d'anciens éléments HTML qui sont désormais dépréciés et qui ne devraient plus être utilisés. <strong>Ces éléments ne doivent pas être utilisés dans de nouveaux projets et doivent être remplacés dans les anciens projets dès que possible.</strong> Ces éléments uniquement sont listés ici à des fins d'information.</p> +<div class="notecard warning"> + <p><b>Attention :</b></p> + <p>Ces éléments sont d'anciens éléments HTML qui sont désormais dépréciés et qui ne devraient plus être utilisés. <strong>Ces éléments ne doivent pas être utilisés dans de nouveaux projets et doivent être remplacés dans les anciens projets dès que possible.</strong> Ces éléments uniquement sont listés ici à des fins d'information.</p> </div> <p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p> |