diff options
| author | tristantheb <tristantheb@users.noreply.github.com> | 2021-06-19 10:25:05 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-06-19 10:25:05 +0200 |
| commit | a47584de1bd47788cb5aa6178fa88b31977b2a8e (patch) | |
| tree | 1c153a5dd0e939a3ef819df87d6b988da950352f /files/fr/web/html | |
| parent | 1b0940218952a8132ceb9e4b56792ad47e94d552 (diff) | |
| download | translated-content-a47584de1bd47788cb5aa6178fa88b31977b2a8e.tar.gz translated-content-a47584de1bd47788cb5aa6178fa88b31977b2a8e.tar.bz2 translated-content-a47584de1bd47788cb5aa6178fa88b31977b2a8e.zip | |
UPDATE: Update translation of the HTML elements â đ Priority work area (#500)
* UPDATE: Updating pages starting with A
* FIX: Update missing KS to html anchor
* Review HTML Element a
* Review HTML Element abbr
* Review HTML Element acronym
* Review HTML Element address
* Review HTML Element applet
* Review HTML Element area
* Review HTML Element article
* Review HTML Element aside
* Review HTML Element audio
* UPDATE: Updating pages wtarting with B
* Review HTML Element b
* Review HTML Element base
* Review HTML Element basefont
* Review HTML Element bdi
* Review HTML Element bdo
* Review HTML Element big
* Review HTML Element blink
* Review HTML Element blockquote
* Review HTML Element body
* Review HTML Element br
* Review HTML Element button
* Review HTML Element button - rm HTMLRef
* Review HTML Element button - lint link
* UPDATE: Updating pages starting with C
* UPDATE: Updating pages starting with D
* UPDATE: Refresh the reference page
* UPDATE: Updating pages starting with E
* Review HTML Element canvas
* Review HTML Element caption
* Review HTML Element center
* Review HTML Element cite
* UPDATE: Updating pages starting with F
* BCD: Update all updated pages with new BCD format
* FIX: add missing bracket
* Review - HTML element - code
* Review - HTML Element - col
* Review - HTML Element - colgroup
* Review - HTML Element - content
* Review - HTML Element - data
* Review - HTML Element - datalist
* Review - HTML Element - dd
* Review - HTML Element - del
* Review - HTML Element
* Review - HTML Element - dfn
* Review - HTML Element - dialog
* Review - HTML element - dir
* Review - HTML Element div
* Review - HTML Element - dl
* Review - HTML Element - dt
* Review - HTML Element - em
* Review - HTML Element - embed
* Review - HTML Element - fieldset
* Review - HTML Element - figcaption
* Review - HTML Element - figure
* Review - HTML Element - font
* Review - HTML Element - footer
* Review - HTML Element - form
* Review - HTML Element - frame
* Review - HTML Element - frameset
* Review updates since PR start - A
* Review updates since PR start - B
* Review updates since PR start - C
* Review updates since PR start - D
* Review updates since PR start - F
Co-authored-by: julieng <julien.gattelier@gmail.com>
Diffstat (limited to 'files/fr/web/html')
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> |