From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../html/attributs_universels/accesskey/index.html | 143 +++++++ .../attributs_universels/autocapitalize/index.html | 49 +++ .../web/html/attributs_universels/class/index.html | 63 +++ .../contenteditable/index.html | 85 ++++ .../attributs_universels/contextmenu/index.html | 118 ++++++ .../attributs_universels/data-_star_/index.html | 83 ++++ .../web/html/attributs_universels/dir/index.html | 90 +++++ .../html/attributs_universels/draggable/index.html | 71 ++++ .../html/attributs_universels/dropzone/index.html | 48 +++ .../html/attributs_universels/hidden/index.html | 69 ++++ .../fr/web/html/attributs_universels/id/index.html | 72 ++++ files/fr/web/html/attributs_universels/index.html | 196 +++++++++ .../html/attributs_universels/inputmode/index.html | 65 +++ .../fr/web/html/attributs_universels/is/index.html | 67 ++++ .../html/attributs_universels/itemid/index.html | 116 ++++++ .../html/attributs_universels/itemprop/index.html | 436 +++++++++++++++++++++ .../html/attributs_universels/itemref/index.html | 97 +++++ .../html/attributs_universels/itemscope/index.html | 228 +++++++++++ .../html/attributs_universels/itemtype/index.html | 113 ++++++ .../web/html/attributs_universels/lang/index.html | 86 ++++ .../web/html/attributs_universels/slot/index.html | 49 +++ .../attributs_universels/spellcheck/index.html | 153 ++++++++ .../web/html/attributs_universels/style/index.html | 92 +++++ .../html/attributs_universels/tabindex/index.html | 115 ++++++ .../web/html/attributs_universels/title/index.html | 129 ++++++ .../html/attributs_universels/translate/index.html | 71 ++++ .../x-ms-acceleratorkey/index.html | 45 +++ .../x-ms-format-detection/index.html | 60 +++ 28 files changed, 3009 insertions(+) create mode 100644 files/fr/web/html/attributs_universels/accesskey/index.html create mode 100644 files/fr/web/html/attributs_universels/autocapitalize/index.html create mode 100644 files/fr/web/html/attributs_universels/class/index.html create mode 100644 files/fr/web/html/attributs_universels/contenteditable/index.html create mode 100644 files/fr/web/html/attributs_universels/contextmenu/index.html create mode 100644 files/fr/web/html/attributs_universels/data-_star_/index.html create mode 100644 files/fr/web/html/attributs_universels/dir/index.html create mode 100644 files/fr/web/html/attributs_universels/draggable/index.html create mode 100644 files/fr/web/html/attributs_universels/dropzone/index.html create mode 100644 files/fr/web/html/attributs_universels/hidden/index.html create mode 100644 files/fr/web/html/attributs_universels/id/index.html create mode 100644 files/fr/web/html/attributs_universels/index.html create mode 100644 files/fr/web/html/attributs_universels/inputmode/index.html create mode 100644 files/fr/web/html/attributs_universels/is/index.html create mode 100644 files/fr/web/html/attributs_universels/itemid/index.html create mode 100644 files/fr/web/html/attributs_universels/itemprop/index.html create mode 100644 files/fr/web/html/attributs_universels/itemref/index.html create mode 100644 files/fr/web/html/attributs_universels/itemscope/index.html create mode 100644 files/fr/web/html/attributs_universels/itemtype/index.html create mode 100644 files/fr/web/html/attributs_universels/lang/index.html create mode 100644 files/fr/web/html/attributs_universels/slot/index.html create mode 100644 files/fr/web/html/attributs_universels/spellcheck/index.html create mode 100644 files/fr/web/html/attributs_universels/style/index.html create mode 100644 files/fr/web/html/attributs_universels/tabindex/index.html create mode 100644 files/fr/web/html/attributs_universels/title/index.html create mode 100644 files/fr/web/html/attributs_universels/translate/index.html create mode 100644 files/fr/web/html/attributs_universels/x-ms-acceleratorkey/index.html create mode 100644 files/fr/web/html/attributs_universels/x-ms-format-detection/index.html (limited to 'files/fr/web/html/attributs_universels') diff --git a/files/fr/web/html/attributs_universels/accesskey/index.html b/files/fr/web/html/attributs_universels/accesskey/index.html new file mode 100644 index 0000000000..e53f876ed8 --- /dev/null +++ b/files/fr/web/html/attributs_universels/accesskey/index.html @@ -0,0 +1,143 @@ +--- +title: accesskey +slug: Web/HTML/Attributs_universels/accesskey +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/accesskey +--- +
{{HTMLSidebar("Global_attributes")}}
+ +
L'attribut universel accesskey fournit une indication afin de générer un raccourci clavier pour l'élément courant. La valeur de cet attribut est une liste de caractères (un caractère étant ici un seul point de code Unicode) séparés par des espaces. Le navigateur utilisera le premier caractère qui est disponible selon la disposition du clavier utilisée.
+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-accesskey.html","tabbed-shorter")}}
+ + + +

La combinaison de touches utilisée pour le raccourci clavier dépend du navigateur et du système d'exploitation utilisés.

+ +
+

Note : La spécification WHATWG indique qu'il est possible d'indiquer des caractères séparés par plusieurs espaces, auquel cas le navigateur considèrera le premier qu'il prend en charge. Toutefois, cela ne fonctionne pas dans la plupart des navigateurs. Pour IE/Edge, c'est la première valeur prise en charge qui sera utilisée si celle-ci n'entre pas en conflit avec d'autres commandes.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WindowsLinuxMac
FirefoxAlt + Shift + touche +

Pour Firefox 57 et les versions ultérieures : Control + Option + touche ou Control + Alt + touche
+ Pour Firefox 14 et les versions ultérieures : Control + Alt + touche
+ Pour Firefox 13 et les versions antérieures : Control + touche

+
EdgeAlt + toucheN/A
Internet ExplorerAlt + toucheN/A
Google ChromeAlt + toucheControl + Alt + touche
SafariAlt + toucheN/AControl + Alt + touche
Opera 15+Alt + keyControl + Alt + key
Opera 12Shift + Esc ouvre une liste de contenu accessible via la touche accesskey, on peut alors ensuite choisir l'élément voulu grâce la touche touche
+ +

Accessibilité

+ +

Au-delà de la prise en charge limitée des navigateurs, accesskey pose plusieurs problèmes :

+ + + +

Étant donné ces raisons, il est généralement conseillé de ne pas utiliser accesskey pour les sites web et applications généralistes.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5.2')}}Un comportement plus réaliste est défini et correspond à ce qui est réellement implémenté.
{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5.1')}}Aucune modification depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}{{Spec2('HTML5 W3C')}}Plusieurs caractères peuvent être définis via cet attribut depuis {{SpecName('HTML4.01')}}. Cet attribut peut désormais être défini sur n'importe quel élément.
{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}{{Spec2('HTML4.01')}}L'attribut est uniquement pris en charge par {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} et {{HTMLElement("textarea")}}.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.accesskey")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributs_universels/autocapitalize/index.html b/files/fr/web/html/attributs_universels/autocapitalize/index.html new file mode 100644 index 0000000000..206412edde --- /dev/null +++ b/files/fr/web/html/attributs_universels/autocapitalize/index.html @@ -0,0 +1,49 @@ +--- +title: autocapitalize +slug: Web/HTML/Attributs_universels/autocapitalize +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/autocapitalize +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel autocapitalize est un attribut à valeurs contraintes qui contrôle la façon dont le texte saisi est automatiquement converti en majuscules ou non. Voici les valeurs autorisées pour cet attribut :

+ + + +

L'attribut autocapitalize n'a aucun impact lorsqu'on utilise un clavier physique. Il modifie la saisie pour les autres moyens de saisie tels que les claviers virtuels ou les moyens de saisie orale. Le but de cet attribut est d'aider de tels moyens à faciliter la saisie de l'utilisateur. Par défaut, un tel moyen de saisie utilisera une majuscule pour chaque début de phrase, modifier l'attribut autocapitalize permet aux auteurs de modifier ce comportement selon les différents éléments.

+ +

L'attribut autocapitalize n'entraînera pas de mise en majuscule automatique pour un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} vaut url, email ou password.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.autocapitalize")}}

diff --git a/files/fr/web/html/attributs_universels/class/index.html b/files/fr/web/html/attributs_universels/class/index.html new file mode 100644 index 0000000000..6204b6a173 --- /dev/null +++ b/files/fr/web/html/attributs_universels/class/index.html @@ -0,0 +1,63 @@ +--- +title: class +slug: Web/HTML/Attributs_universels/class +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/class +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel class indique une liste de classes associées à l'élément courant. Les classes permettent de manipuler les éléments, via CSS ou JavaScript en utilisant les sélecteurs de classe ou des fonctions telles que {{domxref("document.getElementsByClassName")}}.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-class.html","tabbed-standard")}}
+ + + +

