diff options
Diffstat (limited to 'files/fr/web/html/global_attributes/index.html')
| -rw-r--r-- | files/fr/web/html/global_attributes/index.html | 196 |
1 files changed, 196 insertions, 0 deletions
diff --git a/files/fr/web/html/global_attributes/index.html b/files/fr/web/html/global_attributes/index.html new file mode 100644 index 0000000000..779e617a3d --- /dev/null +++ b/files/fr/web/html/global_attributes/index.html @@ -0,0 +1,196 @@ +--- +title: Les attributs universels +slug: Web/HTML/Attributs_universels +tags: + - Attribut + - Attribut universel + - HTML + - Reference + - Web +translation_of: Web/HTML/Global_attributes +--- +<div>{{HTMLSidebar("Global_attributes")}}</div> + +<p>Les <strong>attributs universels</strong> sont des attributs communs à l'ensemble des éléments HTML. Ces attributs peuvent donc être ajoutés sur tous les éléments (dans certains cas, les attributs n'auront aucun effet).</p> + +<p>Les attributs universels peuvent être définis sur tous <a href="/fr/docs/Web/HTML/Element">les éléments HTML</a>, <em>y compris pour les éléments non définis dans le standard</em>. Autrement dit, les éléments non-standards doivent pouvoir accepter ces attributs. Cela permettra au navigateur de les gérer selon certains des aspects de la spécification. Par exemple, pour un navigateur conforme, un élément <code><toto hidden>...</toto></code> sera masqué bien que <code><toto></code> ne soit pas un élément HTML valide.</p> + +<p>En plus des attributs universels HTML, il existe également les attributs universels suivants :</p> + +<ul> + <li>{{htmlattrdef("xml:lang")}} et {{htmlattrdef("xml:base")}} : ces attributs proviennent des spécifications XHTML. Ils sont désormais dépréciés mais conservés pour des raisons de compatibilité.</li> + <li>Les nombreux attributs <code><strong><a href="/fr/docs/Accessibilité/ARIA">aria-*</a></strong></code> utilisés afin d'améliorer l'accessibilité.</li> + <li>Les attributs utilisés pour <a href="/fr/docs/Web/Guide/DOM/Events/Event_handlers">les gestionnaires d'événements</a> déclarés directement sur les éléments : <code><strong>onabort</strong></code>, <code><strong>onautocomplete</strong></code>, <code><strong>onautocompleteerror</strong></code>, <code><strong>onblur</strong></code>, <code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncontextmenu</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onsort</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code>.</li> +</ul> + +<h2 id="Liste_des_attributs_universels">Liste des attributs universels</h2> + +<dl> + <dt>{{htmlattrdef("accesskey")}}</dt> + <dd>Cet attribut fournit une indication permettant de générer un raccourci clavier pour l'élément courant. Cet attribut se compose d'une liste de caractères séparés par des espaces. Le navigateur doit utiliser le premier caractère qui existe selon la disposition du clavier utilisée.</dd> + <dt>{{htmlattrdef("autocapitalize")}}</dt> + <dd>Cet attribut contrôle la façon dont le texte saisi est automatiquement converti en majuscules. Les valeurs autorisées pour cet attribut sont : + <ul> + <li><code>off</code> ou <code>none</code> : il n'y pas de convertion en majuscules réalisée.</li> + <li><code>on</code> ou <code>sentences</code> : la première lettre de chaque phrase est écrite en majuscule par défaut. Les autres lettres sont en minuscules par défaut.</li> + <li><code>words</code> : la première lettre de chaque mot est écrite en majuscule par défaut, les autres lettres sont en minuscules par défaut.</li> + <li><code>characters</code> : toutes les lettres sont écrites en majuscules par défaut</li> + </ul> + </dd> + <dt>{{htmlattrdef("class")}}</dt> + <dd>Une liste de classes, séparées par des espaces, qui permettent de catégoriser l'élément. Les classes permettent au CSS et à JavaScript de manipuler des éléments spécifiques grâce à <a href="/fr/docs/Web/CSS/Sélecteurs_de_classe">des sélecteurs de classe</a> (pour CSS) ou grâce à des fonctions telles que {{domxref("Document.getElementsByClassName()")}} (pour JavaScript).</dd> + <dt>{{htmlattrdef("contenteditable")}}</dt> + <dd>Un attribut à valeur contrainte qui indique si l'élément peut être édité par l'utilisateur. Si c'est le cas, le navigateur modifie l'interface utilisateur afin de permettre l'édition. Les valeur autorisées pour cet attribut sont : + <ul> + <li><code>true</code> ou la chaîne vide : ces valeurs indiquent que l'élément doit pouvoir être édité</li> + <li><code>false</code> qui indique que l'élément ne doit pas pouvoir être édité.</li> + </ul> + </dd> + <dt>{{htmlattrdef("contextmenu")}}{{obsolete_inline}}</dt> + <dd>La valeur de cet attribut correspond à la valeur de l'attribut {{htmlattrxref("id","menu")}} d'un élément {{HTMLElement("menu")}} qui doit être utilisé comme menu contextuel par cet élément.</dd> + <dt>{{htmlattrdef("data-*")}}</dt> + <dd>Cette classe d'attribut, appelée « attributs de données personnalisés », permet d'échanger des informations dans un format propriétaire entre le HTML et le DOM afin de pouvoir les manipuler via des langage de scripts. La propriété {{domxref("HTMLElement.dataset")}} permet d'accéder à l'ensemble des attribut définis de cette façon.</dd> + <dt>{{htmlattrdef("dir")}}</dt> + <dd>Un attribut à valeur contrainte qui indique la directionnalité du texte de l'élément. Les valeurs autorisées pour cet attribut sont : + <ul> + <li><code>ltr</code> (l'abbréviation anglaise pour <em>Left To Right</em>) indique que le contenu est écrit de gauche à droite (comme le français par exemple)</li> + <li><code>rtl</code> (l'abbréviation anglaise pour <em>Right To Left</em>) indique que le contenu est écrit de droite à gauche (comme l'arabe par exemple)</li> + <li><code>auto</code> : c'est l'agent utilisateur qui décide. Il utilise un algortihme qui analyse les caractères du contenu de l'élément jusqu'à trouver un caractère avec une forte directionnalité qu'il applique alors à l'ensemble de l'élément.</li> + </ul> + </dd> + <dt>{{htmlattrdef("draggable")}}</dt> + <dd>Un attribut à valeur contrainte qui indique qu'un élément peut être glissé/déposé grâce à l'<a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">API <em>Drag & Drop</em></a>. Les valeurs autorisées pour cet attribut sont : + <ul> + <li><code>true</code> : l'élément peut être glissé/déposé</li> + <li><code>false</code> : l'élément ne peut pas être glissé/déposé.</li> + </ul> + </dd> + <dt>{{htmlattrdef("dropzone")}} {{experimental_inline}}</dt> + <dd>Un attribut à valeur contrainte qui indique le type de contenu qui peut être déposé sur un élément grâce à l'<a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">API <em>Drag & Drop</em></a>. Les valeurs autorisées pour cet attribut sont : + <ul> + <li><code>copy</code> : lorsque l'élément est déposé, une copie de l'élément est créée</li> + <li><code>move</code> : lorsque l'élément est déposé, il est déplacé vers ce nouvel emplacement</li> + <li><code>link</code> : un lien est créé vers les données qui sont déplacée.</li> + </ul> + </dd> + <dt>{{htmlattrdef("exportparts")}} {{experimental_inline}}</dt> + <dd>Utilisé pour exporter de façon transitive certaines parties d'un arbre <em>shadow</em> sur un arbre réel.</dd> + <dt>{{htmlattrdef("hidden")}}</dt> + <dd>Un attribut booléen dont la valeur indique que l'élément n'est pas encore, ou n'est plus <em>pertinent</em>. Cet attribut peut ainsi être utilisé pour masquer les éléments d'une page qui ne peuvent pas être utilisés tant que la procédure de connexion n'est pas terminée. Le navigateur n'affichera pas les éléments pour lesquels cet attribut est utilisé. Cet attribut ne doit pas être utilisé afin de masquer du contenu qui aurait pu être affiché de façon pertinente.</dd> + <dt>{{htmlattrdef("id")}}</dt> + <dd>Cet attribut définit un identifiant, unique au sein de tout le document, ,pour un élément. Il doit permettre d'identifier un élément lorsqu'on crée un lien vers lui et/ou lorsque le manipule avec des scripts ou avec CSS.</dd> + <dt>{{htmlattrdef("inputmode")}}</dt> + <dd>Cet attribut fournit une indication au navigateur quant au type de contenu qui sera saisi dans le champ et qui aide à déterminer la configuration du clavier virtuel qui peut être affiché pour la saisie. Ce type est principalement utilisé pour les éléments {{HTMLElement("input")}} mais peut tout à fait être utilisé sur n'importe quel élément avec le mode {{htmlattrxref("contenteditable")}}.</dd> + <dt>{{htmlattrdef("is")}}</dt> + <dd>Cet attribut indique qu'un élément HTML standard devrait se comporter comme un élément personnalisé natif (voir <a href="/fr/docs/Web/Web_Components/Using_custom_elements">Manipuler les custom elements</a> pour plus d'informations).</dd> + <dt>{{htmlattrdef("itemid")}}</dt> + <dd>L'identifiant unique, global, d'un objet. Cet attribut est lié <a href="https://html.spec.whatwg.org/multipage/#toc-microdata">aux microdonnées</a>.</dd> + <dt>{{htmlattrdef("itemprop")}}</dt> + <dd>Cet attribut permet d'ajouter des propriétés à un objet. Cet attribut est une paire entre un nom et une valeur. Cet attribut est lié <a href="https://html.spec.whatwg.org/multipage/#toc-microdata">aux microdonnées</a>.</dd> + <dt>{{htmlattrdef("itemref")}}</dt> + <dd>Les propriétés d'un objet qui ne sont pas les éléments descendants de l'élément courant peuvent être associée via l'attribut <code>itemscope</code> contenant une référence vers un <code>itemref</code>. <code>itemref</code> fournit une liste d'identifiants d'éléments qui correspondent aux propriétés supplémentaires définies autre part dans le document. Cet attribut est lié <a href="https://html.spec.whatwg.org/multipage/#toc-microdata">aux microdonnées</a>.</dd> + <dt>{{htmlattrdef("itemscope")}}</dt> + <dd><code>itemscope</code> fonctionne généralement avec <code>itemtype</code> afin d'indiquer que le coded HTML contenu dans un bloc donné concerne un objet en particulier. <code>itemscope</code> crée l'objet et définit la portée de l'<code>itemtype</code> associée. <code>itemtype</code> est une URL valide construite à partir d'un vocabulaire (par exemple <a href="https://schema.org/">schema.org</a>) qui décrit les objets et leurs propriétés. Cet attribut est lié <a href="https://html.spec.whatwg.org/multipage/#toc-microdata">aux microdonnées</a>.</dd> + <dt>{{htmlattrdef("itemtype")}}</dt> + <dd>Cet attribut indique l'URL du vocabulaire utilisé pour définir les propriétés d'un objet. Cet attribut est lié <a href="https://html.spec.whatwg.org/multipage/#toc-microdata">aux microdonnées</a>.</dd> + <dt>{{htmlattrdef("lang")}}</dt> + <dd>Cet attribut aide à définir la langue utilisée pour l'élément. Pour les éléments non-éditables, c'est la langue dans laquelle ils sont écrits et pour les éléments éditables, c'est la langue dans laquelle ils devraient être écrits. Cet attribut contient une seule valeur telle que définie dans le document IETF <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a>. L'attribut <code><strong>xml:lang</strong></code> est prioritaire par rapport à cet attribut lorsqu'il s'agit de déterminer la langue d'un élément.</dd> + <dt>{{htmlattrdef("part")}} {{experimental_inline}}</dt> + <dd>Une liste séparée par des espaces avec les noms des parties (<em>parts</em>) de l'élément. Les noms des parties permettent au CSS de cibler et de mettre en forme certains éléments d'un arbre <em>shadow</em> via le pseudo-élément {{cssxref("::part")}}.</dd> + <dt>{{htmlattrdef("slot")}}</dt> + <dd>Cet attribut affecte un créneau de l'arbre du <em><a href="/fr/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a></em> pour un élément. L'élément ayant l'attribut <code>slot</code> est affecté au créneau créé par l'élément {{HTMLElement("slot")}} pour lequel l'attribut {{htmlattrxref("name", "slot")}} correspond à la valeur de l'attribut <code>slot</code>.</dd> + <dt>{{htmlattrdef("spellcheck")}} {{experimental_inline}}</dt> + <dd>Un attribut à valeur contrainte qui définit s'il faut détecter les fautes d'orthographe/grammaire dans le texte de l'élément. Les valeurs autorisées pour cet attribut sont : + <ul> + <li><code>true</code> qui indique que, si possible, il faut vérifier les erreurs d'orthographe</li> + <li><code>false</code> qui indique qu'il ne faut pas vérifier les erreurs.</li> + </ul> + </dd> + <dt>{{htmlattrdef("style")}}</dt> + <dd>Cet attribut contient les déclarations <a href="/fr/docs/Web/CSS/">CSS</a> utilisées pour mettre en forme l'élément. Note : il est recommandé d'utiliser un ou plusieurs fichiers séparés, plutôt que cet attribut, pour définir les règles de mise en forme. Le rôle de l'élément {{HTMLElement("style")}} consiste à permettre une mise en forme rapide, notamment pour des tests.</dd> + <dt>{{htmlattrdef("tabindex")}}</dt> + <dd>Cet attribut à valeur entière indique l'ordre dans lequel l'élément participe à la navigation au clavier via la tabulation. Il peut prendre différente valeur : + <ul> + <li>une valeur négative indiquera que l'élément peut recevoir le focus mais n'est pas accessible via la navigation séquentielle au clavier</li> + <li><code>0</code> indiquera que l'élément peut recevoir le focus et être accessible via la navigation au clavier mais l'ordre est relatif et déterminé par l'agent utilisateur</li> + <li>une valeur positive indiquera que l'élément peut recevoir le focus et qu'il est accessible via la navigation au clavier. La valeur utilisée indique l'ordre relatif de l'élément dans la navigation. Autrement dit, la navigation au clavier ira dans le sens croissant des éléments selon leurs valeurs respectives de <code>tabindex</code>. Si plusieurs éléments ont la même valeur, ce sera leur ordre relatif dans le document qui sera utilisé.</li> + </ul> + </dd> + <dt>{{htmlattrdef("title")}}</dt> + <dd>Cet attribut contient une représentation textuelle de l'information auquel il est lié. Une telle information est généralement, mais pas nécessairement, affichée sous la forme d'une bulle d'informations.</dd> + <dt>{{htmlattrdef("translate")}} {{experimental_inline}}</dt> + <dd>Un attribut à valeur contrainte qui est utilisé pour définir si les valeurs des attributs et des éléments fils de type {{domxref("Text")}} doivent être traduits lorsque la page est localisée. Les valeurs autorisées pour cet attribut sont : + <ul> + <li>La chaîne vide ou <code>yes</code> qui indiquent que l'élément doit être traduit</li> + <li><code>no</code> qui indique que l'élément ne sera pas traduit.</li> + </ul> + </dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("CSS Shadow Parts", "#exposing")}}</td> + <td>{{Spec2("CSS Shadow parts")}}</td> + <td>Ajout des attributs universels <code>part</code> et <code>exportparts</code>.</td> + </tr> + <tr> + <td>{{SpecName("HTML5.3", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML5.3")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5.2", "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2("HTML5.2")}}</td> + <td>Dérivation de {{SpecName("HTML WHATWG")}}. Depuis, {{SpecName("HTML5.1")}}, les attributs <code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code> et <code>itemtype</code> ont été ajoutés.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Les attributs <code>contextmenu</code>, <code>spellcheck</code>, <code>draggable</code>, et <code>dropzone</code> ont été ajoutés depuis {{SpecName('HTML5 W3C')}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Le concept d'attribut universel est introduit et les attributs <code>dir</code>, <code>lang</code>, <code>style</code>, <code>id</code>, <code>class</code>, <code>tabindex</code>, <code>accesskey</code>, <code>title</code> sont désormais des attributs universels.<br> + <code>xml:lang</code> qui faisait initialement partie de XHTML est inclus dans HTML. Les attributs<br> + <code>hidden</code>, <code>data-*</code>, <code>contenteditable</code> et <code>translate</code> sont ajoutés.</td> + </tr> + <tr> + <td>{{SpecName('HTML4.01')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td>Aucun attribut universel n'est défini. Plusieurs attributs, devenus universels par la suite, sont définis sur un sous-ensemble d'élément.<br> + <code>class</code> et <code>style</code> sont pris en charge pour tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}.<br> + <code>dir</code> est pris en charge pour tous les éléments à l'exception de {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} et {{HTMLElement("script")}}.<br> + <code>id</code> est pris en charge pour tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}.<br> + <code>lang</code> est pris en charge pour tous les éléments à l'exception de {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} et {{HTMLElement("script")}}.<br> + <code>tabindex</code> est uniquement pris en charge pour les éléments {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}} et {{HTMLElement("textarea")}}.<br> + <code>accesskey</code> est uniquement pris en charge pour {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} et {{HTMLElement("textarea")}}.<br> + <code>title</code> est pris en charge pour tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}} et {{HTMLElement("title")}}.</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.global_attributes")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Les interfaces {{domxref("Element")}} et {{domxref("GlobalEventHandlers")}} qui permettent de manipuler la plupart des attributs globaux.</li> +</ul> |