Bien que la spécification ne précise aucune contrainte quant aux noms utilisés pour les classes, une bonne pratique consiste à utiliser des noms qui traduisent la sémantique de l'élément plutôt que la mise en forme. Ainsi, les noms sémantiques restent pertinents même lorsque la présentation de la page évolue.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#classes", "class")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis {{SpecName('HTML5.1')}}.
{{SpecName('HTML5.1', "dom.html#element-attrdef-global-class", "class")}}{{Spec2('HTML5.1')}}État selon {{SpecName('HTML WHATWG')}}. Aucune modification depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#classes", "class")}}{{Spec2('HTML5 W3C')}}État selon {{SpecName('HTML WHATWG')}}. class est désormas sun attribut universel depuis {{SpecName('HTML4.01')}},.
{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}{{Spec2('HTML4.01')}}Cet attribut est pris en charge sur 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")}}.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.class")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributs_universels/contenteditable/index.html b/files/fr/web/html/attributs_universels/contenteditable/index.html new file mode 100644 index 0000000000..1f805fc490 --- /dev/null +++ b/files/fr/web/html/attributs_universels/contenteditable/index.html @@ -0,0 +1,85 @@ +--- +title: contenteditable +slug: Web/HTML/Attributs_universels/contenteditable +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/contenteditable +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel contenteditable est un attribut à valeur contrainte qui indique si l'élément courant doit pouvoir être édité par l'utilisateur ou non. Lorsque c'est le cas, des éléments de l'interface du navigateur (ou de l'agent utilisateur) sont modifiés afin de permettre l'édition.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-contenteditable.html","tabbed-shorter")}}
+ + + +

Les valeurs autorisées pour cet attribut sont :

+ + + +

Si cet attribut n'est pas défini, sa valeur est héritée depuis son élément parent.

+ +

Cet attribut n'est pas un attribut booléen ! Cela signifie qu'une valeur explicite est nécessaire pour son fonctionnement. Toute forme telle que <label contenteditable>Exemple</label> n'est pas autorisée. La version correcte sera <label contenteditable="true">Exemple</label>.

+ +

Il est possible de modifier la couleur du symbole d'insertion grâce à la propriété CSS {{cssxref("caret-color")}}.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("HTML Editing", "contentEditable.html#contenteditable", "contenteditable")}}{{Spec2("HTML Editing")}}Ajout de "events", "caret", "typing", "plaintext-only".
{{SpecName("HTML WHATWG", "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2("HTML WHATWG")}}Aucune modification depuis la dernière dérivation, {{SpecName("HTML5.2")}}
{{SpecName("HTML5.2", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}{{Spec2("HTML5.2")}}Dérivation de {{SpecName("HTML WHATWG")}}, aucune modification depuis {{SpecName("HTML5.1")}}
{{SpecName("HTML5.1", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}{{Spec2("HTML5.1")}}Dérivation de {{SpecName("HTML WHATWG")}}, aucune modification depuis {{SpecName("HTML5 W3C")}}
{{SpecName("HTML5 W3C", "editing.html#attr-contenteditable", "contenteditable")}}{{Spec2("HTML5 W3C")}}Dérivation de {{SpecName("HTML WHATWG")}}, définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.contenteditable")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributs_universels/contextmenu/index.html b/files/fr/web/html/attributs_universels/contextmenu/index.html new file mode 100644 index 0000000000..187be1f1cc --- /dev/null +++ b/files/fr/web/html/attributs_universels/contextmenu/index.html @@ -0,0 +1,118 @@ +--- +title: contextmenu +slug: Web/HTML/Attributs_universels/contextmenu +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/contextmenu +--- +
{{HTMLSidebar("Global_attributes")}}{{obsolete_header}}
+ +
+

Attention ! Cet attribut est obsolète et sera retiré de l'ensemble des navigateurs.

+
+ +

L'attribut universel contextmenu correspond à l'{{htmlattrxref("id","","identifiant",1)}} d'un élément {{HTMLElement("menu")}} qu'on souhaite utiliser comme menu contextuel pour l'élément courant.

+ +

Un menu contextuel est un menu qui apparaît suite à une action utilisateur (par exemple un clic-droit). HTML5 permet désormais de personnaliser ce menu.

+ +
+

Exemples

+ +

Voici quelques exemples de personnalisations de menus. Le code HTML pourra être :

+ +

HTML

+ +
<body contextmenu="share">
+  <menu type="context" id="share">
+    <menu label="Partager">
+      <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem>
+      <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem>
+    </menu>
+  </menu>
+  <ol>
+    <li>
+      Dans cet exemple, vous pouvez partager un lien vers
+      cette page sur Facebook et/ou Twitter via le groupe Partager
+      du menu contextuel
+    </li>
+    <li>Sur cette ligne : on peut partager la page sur Twitter ou Facebook grâce au menu Partager du menu contextuel.</li>
+    <li><pre contextmenu="changeFont" id="fontSizing">Sur cette ligne : on peut changer la taille de la police en utilisant les options "Augmenter/Réduire la taille de la police" du menu contextuel</pre></li>
+    <menu type="context" id="changeFont">
+      <menuitem label="Augmenter la taille de la police" onclick="incFont()"></menuitem>
+      <menuitem label="Réduire la taille de la police" onclick="decFont()"></menuitem>
+    </menu>
+    <li contextmenu="ChangeImage" id="changeImage">Sur cette ligne : on peut  utiliser l'option "Changer l'image" du menu.</li><br />
+    <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" contextmenu="ChangeImage" id="promoButton" />
+    <menu type="context" id="ChangeImage">
+      <menuitem label="Changer l'image" onclick="changeImage()"></menuitem>
+    </menu>
+  </ol>
+</body>
+
+ +

JavaScript

+ +
function shareViaTwitter() {
+  window.open("https://twitter.com/intent/tweet?text=" +
+      "Je découvre ContextMenu avec MDN.");
+}
+
+function shareViaFacebook() {
+  window.open("https://facebook.com/sharer/sharer.php?u=" +
+      "https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/contextmenu");
+}
+function incFont(){
+  document.getElementById("fontSizing").style.fontSize="larger";
+}
+
+function decFont(){
+  document.getElementById("fontSizing").style.fontSize="smaller";
+}
+
+function changeImage(){
+  var j = Math.ceil((Math.random()*39)+1);
+  document.images[0].src="https://developer.mozilla.org/media/img/promote/promobutton_mdn" + j + ".png";
+}
+ +

Résultat

+ +
{{EmbedLiveSample("Exemples",600,500)}}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("HTML WHATWG", "obsolete.html#attr-contextmenu", "contextmenu")}}{{Spec2('HTML WHATWG')}}Rendu obsolète
{{SpecName('HTML5.1', "interactive-elements.html#context-menus", "contextmenu")}}{{Spec2('HTML5.1')}}Dérivation de {{SpecName('HTML WHATWG')}}, définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.contextmenu")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributs_universels/data-_star_/index.html b/files/fr/web/html/attributs_universels/data-_star_/index.html new file mode 100644 index 0000000000..d8befa7a2f --- /dev/null +++ b/files/fr/web/html/attributs_universels/data-_star_/index.html @@ -0,0 +1,83 @@ +--- +title: data-* +slug: Web/HTML/Attributs_universels/data-* +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/data-* +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

Les attributs universels data-* forment une classe d'attributs, appelés attributs de données (data attributes). Ils permettent d'échanger des données propriétaire entre le HTML et la représentation du DOM, qu'on peut manipuler avec des scripts.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-data.html","tabbed-standard")}}
+ + + +

De tels attributs sont disponibles via l'interface {{domxref("HTMLElement")}} de l'élément pour lequel l'attribut est utilisé. La propriété {{domxref("HTMLElement.dataset")}} permet d'accéder à l'attribut.
+ Ici, l'astérisque (*) peut être remplacée par n'importe quel nom valide selon les règles appliquées aux noms XML et en respectant les contraintes suivantes :

+ + + +

La propriété {{domxref("HTMLElement.dataset")}} est un objet {{domxref("StringMap")}} et la valeur d'un attribut de donnée nommé data-test-valeur sera accessible via HTMLElement.dataset.testValeur car les tirets (U+002D) sont remplacés par la majuscule de la lettre suivante (CamelCase).

+ +

Utilisation

+ +

Lorsqu'on ajoute des attributs de données data-*, on peut utiliser les éléments HTML classiques afin d'en faire des objets complexes et puissants. Ainsi, un sprite d'un vaisseau spatial dans un jeu peut être modélisé via un élément {{HTMLElement("img")}} auquel on associe un attribut class et plusieurs attributs de données sous la forme data-*.

+ +
<img class="spaceship cruiserX3" src="shipX3.png"
+     data-ship-id="324" data-weapons="laserI laserII"
+     data-x="414354" data-y="85160" data-z="31940"
+     onclick="spaceships[this.dataset.shipId].blasted()">
+</img>
+
+ +

Pour un tutoriel plus avancé à propos des attributs de données HTML, lire l'article Manipuler les attributs de données.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}{{Spec2('HTML WHATWG')}}Pas de modification depuis la dernière dérivation, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, pas de changement depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}{{Spec2('HTML5 W3C')}}Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.data_attributes")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributs_universels/dir/index.html b/files/fr/web/html/attributs_universels/dir/index.html new file mode 100644 index 0000000000..5cf187f35e --- /dev/null +++ b/files/fr/web/html/attributs_universels/dir/index.html @@ -0,0 +1,90 @@ +--- +title: dir +slug: Web/HTML/Attributs_universels/dir +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/dir +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel dir est un attribut à valeur contrainte qui indique la direction du texte contenu dans l'élément.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-dir.html","tabbed-standard")}}
+ + + +

Les valeurs autorisées pour cet attribut sont :

+ + + +
+

Notes d'utilisation :
+ Cet attribut est obligatoire pour l'élément {{HTMLElement("bdo")}}, pour lequel l'attribut a une sémantique différente.

+ + +
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML WHATWG')}}Aucun changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, aucun changement de {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-dir-attribute", "dir")}}{{Spec2('HTML5 W3C')}}Dérivée de {{SpecName('HTML WHATWG')}}, à partir de {{SpecName('HTML4.01')}} la valeur auto a été ajoutée et l'attribut est un attribut global à part entière.
{{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}{{Spec2('HTML4.01')}}Attribut pris en charge pour tous les éléments à l'exception {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, et {{HTMLElement("script")}}.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.dir")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributs_universels/draggable/index.html b/files/fr/web/html/attributs_universels/draggable/index.html new file mode 100644 index 0000000000..fe5d5cf514 --- /dev/null +++ b/files/fr/web/html/attributs_universels/draggable/index.html @@ -0,0 +1,71 @@ +--- +title: draggable +slug: Web/HTML/Attributs_universels/draggable +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/draggable +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel draggable est un attribut à valeur contrainte qui indique si l'élément peut être déplacé avec la souris dans un geste de glisser-déposer lorsqu'on utilise l'API Drag & Drop ou les fonctionnalités natives du navigateur. Les valeurs autorisées pour cet attribut sont les suivantes :

+ + + +

Si l'attribut n'est pas défini, la valeur par défaut sera auto : le comportement de l'élément sera celui spécifié par défaut par le navigateur.

+ +

Cet attribut est un attribut à valeur contrainte, ce n'est pas un attribut booléen. Il faut donc utiliser une valeur explicite true ou false. La notation raccourcie <img draggable>(utilisant uniquement le nom de l'attribut) ne fonctionnera pas :

+ +
<label draggable>Label exemple</label>
+ +

En revanche, on pourra correctement utiliser :

+ +
<label draggable="true">Label exemple</label>
+ +

Par défaut, seules les sélections de texte, les images et les liens peuvent être déplacés à la souris. Pour les autres éléments, il faudra définir le gestionnaire d'événements pour {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} afin de faire fonctionner le glisser-déposer. Cela est illustré dans cet exemple.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("HTML WHATWG", "interaction.html#the-draggable-attribute", "draggable")}}{{Spec2("HTML WHATWG")}}Aucune modification depuis la dernière dérivation de {{SpecName('HTML5.1')}}
{{SpecName("HTML5.2", "interaction.html#the-draggable-attribute", "draggable")}}{{Spec2("HTML5.2")}}Aucune modification
{{SpecName("HTML5.1", "editing.html#the-draggable-attribute", "draggable")}}{{Spec2("HTML5.1")}}Dérivation de {{SpecName('HTML WHATWG')}}, définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.draggable")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributs_universels/dropzone/index.html b/files/fr/web/html/attributs_universels/dropzone/index.html new file mode 100644 index 0000000000..e645e30973 --- /dev/null +++ b/files/fr/web/html/attributs_universels/dropzone/index.html @@ -0,0 +1,48 @@ +--- +title: dropzone +slug: Web/HTML/Attributs_universels/dropzone +tags: + - Attribut universel + - HTML + - Obsolete + - Reference +translation_of: Web/HTML/Global_attributes/dropzone +--- +
{{HTMLSidebar("Global_attributes")}} {{deprecated_header}}
+ +

L'attribut universel dropzone est un attribut à valeur contrainte qui indique le type de contenu qui peut être déposé sur un élément, il est utilisé avec l'API Drag & Drop. Les valeurs autorisées pour cet attribut sont :

+ + + +

Spécifications

+ + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.dropzone")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributs_universels/hidden/index.html b/files/fr/web/html/attributs_universels/hidden/index.html new file mode 100644 index 0000000000..c14d208620 --- /dev/null +++ b/files/fr/web/html/attributs_universels/hidden/index.html @@ -0,0 +1,69 @@ +--- +title: hidden +slug: Web/HTML/Attributs_universels/hidden +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/hidden +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel hidden est un attribut booléen qui indique s'il n'est pas encore ou s'il n'est plus pertinent d'afficher l'élément courant. Cet attribut peut, par exemple, être utilisé afin de masquer des éléments tant que l'utilisateur ne s'est pas connecté. Le navigateur n'affichera pas les éléments masqués via cet attribut.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-hidden.html","tabbed-shorter")}}
+ + + +

Cet attribut ne doit pas être utilisé pour masquer du contenu qui devrait pouvoir être vu sous une autre présentation. Si un contenu est marqué comme masqué, il sera masqué pour l'ensemble des présentations, y compris pour les lecteurs d'écran et autres outils d'assistance.

+ +

Les éléments cachés avec hidden ne devraient pas avoir de lien qui pointent vers eux depuis des éléments visibles. De plus, les éléments fils de l'élément caché sont toujours actifs : cela signifie qu'ils peuvent être utilisés par les scripts et que les formulaires peuvent envoyer des données. Dans certains autres contextes, il est possible d'avoir des relations avec les éléments cachés via hidden.

+ +

Par exemple, on peut utiliser l'attribut ARIA aria-describedby pour faire référence à une description qui serait cachée (si cette dernière n'est pas pertinente seule). De même un élément {{HTMLElement("canvas")}} caché peut être utilisé comme un buffer hors champ par moteur graphique scripté.

+ +
+

Note : Cet attribut sera surchargé par la propriété CSS {{cssxref("display")}}. Ainsi, un élément dont le style a display: flex sera affiché à l'écran, même si l'attribut hidden est présent.

+
+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis {{SpecName('HTML5.1')}}
{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}{{Spec2('HTML WHATWG')}}Définit le rendu par défaut suggéré en CSS lorsque l'attribut hidden est utilisé.
{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}. La définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.hidden")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributs_universels/id/index.html b/files/fr/web/html/attributs_universels/id/index.html new file mode 100644 index 0000000000..a08d5e0dce --- /dev/null +++ b/files/fr/web/html/attributs_universels/id/index.html @@ -0,0 +1,72 @@ +--- +title: id +slug: Web/HTML/Attributs_universels/id +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/id +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel id définit un identifiant qui doit être unique pour l'ensemble du document. Le but de cet attribut est de pouvoir identifier un élément lorsqu'on crée un lien, avec un fragment et qu'on souhaite le manipuler avec un script ou qu'on le met en forme avec CSS.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-id.html","tabbed-shorter")}}
+ + + +
+

Note : La valeur de cet attribut est une chaîne de caractère « opaque ». Cela signifie que cet attribut ne doit pas être utilisé pour transporter de l'information. Les informations sur la signification de l'élément dans le document ne doivent pas être portées par la valeur de cet attribut.

+
+ +

La valeur de cet attribut ne doit pas contenir de blancs (espaces, tabulation, etc.). Les navigateurs interprèteront les identifiants avec des espaces comme si l'espace faisait partie de l'identifiant. Ce comportement est différent de celui de l'attribut {{htmlattrxref("class")}} qui permet d'avoir des valeurs séparées par des espaces. Les éléments ne peuvent avoir qu'un seul identifiant défini via l'attribut id.

+ +
+

Note : L'utilisation de caractères non-ASCII ou qui ne sont pas des chiffres latins ou'_', '-' et '.' peut entraîner des problèmes de compatibilité car ils n'étaient pas autorisé avec HTML 4. Bien que cette restriction n'existe plus avec HTML 5, un identifiant devrait toujours commencer par une lettre pour une meilleure compatibilité.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML WHATWG')}}Aucun changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, aucun changement depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}{{Spec2('HTML5 W3C')}}Dérivée de {{SpecName('HTML WHATWG')}}, les caractères '_', '-' et '.' sont désormais acceptés s'ils ne sont pas utilisés au début de l'identifiant. Cet attribut devient un attribut global à part entière.
{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}{{Spec2('HTML4.01')}}Pris en charge par tous les éléments sauf {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, et {{HTMLElement("title")}}.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.id")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributs_universels/index.html b/files/fr/web/html/attributs_universels/index.html new file mode 100644 index 0000000000..779e617a3d --- /dev/null +++ b/files/fr/web/html/attributs_universels/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 +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

Les attributs universels 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).

+ +

Les attributs universels peuvent être définis sur tous les éléments HTML, y compris pour les éléments non définis dans le standard. 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 <toto hidden>...</toto> sera masqué bien que <toto> ne soit pas un élément HTML valide.

+ +

En plus des attributs universels HTML, il existe également les attributs universels suivants :

+ + + +

Liste des attributs universels

+ +
+
{{htmlattrdef("accesskey")}}
+
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.
+
{{htmlattrdef("autocapitalize")}}
+
Cet attribut contrôle la façon dont le texte saisi est automatiquement converti en majuscules. Les valeurs autorisées pour cet attribut sont : +
    +
  • off ou none : il n'y pas de convertion en majuscules réalisée.
    • +
  • on ou sentences : la première lettre de chaque phrase est écrite en majuscule par défaut. Les autres lettres sont en minuscules par défaut.
    • +
  • words : la première lettre de chaque mot est écrite en majuscule par défaut, les autres lettres sont en minuscules par défaut.
    • +
  • characters : toutes les lettres sont écrites en majuscules par défaut
    • +
+
+
{{htmlattrdef("class")}}
+
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 à des sélecteurs de classe (pour CSS) ou grâce à des fonctions telles que {{domxref("Document.getElementsByClassName()")}} (pour JavaScript).
+
{{htmlattrdef("contenteditable")}}
+
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 : +
    +
  • true ou la chaîne vide : ces valeurs indiquent que l'élément doit pouvoir être édité
    • +
  • false qui indique que l'élément ne doit pas pouvoir être édité.
    • +
+
+
{{htmlattrdef("contextmenu")}}{{obsolete_inline}}
+
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.
+
{{htmlattrdef("data-*")}}
+
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.
+
{{htmlattrdef("dir")}}
+
Un attribut à valeur contrainte qui indique la directionnalité du texte de l'élément. Les valeurs autorisées pour cet attribut sont : +
    +
  • ltr (l'abbréviation anglaise pour Left To Right) indique que le contenu est écrit de gauche à droite (comme le français par exemple)
    • +
  • rtl (l'abbréviation anglaise pour Right To Left) indique que le contenu est écrit de droite à gauche (comme l'arabe par exemple)
    • +
  • auto : 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.
    • +
+
+
{{htmlattrdef("draggable")}}
+
Un attribut à valeur contrainte qui indique qu'un élément peut être glissé/déposé grâce à l'API Drag & Drop. Les valeurs autorisées pour cet attribut sont : +
    +
  • true : l'élément peut être glissé/déposé
    • +
  • false : l'élément ne peut pas être glissé/déposé.
    • +
+
+
{{htmlattrdef("dropzone")}} {{experimental_inline}}
+
Un attribut à valeur contrainte qui indique le type de contenu qui peut être déposé sur un élément grâce à l'API Drag & Drop. Les valeurs autorisées pour cet attribut sont : +
    +
  • copy : lorsque l'élément est déposé, une copie de l'élément est créée
    • +
  • move : lorsque l'élément est déposé, il est déplacé vers ce nouvel emplacement
    • +
  • link : un lien est créé vers les données qui sont déplacée.
    • +
+
+
{{htmlattrdef("exportparts")}} {{experimental_inline}}
+
Utilisé pour exporter de façon transitive certaines parties d'un arbre shadow sur un arbre réel.
+
{{htmlattrdef("hidden")}}
+
Un attribut booléen dont la valeur indique que l'élément n'est pas encore, ou n'est plus pertinent. 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.
+
{{htmlattrdef("id")}}
+
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.
+
{{htmlattrdef("inputmode")}}
+
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")}}.
+
{{htmlattrdef("is")}}
+
Cet attribut indique qu'un élément HTML standard devrait se comporter comme un élément personnalisé natif (voir Manipuler les custom elements pour plus d'informations).
+
{{htmlattrdef("itemid")}}
+
L'identifiant unique, global, d'un objet. Cet attribut est lié aux microdonnées.
+
{{htmlattrdef("itemprop")}}
+
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é aux microdonnées.
+
{{htmlattrdef("itemref")}}
+
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 itemscope contenant une référence vers un itemref. itemref 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é aux microdonnées.
+
{{htmlattrdef("itemscope")}}
+
itemscope fonctionne généralement avec itemtype afin d'indiquer que le coded HTML contenu dans un bloc donné concerne un objet en particulier. itemscope crée l'objet et définit la portée de l'itemtype associée. itemtype est une URL valide construite à partir d'un vocabulaire (par exemple schema.org) qui décrit les objets et leurs propriétés. Cet attribut est lié aux microdonnées.
+
{{htmlattrdef("itemtype")}}
+
Cet attribut indique l'URL du vocabulaire utilisé pour définir les propriétés d'un objet. Cet attribut est lié aux microdonnées.
+
{{htmlattrdef("lang")}}
+
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 Tags for Identifying Languages (BCP47). L'attribut xml:lang est prioritaire par rapport à cet attribut lorsqu'il s'agit de déterminer la langue d'un élément.
+
{{htmlattrdef("part")}} {{experimental_inline}}
+
Une liste séparée par des espaces avec les noms des parties (parts) de l'élément. Les noms des parties permettent au CSS de cibler et de mettre en forme certains éléments d'un arbre shadow via le pseudo-élément {{cssxref("::part")}}.
+
{{htmlattrdef("slot")}}
+
Cet attribut affecte un créneau de l'arbre du shadow DOM pour un élément. L'élément ayant l'attribut slot 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 slot.
+
{{htmlattrdef("spellcheck")}} {{experimental_inline}}
+
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 : +
    +
  • true qui indique que, si possible, il faut vérifier les erreurs d'orthographe
    • +
  • false qui indique qu'il ne faut pas vérifier les erreurs.
    • +
+
+
{{htmlattrdef("style")}}
+
Cet attribut contient les déclarations CSS 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.
+
{{htmlattrdef("tabindex")}}
+
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 : +
    +
  • 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
    • +
  • 0 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
    • +
  • 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 tabindex. Si plusieurs éléments ont la même valeur, ce sera leur ordre relatif dans le document qui sera utilisé.
    • +
+
+
{{htmlattrdef("title")}}
+
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.
+
{{htmlattrdef("translate")}} {{experimental_inline}}
+
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 : +
    +
  • La chaîne vide ou yes qui indiquent que l'élément doit être traduit
    • +
  • no qui indique que l'élément ne sera pas traduit.
    • +
+
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("HTML WHATWG", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML WHATWG")}}
{{SpecName("CSS Shadow Parts", "#exposing")}}{{Spec2("CSS Shadow parts")}}Ajout des attributs universels part et exportparts.
{{SpecName("HTML5.3", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML5.3")}}
{{SpecName("HTML5.2", "dom.html#global-attributes", "Global attributes")}}{{Spec2("HTML5.2")}}Dérivation de {{SpecName("HTML WHATWG")}}. Depuis, {{SpecName("HTML5.1")}}, les attributs itemid, itemprop, itemref, itemscope et itemtype ont été ajoutés.
{{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}}{{Spec2('HTML5.1')}}Les attributs contextmenu, spellcheck, draggable, et dropzone ont été ajoutés depuis {{SpecName('HTML5 W3C')}}.
{{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}}{{Spec2('HTML5 W3C')}}Le concept d'attribut universel est introduit et les attributs dir, lang, style, id, class, tabindex, accesskey, title sont désormais des attributs universels.
+ xml:lang qui faisait initialement partie de XHTML est inclus dans HTML. Les attributs
+ hidden, data-*, contenteditable et translate sont ajoutés.
{{SpecName('HTML4.01')}}{{Spec2('HTML4.01')}}Aucun attribut universel n'est défini. Plusieurs attributs, devenus universels par la suite, sont définis sur un sous-ensemble d'élément.
+ class et style 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")}}.
+ dir 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")}}.
+ id 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")}}.
+ lang 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")}}.
+ tabindex est uniquement pris en charge pour les éléments {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}} et {{HTMLElement("textarea")}}.
+ accesskey est uniquement pris en charge pour {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} et {{HTMLElement("textarea")}}.
+ title 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")}}.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributs_universels/inputmode/index.html b/files/fr/web/html/attributs_universels/inputmode/index.html new file mode 100644 index 0000000000..2babf82909 --- /dev/null +++ b/files/fr/web/html/attributs_universels/inputmode/index.html @@ -0,0 +1,65 @@ +--- +title: inputmode +slug: Web/HTML/Attributs_universels/inputmode +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/inputmode +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel inputmode est un attribut à valeur contrainte qui fournit une indication au navigateur quant au type de donnée qui peut être saisi par l'utilisateur lors de l'édition de l'élément ou de son contenu. Les valeurs autorisées sont les suivantes :

+ +
+
none
+
Aucun clavier virtuel ne doit être affiché. Cette valeur s'avère utile lorsque l'application ou le site web implémente son propre outil de saisie.
+
text
+
C'est du texte qui sera saisi et un clavier dans la locale de l'utilisateur pourra être affiché.
+
decimal
+
C'est un nombre décimal qui sera saisi. Le clavier affiché peut contenir des chiffres et le séparateur décimal de la locale de l'utilisateur. Attention, selon les appareils, le signe moins (-) peut ne pas être présent.
+
numeric
+
C'est un nombre entier qui sera saisi. Le clavier affiché peut contenir les chiffres de 0 à 9. Attention, selon les appareils, le signe moins (-) peut ne pas être présent.
+
tel
+
C'est un numéro de téléphone qui sera saisi. Le clavier affiché pourra être celui d'un téléphone avec les chiffres allant de 0 à 9, l'astérisque et le dièse. Pour les champs de formulaire où il faut saisir un numéro de téléphone, on utilisera plutôt <input type="tel">.
+
search
+
L'élément éditable sert à la recherche. Le clavier affiché sera optimisé pour une recherche (par exemple, la touche Entrée pourra être indiquée avec le mot-clé « Rechercher »).
+
email
+
C'est une adresse électronique qui sera saisie. Le clavier affiché pourra être optimisé pour la saisie d'adresses email (généralement, on aura le caractère @ et d'autres éléments). Pour les champs de formulaire où il faut saisir une adresse électronique, on utilisera plutôt <input type="email">.
+
url
+
C'est une URL qui sera saisie. Le clavier affiché pourra être optimisé pour la saisie d'URL. Ainsi, la touche pour la barre oblique pourra être plus accessible, le clavier pourra proposer un accès à l'historique des URL utilisées, etc. Pour les champs de formulaire où il faut saisir une URL, on utilisera plutôt <input type="url">.
+
+ +

Lorsque cet attribut n'est pas explicitement défini, sa valeur par défaut est "text", ce qui indique que c'est du texte qui sera saisi et qu'un clavier standard devrait être utilisé.

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("HTML WHATWG", "interaction.html#input-modalities:-the-inputmode-attribute", "inputmode")}}{{Spec2("HTML WHATWG")}}
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.inputmode")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributs_universels/is/index.html b/files/fr/web/html/attributs_universels/is/index.html new file mode 100644 index 0000000000..e460ffc4a3 --- /dev/null +++ b/files/fr/web/html/attributs_universels/is/index.html @@ -0,0 +1,67 @@ +--- +title: is +slug: Web/HTML/Attributs_universels/is +tags: + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/is +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut is est un attribut universel qui indique qu'un élément HTML standard devrait se comporter comme un élément natif personnalisé (custom element) défini (voir Manipuler les custom elements pour plus de détails).

+ +

Cet attribut peut uniquement être utilisé si l'élément personnalisé indiqué a été correctement défini dans le document courant et qu'il étend le type d'élément sur lequel il est appliqué.

+ +

Exemples

+ +

Cet exemple est tiré de l'exemple word-count-web-component (voir le résultat en live).

+ +
// On crée une classe pour l'élément
+class WordCount extends HTMLParagraphElement {
+  constructor() {
+    // On appelle super() pour récupérer l'initialisation
+    // des classes parentes
+    super();
+
+    // Le contenu du constructeur, etc.
+    ...
+
+  }
+}
+
+// On définit le nouvel élément.
+customElements.define('word-count', WordCount, { extends: 'p' });
+ +
<p is="word-count"></p>
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.is")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributs_universels/itemid/index.html b/files/fr/web/html/attributs_universels/itemid/index.html new file mode 100644 index 0000000000..c592936a5d --- /dev/null +++ b/files/fr/web/html/attributs_universels/itemid/index.html @@ -0,0 +1,116 @@ +--- +title: itemid +slug: Web/HTML/Attributs_universels/itemid +tags: + - Attribut + - Attribut universel + - HTML + - Micro-données + - Reference + - itemid +translation_of: Web/HTML/Global_attributes/itemid +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel itemid permet d'identifier un objet, au sens des microdonnées, de façon unique et globale. L'attribut itemid peut uniquement être défini sur les éléments qui ont un attribut {{htmlattrxref("itemscope")}} et un attribut {{htmlattrxref("itemtype")}}. De plus, un itemid ne peut pas être défini sur des éléments dont l'attribut itemscope possède un attribut itemtype qui définit un vocabulaire qui ne prend pas en charge les identifiants globaux tels que défini dans la spécification du vocabulaire.

+ +

La signification exacte d'un identifiant global est déterminée par la spécification du vocabulaire. C'est le rôle de cette spécification d'autoriser ou non la présence de plusieurs éléments avec le même identifiant (sur une ou plusieurs pages) et de définir les règles de gestion associées.

+ +

Syntaxe

+ +

Syntaxe formelle

+ +
itemid="URN"
+ +

Note : Selon la définition du WHATWG, un itemid doit être une URL. Dans l'exemple qui suit, on utilise plutôt une URN, plus appropriée pour définir un identifiant unique comme itemid. Cette incohérence reflète l'état actuellement incomplet de la spécification sur les microdonnées.

+ +

Exemple

+ +

HTML

+ +

Un élément qui décrit un livre :

+ +
<dl itemscope
+    itemtype="http://vocab.example.net/book"
+    itemid="urn:isbn:0-330-34032-8">
+ <dt>Title <dd itemprop="title">The Reality Dysfunction
+ <dt>Author <dd itemprop="author">Peter F. Hamilton
+ <dt>Publication date
+ <dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time> </dl>
+
+ +

Données structurées correspondantes

+ + + + + + + + + + + + + + + + + + + + + + + + +
itemscopeitemtype: itemid +
http://vocab.example.net/book: urn:isbn:0-330-34032-8
+
itemproptitleThe Reality Dysfunction
itempropauthor +
Peter F. Hamilton
+
itemproppubdate1996-01-26
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML Microdata', "#items", "itemid")}}{{Spec2('HTML Microdata')}} 
{{SpecName('HTML WHATWG', "microdata.html#attr-itemid", "itemid")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.itemid")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributs_universels/itemprop/index.html b/files/fr/web/html/attributs_universels/itemprop/index.html new file mode 100644 index 0000000000..956054bb32 --- /dev/null +++ b/files/fr/web/html/attributs_universels/itemprop/index.html @@ -0,0 +1,436 @@ +--- +title: itemprop +slug: Web/HTML/Attributs_universels/itemprop +tags: + - Attribut + - Attribut universel + - HTML + - Micro-données + - Microdata +translation_of: Web/HTML/Global_attributes/itemprop +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel itemprop est utilisé afin d'ajouter des propriétés à un objet. C'est un attribut universel et chaque élément HTML peut donc avoir un attribut itemprop qui permettra de former un couple de nom (la valeur de l'attribut) et de valeur (la valeur de l'élément). Chacune de ces paires constitue une propriété et un groupe de propriété forme un objet (item). Les valeurs des propriétés sont généralement des chaînes de caractères ou des URL et peuvent être associées à de nombreux éléments comme {{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("object")}}, {{HTMLElement("source")}} , {{HTMLElement("track")}} et {{HTMLElement("video")}}.

+ +

Un exemple simple

+ +

HTML

+ +
<div itemscope itemtype="http://schema.org/Movie">
+  <h1 itemprop="name">Avatar</h1>
+  <span>Director:
+    <span itemprop="director">James Cameron</span>
+    (born August 16, 1954)
+  </span>
+  <span itemprop="genre">Science fiction</span>
+  <a href="../movies/avatar-theatrical-trailer.html"
+    itemprop="trailer">Trailer</a>
+</div>
+ +

Structure de données

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Objet
Nom pour itempropValeur pour itemprop
itempropnameAvatar
itempropdirectorJames Cameron
itempropgenreScience fiction
itemproptrailer../movies/avatar-theatrical-trailer.html
+ +

Propriétés

+ +

Les valeurs des propriétés sont généralement des chaînes de caractères ou des URL. Lorsque c'est une URL, on l'exprime grâce à l'élément {{HTMLElement("a")}} et avec son attribut href. Pour un élément {{HTMLElement("img")}}, on lira son attribut src, de même pour les autres éléments HTML qui font appel à d'autres ressources.

+ +

Trois propriétés dont les valeurs sont des chaînes simples

+ +
<div itemscope>
+ <p>My name is
+   <span itemprop="name">Neil</span>.
+ </p>
+ <p>My band is called
+   <span itemprop="band">Four Parts Water</span>.
+ </p>
+ <p>I am
+   <span itemprop="nationality">British</span>.
+ </p>
+</div>
+ +

Une propriété « image » dont la valeur est une URL

+ +
<div itemscope>
+ <img itemprop="image"
+  src="google-logo.png" alt="Google">
+</div>
+
+ +

Une propriété dont la valeur est un identifiant « machine »

+ +
<h1 itemscope>
+ <data itemprop="product-id"
+  value="9678AOU879">The Instigator 2000</data>
+</h1>
+ +

Lorsqu'une chaîne est décrite avec un format machine plutôt qu'un format « humain », on la propriété est exprimée avec la valeur de l'attribut value de l'élément {{HTMLElement("data")}} et c'est le contenu de l'élément qui fournira la valeur humainement compréhensible.

+ +

Un exemple de mesure

+ +
<div itemscope itemtype="http://schema.org/Product">
+ <span itemprop="name">
+   Panasonic White 60L Refrigerator
+ </span>
+ <img src="panasonic-fridge-60l-white.jpg" alt="">
+  <div itemprop="aggregateRating"
+       itemscope
+       itemtype="http://schema.org/AggregateRating">
+   <meter itemprop="ratingValue" min=0 value=3.5 max=5>
+     Rated 3.5/5
+   </meter>
+   (based on <span itemprop="reviewCount">11</span>
+   customer reviews)
+  </div>
+</div>
+ +

Pour les données numériques, on peut utiliser l'élément {{HTMLElement("meter")}} et la valeur de son attribut value.

+ +

Une propriété de date

+ +
<div itemscope>
+ I was born on
+ <time itemprop="birthday" datetime="2009-05-10">
+   May 10th 2009
+ </time>.
+</div>
+ +

Pour les valeurs temporelles, on utilisera les éléments {{HTMLElement("time")}} et son attribut datetime.

+ +

Imbrication de propriétés

+ +
<div itemscope>
+ <p>Name:
+   <span itemprop="name">Amanda</span>
+ </p>
+ <p>Band:
+   <span itemprop="band" itemscope>
+     <span itemprop="name">Jazz Band</span>
+    (<span itemprop="size">12</span> players)
+   </span>
+ </p>
+</div>
+ +

On peut avoir des imbrications de propriétés et utiliser l'attribut itemscope sur l'élément qui porte le groupe.

+ +

L'élément de plus haut niveau possède deux propriétés name et band. La valeur de name est Amanda et la valeur de band est un objet à part entière, composé de deux propriétés name et size. Le valeur pour name est Jazz Band et la valeur de size est 12. L'objet de plus haut niveau est un objet qui ne fait pas partie d'un autre objet.

+ +

Séparation des objets

+ +
<div itemscope id="amanda" itemref="a b"></div>
+<p id="a">Name: <span itemprop="name">Amanda</span></p>
+<div id="b" itemprop="band" itemscope itemref="c"></div>
+<div id="c">
+ <p>Band: <span itemprop="name">Jazz Band</span></p>
+ <p>Size: <span itemprop="size">12</span> players</p>
+</div>
+ +

On obtient le même résultat qu'avec l'exemple précédent. Le premier objet possède deux propriétés name (qui vaut Amanda) et band qui est défini avec un autre objet. Le deuxième objet possède deux propriétés name (qui vaut Jazz Band) et size (qui vaut 12).

+ +

Un objet avec plusieurs occurrences d'une propriété

+ +
<div itemscope>
+ <p>Flavors in my favorite ice cream:</p>
+ <ul>
+  <li itemprop="flavor">Lemon sorbet</li>
+  <li itemprop="flavor">Apricot sorbet</li>
+ </ul>
+</div>
+ +

Cet objet possède deux fois la même propriété flavor, qui prend deux valeurs Lemon sorbet et Apricot sorbet.

+ +

Deux propriétés avec la même valeur

+ +
<div itemscope>
+ <span itemprop="favorite-color favorite-fruit">
+  orange
+ </span>
+</div>
+ +

On peut définir deux propriétés au même endroit si elles prennent la même valeur.

+ +

Équivalence sémantique

+ +
<figure>
+ <img src="castle.jpeg">
+ <figcaption>
+  <span itemscope>
+    <span itemprop="name">The Castle</span>
+  </span>
+  (1986)
+ </figcaption>
+</figure>
+ +
<span itemscope>
+  <meta itemprop="name" content="The Castle">
+</span>
+<figure>
+ <img src="castle.jpeg">
+ <figcaption>The Castle (1986)</figcaption>
+</figure>
+ +

Ces deux exemples sont équivalents d'un point de vue sémantique. Tous les deux se composent d'un schéma et d'une légende et tous les deux possèdent un objet avec une propriété name qui vaut The Castle. Une différence subsiste : si l'utilisateur glisse-dépose l'élément, l'objet sera inclus dans les données. Dans les deux cas, l'image n'est pas associée à l'objet.

+ +

Les noms et les valeurs

+ +

Une propriété est un ensemble non-ordonné de composants uniques sensibles à la casse qui représentent les paires de noms/valeurs. Les valeur doit avoir au moins composant pour se rattacher à l'objet. Dans le tableau ci-après, chaque cellule correspond à un composant.

+ +

Exemples de noms

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Objet
nom pour itempropvaleur pour itemprop
itempropcountryIreland
itempropOption2
itemprophttps://www.flickr.com/photos/nlireland/6992065114/Ring of Kerry
itempropimghttps://www.flickr.com/photos/nlireland/6992065114/
itempropwebsiteflickr
itemprop(token)(token)
+ +

Les composants sont des chaînes de caractères ou des URL. Un objet est appelé un objet typé si c'est une URL. Les chaînes ne peuvent pas contenir de point ou de deux points.

+ +
    +
  1. Si un objet est un objet typé, il doit être : +
      +
    1. Un nom de propriété autorisé par la spécification qui définit les types pertinents pour un objet ou
      2. +
    2. Une URL valide qui est une URL absolue qui définit un nom faisant partie de la spécification du vocabulaire ou
      3. +
    3. Une URL valide qui est une URL absolue utilisée comme un nom propriétaire ou
      4. +
    +
    2. +
  2. Si un objet n'est pas un objet typé, le nom doit être : +
      +
    1. Une chaîne qui ne contient pas de caractères "." (U+002E FULL STOP) ou ":" (U+003A COLON) et qui est utilisée comme un nom « propriétaire » pour la propriété (c'est-à-dire avec un nom qui n'est pas défini dans une spécification publique).
      2. +
    +
    3. +
+ +

Note :  Les caractères « : » sont interdits pour les valeurs qui ne sont pas des URL afin de pouvoir distinguer les URL du reste. Les valeurs avec les caractères « . » sont réservés pour de futurs ajouts et les blancs ne sont pas autorisés car les valeurs seraient analysées comme plusieurs valeurs distinctes.

+ +

Valeurs

+ +

La valeur d'une propriété est définie comme le premier cas qui correspond dans cette liste :

+ + + +

Sinon :

+ + + +

Les éléments qui permettent d'utiliser des attributs URL pour des URL absolues sont : a, area, audio, embed, iframe, img, link, object, source, track et video.

+ +

Ordre des noms

+ +

L'ordre des noms n'a pas d'importance mais si une propriété possède plusieurs valeurs, l'ordre sera relatif pour cette propriété.

+ +

Exemples équivalents

+ +
<div itemscope>
+ <p itemprop="a">1</p>
+ <p itemprop="a">2</p>
+ <p itemprop="b">test</p>
+</div>
+ +
<div itemscope>
+ <p itemprop="b">test</p>
+ <p itemprop="a">1</p>
+ <p itemprop="a">2</p>
+</div>
+ +
<div itemscope>
+ <p itemprop="a">1</p>
+ <p itemprop="b">test</p>
+ <p itemprop="a">2</p>
+</div>
+ +
<div id="x">
+ <p itemprop="a">1</p>
+</div>
+<div itemscope itemref="x">
+ <p itemprop="b">test</p>
+ <p itemprop="a">2</p>
+</div>
+
+ +

Syntaxe

+ +

Syntaxe formelle

+ +
itemprop = "name", value
+ +

Exemples

+ +

HTML

+ +

Un exemple sur un livre qu'on décrit avec les différents attributs.

+ +
<dl itemscope
+    itemtype="http://vocab.example.net/book"
+    itemid="urn:isbn:0-330-34032-8">
+ <dt>Title <dd itemprop="title">The Reality Dysfunction
+ <dt>Author <dd itemprop="author">Peter F. Hamilton
+ <dt>Publication date
+ <dd>
+  <time itemprop="pubdate" datetime="1996-01-26">
+    26 January 1996
+  </time>
+</dl>
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML Microdata', "#dfn-attr-itemprop", "itemprop")}}{{Spec2('HTML Microdata')}} 
{{SpecName('HTML WHATWG', "microdata.html#names:-the-itemprop-attribute", "itemprop")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.itemprop")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributs_universels/itemref/index.html b/files/fr/web/html/attributs_universels/itemref/index.html new file mode 100644 index 0000000000..894df9c87c --- /dev/null +++ b/files/fr/web/html/attributs_universels/itemref/index.html @@ -0,0 +1,97 @@ +--- +title: itemref +slug: Web/HTML/Attributs_universels/itemref +tags: + - Attribut + - Attribut universel + - HTML + - Micro-données + - Microdata + - Reference +translation_of: Web/HTML/Global_attributes/itemref +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel itemref permet d'associer des propriétés à un objet via itemscope lorsque l'élement courant n'est pas un élément descendant. itemref fournit une liste d'identifiants d'éléments (à ne pas confondre avec itemid) dont des propriétés sont définies plus loin dans le document.

+ +

L'attribut itemref peut uniquement être défini sur des éléments pour lesquels un attribut itemscope a été défini.

+ +

Note : L'attribut itemref ne fait pas partie du modèle de données des micro-données. Il s'agit purement d'une construction syntaxique pour aider les auteurs à annoter une page où les données ne suivent pas une structure arborescente claire.

+ +

Syntaxe

+ +

Syntaxe formelle

+ +
itemref
+ +

Exemple

+ +

HTML

+ +
<div itemscope id="amanda" itemref="a b"></div>
+<p id="a">Name: <span itemprop="name">Amanda</span> </p>
+<div id="b" itemprop="band" itemscope itemref="c"></div>
+<div id="c">
+    <p>Band: <span itemprop="name">Jazz Band</span> </p>
+    <p>Size: <span itemprop="size">12</span> players</p>
+</div>
+ +

Structure de données correspondante

+ +

Au format JSON-LD :

+ +
{
+  "@id": "amanda",
+  "name": "Amanda",
+  "band": {
+    "@id": "b",
+    "name": "Jazz Band",
+    "size": 12
+  }
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML Microdata', "#dfn-itemref", "itemref")}}{{Spec2('HTML Microdata')}} 
{{SpecName('HTML WHATWG', "microdata.html#attr-itemref", "itemref")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.itemref")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributs_universels/itemscope/index.html b/files/fr/web/html/attributs_universels/itemscope/index.html new file mode 100644 index 0000000000..5e76969620 --- /dev/null +++ b/files/fr/web/html/attributs_universels/itemscope/index.html @@ -0,0 +1,228 @@ +--- +title: itemscope +slug: Web/HTML/Attributs_universels/itemscope +tags: + - Attribut + - Attribut universel + - HTML + - Micro-données + - Microdata + - Reference +translation_of: Web/HTML/Global_attributes/itemscope +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel itemscope fonctionne généralement avec l'attribut itemtype afin d' indiquer qu'un bloc HTML contient un objet donné. itemscope crée l'objet et définit la portée de l'itemtype associé. Il est possible d'associer un attribut itemscope à n'importe quel élément HTML.

+ +

Les identifiants rattachés à itemscope

+ +

Un élément qui possède un attribut itemscope permet de définir un nouvel élément qui sera un groupe de paires de noms/valeurs. Les éléments qui ont un attribut itemscope et un attribut itemtype peuvent également définir un attribut id (à ne pas confondre avec itemid) pour identifier de façon unique l'élément sur le Web.

+ +

Syntaxe

+ +

Syntaxe formelle

+ +
itemscope
+ +

Exemple

+ +

Dans cet exemple, on a trois attributs itemscopes. Ces trois itemscopes définissent les portées respectives des itemtypes correspondants qui sont : Recipe, AggregateRating et NutritionInformation.

+ +

HTML

+ +
<div itemscope itemtype="https://schema.org/Recipe">
+<h2 itemprop="name">Grandma's Holiday Apple Pie</h2>
+<img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50"/>
+<p>By <span itemprop="author" itemscope itemtype="https://schema.org/Person">
+<span itemprop="name">Carol Smith</p></span>
+</span>
+<p>Published: <time datetime="2009-11-05" itemprop="datePublished">
+November 5, 2009</p></time>
+<span itemprop="description">This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.<br></span>
+ <span itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
+ <span itemprop="ratingValue">4.0</span> stars based on <span itemprop="reviewCount">35</span> reviews<br></span>
+Prep time: <time datetime="PT30M" itemprop="prepTime">30 min<br></time>
+ Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour<br></time>
+ Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min<br></time>
+ Yield: <span itemprop="recipeYield">1 9" pie (8 servings)<br></span>
+ <span itemprop="nutrition" itemscope itemtype="https://schema.org/NutritionInformation">
+ Serving size: <span itemprop="servingSize">1 medium slice<br></span>
+ Calories per serving: <span itemprop="calories">250 cal<br></span>
+ Fat per serving: <span itemprop="fatContent">12 g<br></span>
+</span>
+<p>Ingredients:<br>
+  <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br></span>
+  <span itemprop="recipeIngredient">White sugar: 3/4 cup<br></span>
+ ... </p>
+
+Directions: <br>
+  <div itemprop="recipeInstructions">
+    1. Cut and peel apples<br>
+    2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br>
+    ...
+  </div>
+</div>
+ +

Structure des données

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
itemscopeitemtypeRecipe
itempropname:Grandma's Holiday Apple Pie
itempropimage: +
https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg
+
itempropdatePublished:2009-11-05
itempropdescription:This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.
itempropprepTime:PT30M
itempropcookTime:PT1H
itemproptotalTime:PT1H30M
itemproprecipeYield:1 9" pie (8 servings)
itemproprecipeIngredient:Thinly-sliced apples: 6 cups
itemproprecipeIngredient:White sugar: 3/4 cup
itemproprecipeInstructions: +
1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .
+
itempropauthor [Person]:
itempropname:Carol Smith
itemscopeitemprop[itemtype]aggregateRating [AggregateRating]:
itempropratingValue:4.0
itempropreviewCount:35
itemscopeitemprop[itemtype]nutrition [NutritionInformation]:
itempropservingSize:1 medium slice
itempropcalories:250 cal
itempropfatContent:12 g
+ +
+

Note : Pour extraire des micro-données d'un document HTML, vous pouvez utiliser l'outil d'extraction de Google pour les micro-données. Vous pouvez par exemple utiliser le document HTML précédent.

+
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML Microdata', "#dfn-itemscope", "itemscope")}}{{Spec2('HTML Microdata')}} 
{{SpecName('HTML WHATWG', "microdata.html#attr-itemscope", "itemscope")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.itemscope")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributs_universels/itemtype/index.html b/files/fr/web/html/attributs_universels/itemtype/index.html new file mode 100644 index 0000000000..5d3ce08694 --- /dev/null +++ b/files/fr/web/html/attributs_universels/itemtype/index.html @@ -0,0 +1,113 @@ +--- +title: itemtype +slug: Web/HTML/Attributs_universels/itemtype +tags: + - Attribut + - Attribut universel + - HTML + - Micro-données + - Microdata + - Référence(2) +translation_of: Web/HTML/Global_attributes/itemtype +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel itemtype définit l'URL du vocabulaire qui sera utilisé pour définir les propriétés des objets dans la structure de données. itemscope est utilisé afin de définir la portée, dans le document, où le vocabulaire défini sera actif.

+ +

L'attribut itemtype doit avoir une valeur qui est un ensemble non ordonné de fragments uniques, sensible à la casse. Chaque fragment doit être une URL absolue valide et tous les fragments participent à la définition du même vocabulaire. La valeur de l'attribut doit avoir au moins un fragment.

+ +

Les types d'objet doivent tous être définis dans des spécifications de vocabulaire (comme schema.org) et doivent tous être définis avec le même vocabulaire.

+ +

L'attribut itemtype peut uniquement être défini pour les éléments qui ont un attribut itemscope.

+ +

Google et les autres moteurs de recherche participent au vocabulaire défini par schema.org pour structurer les données. Ce vocabulaire définit un ensemble standard de types et de noms de propriétés. Par exemple MusicEvent indique un événement musical dont les propriétés startDate et location utilisées pour définir les détails du concert. Dans ce cas, l'URL http://schema.org/MusicEvent sera l'URL utilisée pour l'attribut itemtype et les propriétés startDate et location seront les propriétés utilisées, définies par http://schema.org/MusicEvent.

+ +
+

Note : Vous pourrez trouver plus d'informations sur l'attribut itemtype sur http://schema.org/Thing

+
+ +

Syntaxe

+ +

Syntaxe formelle

+ +
itemtype = URL
+ +

Exemple simple

+ +

HTML

+ +
<div itemscope itemtype="http://schema.org/Product">
+  <span itemprop="brand">ACME</span>
+  <span itemprop="name">Executive Anvil</span>
+</div>
+ +

Structure de données

+ + + + + + + + + + + + + + + + + + + + + + + +
itemscopeitemtypehttp://schema.org/Product
itempropnameExecutive Anvil
itempropbrand [Thing]
itempropnameACME
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML Microdata', "#dfn-itemtype", "itemtype")}}{{Spec2('HTML Microdata')}} 
{{SpecName('HTML WHATWG', "microdata.html#attr-itemtype", "itemprop")}}{{Spec2('HTML WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.itemtype")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributs_universels/lang/index.html b/files/fr/web/html/attributs_universels/lang/index.html new file mode 100644 index 0000000000..6a45c3ed2a --- /dev/null +++ b/files/fr/web/html/attributs_universels/lang/index.html @@ -0,0 +1,86 @@ +--- +title: lang +slug: Web/HTML/Attributs_universels/lang +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/lang +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel lang permet de 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. Pour les éléments éditables, c'est la langue dans laquelle devrait écrire l'utilisateur. La valeur de cet attribut est une « balise de langue » dont le format est défini par le document de l'IETF : Les balises d'identification de langues (BCP47). Si cette balise est la chaîne vide, la langue sera définie comme inconnue. Si la balise de langue n'est pas valide selon BCP47, la langue sera définie comme invalide.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-lang.html","tabbed-shorter")}}
+ + + +

Même lorsque l'attribut lang est défini, il peut ne pas être pris en compte. En effet, l'attribut {{htmlattrxref("xml:lang")}} aura la priorité sur celui-ci.

+ +

Pour la pseudo-classe CSS {{cssxref(":lang")}}, deux noms de langues invalides sont considérés différents si les noms utilisés sont différents. Par exemple, alors que :lang(fr) permet l'appariement avec les déclarations (valides) lang="fr-BE" ou lang="fr-CH", un encodage (invalide) comme :lang(xyzzy) ne permet pas l'appariement avec une déclaration (invalide) comme lang="xyzzy-Zorp!".

+ +

Syntaxe des balises de langue

+ +

La syntaxe complète décrite par la BCP 47 est suffisamment développée pour désigner certains dialectes spécifiques. Toutefois, dans la plupart des cas, l'utilisation sera assez simple.

+ +

Voici un aperçu de la syntaxe simplifiée. Une balise de langue est composées de trois « sous-balises » séparées par des tirets. Chacune de ces sous-balises indique une certaine propriété de la langue. Les trois sous-balises communément utilisées sont :

+ +
+
Sous-balise de langue
+
Ce fragment est obligatoire. C'est un code sur deux ou trois caractères (généralement en minuscules) qui définit la langue de base. Pour l'anglais, cette sous-balise est en et pour le Badeshi, cette balise est bdz.
+
Sous-balise de script
+
Ce fragment est optionnel. Il décrit le système d'écriture utilisé par la langue. Cette sous-balise contient toujours quatre caractères. Pour le braille français, la balise complète sera donc fr-Brail ; pour le japonais écrit avec l'alphabet Katakana, le code sera ja-Kana. Si la langue est utilisée avec le script le plus fréquemment utilisé (par exemple de l'espagnol écrit avec l'alphabet latin), il n'est pas nécessaire d'indiquer cette sous-balise.
+
Sous-balise régionale
+
Ce fragment est optionnel. Il définit un dialecte de la langue de base pour une région donnée. Cette sous-balise est composée de deux lettres en majuscules pour indiquer un pays ou de trois chiffres pour une indiquer une région qui n'est pas un pays. Ainsi, es-ES représente l'espagnol parlé en Espagne et es-013 représente l'espagnol parlé en Amérique centrale ; l'espagnol international serait simplement es.
+
+ +

La sous-balise de script doit précéder la sous-balise régionale si les deux sont présentes. Voici un exemple avec les trois fragments : ru-Cyrl-BY qui correspond au russe, écrit avec l'alphabet cyrillique, tel que parlé en Biélorussie.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML WHATWG')}}Aucun changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, aucun changement de {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}{{Spec2('HTML5 W3C')}}Dérivée de {{SpecName('HTML WHATWG')}}. Définition du comportement de l'attribut xml:lang et de l'algorithme à utiliser pour déterminer la langue utilisée. Cet attribut devient également un attribut global à part entière.
{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}{{Spec2('HTML4.01')}}Attribut supporté pour tous les éléments {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, et {{HTMLElement("script")}}.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.lang")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributs_universels/slot/index.html b/files/fr/web/html/attributs_universels/slot/index.html new file mode 100644 index 0000000000..c6b96098a0 --- /dev/null +++ b/files/fr/web/html/attributs_universels/slot/index.html @@ -0,0 +1,49 @@ +--- +title: slot +slug: Web/HTML/Attributs_universels/slot +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/slot +--- +
{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}
+ +

L'attribut HTML universel slot permet d'affecter un créneau d'un shadow DOM à un élément. Un élément avec un attribut slot est affecté au créneau créé par l'élément {{HTMLElement("slot")}} dont la valeur de l'attribut {{htmlattrxref("name", "slot")}} correspond à celle de l'attribut slot.

+ +

Pour des exemples d'application, consulter le guide Utiliser les modèles (templates) et les emplacements (slots).

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#attr-slot", "slot attribute")}}{{Spec2('HTML WHATWG')}} 
{{SpecName('DOM WHATWG', "#dom-element-slot", "slot attribute")}}{{Spec2('DOM WHATWG')}} 
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.slot")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributs_universels/spellcheck/index.html b/files/fr/web/html/attributs_universels/spellcheck/index.html new file mode 100644 index 0000000000..efc982d646 --- /dev/null +++ b/files/fr/web/html/attributs_universels/spellcheck/index.html @@ -0,0 +1,153 @@ +--- +title: spellcheck +slug: Web/HTML/Attributs_universels/spellcheck +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/spellcheck +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel spellcheck est un attribut à valeur contrainte qui définit si l'orthographe du contenu de l'élément doit être vérifiée.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-spellcheck.html","tabbed-shorter")}}
+ + + +

Les valeurs autorisées pour cet attribut sont :

+ + + +

La valeur par défaut de l'attribut (utilisée si elle n'est pas définie explicitement) sera fonction du navigateur et du type d'élément. Cette valeur par défaut peut également être héritée (autrement dit, la valeur utilisée pour l'élément courant sera la valeur explicite définie pour son plus proche ancêtre dans l'arbre des éléments).

+ +

Cet attribut est un attribut à valeur contrainte, ce n'est pas un attribut booléen. Il faut donc utiliser explicitement les valeurs true ou false. Ainsi :

+ +
<label spellcheck>Label exemple</label>
+ +

sera invalide, la formulation correcte étant :

+ +
<label spellcheck="true">Label exemple</label>
+ +

Cet attribut n'est qu'une indication à destination du navigateur : il n'est pas obligatoire qu'un navigateur puisse vérifier l'orthographe. Les éléments non-éditables ne sont généralement pas vérifiés, même lorsque spellcheck vaut true et que le navigateur possède une fonctionnalité de vérification orthographique.

+ +

La valeur par défaut sera différente selon l'élément et le navigateur :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Navigateur{{HTMLElement("html")}}{{HTMLElement("textarea")}}{{HTMLElement("input")}}AutresCommentaires
Firefox / GeckofalsefalsefalsehéritéLorsque layout.spellcheckDefault vaut 0
falsetruehéritéhéritéLorsque layout.spellcheckDefault vaut 1 (valeur par défaut)
falsetruetruehéritéLorsque layout.spellcheckDefault vaut 2
Chromefalsetrue?hérité
Internet Explorerfalsetrue?hérité
Operafalsetrue?hérité
Safarifalsetrue?hérité
+ +

Exemples

+ +

HTML

+ +
<!-- La valeur par défaut -->
+<textarea>Saisissay un texte issy</textarea>
+
+<!-- Les valeurs explicites -->
+<textarea spellcheck="true">Saisissay un texte issy</textarea>
+<textarea spellcheck="false">Saisissay un texte issy</textarea>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","200","300")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "interaction.html#spelling-and-grammar-checking", "spellcheck")}}{{Spec2('HTML WHATWG')}}Pas de changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#spelling-and-grammar-checking", "spellcheck")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.spellcheck")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributs_universels/style/index.html b/files/fr/web/html/attributs_universels/style/index.html new file mode 100644 index 0000000000..3da865a0e9 --- /dev/null +++ b/files/fr/web/html/attributs_universels/style/index.html @@ -0,0 +1,92 @@ +--- +title: style +slug: Web/HTML/Attributs_universels/style +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/style +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel style contient des déclarations CSS afin de mettre en forme l'élément. Attention, il est recommandé de définir les règles de mise en forme dans un ou plusieurs fichiers séparés. Cet attribut, ainsi que l'élément {{HTMLElement("style")}} ont simplement pour but de permettre une mise en forme rapide, notamment pour tester.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-style.html","tabbed-shorter")}}
+ + + +
+

Note : Cet attribut ne doit pas être utilisé à des fins sémantiques. En effet, si toute mise en forme est retirée, toute page doit rester correcte d'un point de vue sémantique. On ne devrait pas, notamment, utiliser cet attribut afin de cacher des informations qui ne seraient pas pertinentes (cela devrait être réalisé avec l'attribut {{htmlattrxref("hidden")}}.

+
+ +

Exemples

+ +

HTML

+ +
<p style="color: rgb(255, 0, 0)">
+  Cette méthode n'est pas vraiment recommandée
+</p>
+
+<p class="toto">
+  Alors que ça, c'est mieux.
+</p>
+ +

CSS

+ +
.toto {
+  color: rgb(0, 255, 0);
+}
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","300","300")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis la dernière dérivation de {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, aucune modification depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-style-attribute", "style")}}{{Spec2('HTML5 W3C')}}Dérivée de {{SpecName('HTML WHATWG')}}. Depuis {{SpecName("HTML4.01")}}, cet attribut est désormais un attribut universel.
{{SpecName('HTML4.01', 'present/styles.html#h-14.2.2', 'style')}}{{Spec2('HTML4.01')}}Cet attribut est pris en charge par 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")}}.
{{SpecName("CSS3 Style", "", "")}}{{Spec2("CSS3 Style")}}Définition du contenu pour l'attribut style.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.style")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributs_universels/tabindex/index.html b/files/fr/web/html/attributs_universels/tabindex/index.html new file mode 100644 index 0000000000..87aa27e5cc --- /dev/null +++ b/files/fr/web/html/attributs_universels/tabindex/index.html @@ -0,0 +1,115 @@ +--- +title: tabindex +slug: Web/HTML/Attributs_universels/tabindex +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/tabindex +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel tabindex est un entier indiquant si l'élément peut capturer le focus et si c'est le cas, dans quel ordre il le capture lors de la navigation au clavier (généralement à l'aide de la touche Tab). Si plusieurs éléments partagent la même valeur d'attribut tabindex, leur ordre sera calculé en fonction de leur position dans le document.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.html","tabbed-standard")}}
+ + + +

Cet attribut peut prendre l'une des valeurs suivantes :

+ + + +

Si on utilise l'attribut tabindex sur un élément {{HTMLElement("div")}}, on ne pourra pas naviguer dans le contenu de cet élément avec les flèches du clavier, sauf si tabindex est également utilisé sur le contenu. Pour observer ce comportement, vous pouvez utiliser cet exemple JSFiddle.

+ +
+

Note : La valeur maximale pour tabindex est fixée à 32767 par HTML4. Sa valeur par défaut est 0 pour les éléments qui peuvent recevoir le focus et -1 pour les autres.

+
+ +

Exemples

+ +

HTML

+ +
<button tabindex="1">Un bouton</button>
+<textarea>Saisir un texte</textarea>
+<button tabindex="0">Un autre bouton</button>
+<button tabindex="1">Et un troisième</button>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","200","300")}}

+ +

Accessibilité

+ +

Il faut éviter d'utiliser l'attribut tabindex avec du contenu non-interactif si on souhaite uniquement rendre cet élément accessible au clavier (par exemple en voulant utiliser un élément {{HTMLElement("div")}} plutôt qu'un élément {{HTMLElement("button")}}).

+ +

Les composants rendus interactifs par cette méthode ne feront pas partie de l'arbre d'accessibilité et ne pourront pas être analysés par les technologies d'assistance. Le contenu devrait être décrit sémantiquement avec des éléments interactifs ({{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, etc.). En effet, ces éléments disposent nativement de rôles et d'états qui peuvent être utilisées par les API d'accessibilité (il faut sinon les gérer via ARIA).

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "interaction.html#attr-tabindex", "tabindex")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis la dernière dérivation, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-tabindex-attribute", "tabindex")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, aucune modification depuis {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}{{Spec2('HTML5 W3C')}}Dérivée de {{SpecName('HTML WHATWG')}}. À partir de {{SpecName("HTML4.01")}}, l'attribut est désormais supporté sur tous les éléments, c'est un attribut global à part entière.
{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}{{Spec2('HTML4.01')}}Attribut uniquement supporté sur {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, et {{HTMLElement("textarea")}}.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.tabindex")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributs_universels/title/index.html b/files/fr/web/html/attributs_universels/title/index.html new file mode 100644 index 0000000000..06f0feee8d --- /dev/null +++ b/files/fr/web/html/attributs_universels/title/index.html @@ -0,0 +1,129 @@ +--- +title: title +slug: Web/HTML/Attributs_universels/title +tags: + - Attribut + - Attribut universel + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/title +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel title contient un texte d'information relatif à l'élément auquel il est rattaché.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-title.html","tabbed-shorter")}}
+ + + +

On le trouve généralement utilisé pour :

+ + + +

Si cet attribut est absent, cela signifie que le titre de l'élément ancêtre le plus proche est toujours pertinent (et pourrait être utilisé comme bulle d'information pour l'élément courant). Si cet attribut vaut la chaîne vide, cela signifie explicitement que la valeur du titre de l'ancêtre le plus proche n'est pas pertinent (et ne devrait pas être utilisé comme bulle d'information).

+ +

Une sémantique différente est définie pour cet attribut lorsqu'il est utilisé avec les éléments {{HTMLElement("link")}}, {{HTMLElement("abbr")}}, {{HTMLElement("input")}} et {{HTMLElement("menuitem")}}.

+ +

Titre sur plusieurs lignes

+ +

Un attribut title peut contenir plusieurs lignes. Chaque caractère U+000A LINE FEED (LF) représentera un saut de ligne. Le fragment de code suivant représente donc un élément dont le titre est écrit sur deux lignes.

+ +

HTML

+ +
<p>
+  Les sauts de ligne au sein d'un attribut title doivent être pris en compte :
+  <abbr title="Ceci est un
+  titre sur plusieurs lignes">Exemple</abbr>.
+</p>
+
+ +

Résultat

+ +

{{EmbedLiveSample("Titre_sur_plusieurs_lignes")}}

+ +

Héritage de title

+ +

Lorsqu'un élément ne possède pas d'attribut title, il hérite de la valeur de l'attribut pour l'élément parent (qui peut également l'hériter de son parent, etc.).

+ +

Si cet attribut est défini avec la chaîne vide, cela signifie que le titre provenant d'un élément parent n'est pas pertinent et qu'il ne devrait pas être utilisé.

+ +

HTML

+ +
<div title="Une bubulle">
+  <p>Si vous survolez cet élément, il y aura une bulle d'information "Une bubulle".</p>
+  <p title="">Et au-dessus de celui-ci, aucune info.</p>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample("Héritage_de_title")}}

+ +

Accessibilité

+ +

L'attribut title est très problématique pour :

+ + + +

Cela est dû à une prise en charge hétérogène de la part des navigateurs. Si on souhaite avoir une bulle d'information, mieux vaudra utiliser une technique plus accessible.

+ + + +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "elements.html#the-title-attribute", "title")}}{{Spec2('HTML WHATWG')}}Aucune modification depuis {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}{{Spec2('HTML5.1')}}Dérivation de {{SpecName('HTML WHATWG')}}, aucune modification de {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}{{Spec2('HTML5 W3C')}}Dérivation de {{SpecName('HTML WHATWG')}}. À partir de {{SpecName("HTML4.01")}}, title est désormais un attribut universel.
{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}{{Spec2('HTML4.01')}}Pris en charge par l'ensemble des éléments sauf {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}} et {{HTMLElement("title")}}.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.title")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributs_universels/translate/index.html b/files/fr/web/html/attributs_universels/translate/index.html new file mode 100644 index 0000000000..215800e5ff --- /dev/null +++ b/files/fr/web/html/attributs_universels/translate/index.html @@ -0,0 +1,71 @@ +--- +title: translate +slug: Web/HTML/Attributs_universels/translate +tags: + - Attribut + - Attribut universel + - Experimental + - HTML + - Reference +translation_of: Web/HTML/Global_attributes/translate +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

L'attribut universel translate est un attribut à valeur contrainte qui peut être utilisé afin d'indiquer si les valeurs d'attribut d'un élément et si les valeurs de ses nœuds {{domxref("Text")}} descendants doivent être traduits lorsque la page est localisée ou s'il faut les laisser inchangés. Les valeurs autorisées pour cet attribut sont :

+ + + +
+

Note : Bien que la prise en charge de cet attribut ne soit pas homogène pour les navigateurs, celui-ci est pris en compte par les outils de traduction automatique (Google Translate par exemple) et les outils de traduction utilisés par les traducteurs. Aussi, cet attribut doit être utilisé par les auteurs web afin d'indiquer correctement le contenu qui ne devrait pas être traduit.

+
+ +

Exemples

+ +

HTML

+ +
<label for="postcode" translate="no">
+   <span translate="yes">Enter your postcode to find the nearest store</span>
+</label>
+<input id="postcode" type="text">
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","250","250")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', "dom.html#attr-translate", "translate")}}{{Spec2('HTML WHATWG')}}Aucun changement depuis la dernière dérivation {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#the-translate-attribute", "translate")}}{{Spec2('HTML5.1')}}Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("html.global_attributes.translate")}}

+ +

Voir aussi

+ + diff --git a/files/fr/web/html/attributs_universels/x-ms-acceleratorkey/index.html b/files/fr/web/html/attributs_universels/x-ms-acceleratorkey/index.html new file mode 100644 index 0000000000..f03780b703 --- /dev/null +++ b/files/fr/web/html/attributs_universels/x-ms-acceleratorkey/index.html @@ -0,0 +1,45 @@ +--- +title: x-ms-acceleratorkey +slug: Web/HTML/Attributs_universels/x-ms-acceleratorkey +tags: + - Attribut + - HTML + - Non-standard + - Reference +translation_of: Web/HTML/Global_attributes/x-ms-acceleratorkey +--- +
{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}
+ +

La propriété x-ms-acceleratorkey fournit une méthode pour déclarer si une touche d'accélération a été affectée à un élément.

+ +
+

Note : Pour fournir un raccourci clavier pour un élément qui n'utilise pas JavaScript, on utilisera l'attribut accesskey.

+
+ +

{{Non-standard_Inline}} Cette propriété non-standard est spécifique à Internet Explorer et à Microsoft Edge.

+ +

La propriété x-ms-acceleratorkey permet d'indiquer sur l'arbre d'accessibilité (utilisé par les outils d'assistance tels que les lecteurs d'écran) qu'une touche d'accélération existe. Cet attribut ne fournit pas le comportement déclenché par cette touche. Il est nécessaire de fournir les gestionnaires d'évènements associés tels que onkeypress, onkeydown ou onkeyup afin de traiter l'utilisation de la touche dans l'application.

+ + + +

Syntaxe

+ +
<button x-ms-acceleratorkey="string">...</button>
+ +

Valeur

+ +

Cette propriété peut être une chaîne de caractères avec le nom de la touche accélératrice :

+ + + +

Voir aussi

+ + diff --git a/files/fr/web/html/attributs_universels/x-ms-format-detection/index.html b/files/fr/web/html/attributs_universels/x-ms-format-detection/index.html new file mode 100644 index 0000000000..f11309e1b5 --- /dev/null +++ b/files/fr/web/html/attributs_universels/x-ms-format-detection/index.html @@ -0,0 +1,60 @@ +--- +title: x-ms-format-detection +slug: Web/HTML/Attributs_universels/x-ms-format-detection +tags: + - Attribut + - HTML + - Non-standard + - Reference +translation_of: Web/HTML/Global_attributes/x-ms-format-detection +--- +
{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}
+ +

L'attribut x-ms-format-detection détermine si le format de la donnée dans le contenu est détectée automatiquement et, lorsqu'elle est trouvée, est convertie en un lien sur lequel on peut cliquer.

+ +
+

Note : Les liens créés grâce à la détection de format n'apparaissent pas dans le DOM.

+
+ +

{{Non-standard_inline}}Cette propriété est spécifique à Internet Explorer et à Microsoft Edge.

+ +

Syntaxe

+ +
<html x-ms-format-detection="none">
+
+ +

Valeurs

+ +

Cet attribut peut prendre une chaîne de caractères parmi les suivantes comme valeur :

+ +
+
all
+
Tous les formats de donnée pris en charge sont détectés.
+
none
+
La détection de format est désactivée.
+
phone
+
Seuls les numéros de téléphone sont détectés.
+
+ +
+

Note : Les liens créés via la détection de format n'auront pas d'impact sur le contenu ou sur la disposition du DOM.

+
+ +

Exemples

+ +

Pour désactiver la détection automatique sous certaines conditions, on pourra par exemple utiliser JavaScript afin d'ajouter x-ms-format-detection sur les éléments qu'on soit sur un mobile (détection activée) ou sur un ordinateur de bureau (détection désactivée) :

+ +
if (window.matchMedia('(min-width: 1024px)').matches) {
+    var e = document.getElementsByClassName("phone");
+    for (i = 0; i < e.length; i++)
+        e[i].setAttribute("x-ms-format-detection", "none");
+}
+
+ +

Dans cet exemple, les numéros de téléphone conservent la mise en forme tant que la zone d'affichage (viewport) est moins large que 1024 pixels.

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf