Attributs globaux
81 attributs documentés
Les attributs globaux sont des attributs qui peuvent être utilisés sur n'importe quel élément HTML. Ils permettent d'ajouter des fonctionnalités ou de modifier le comportement d'un élément de manière générique.
Identité & Style
-
classAssigne une ou plusieurs classes CSS à un élément, utilisées pour le style et la sélection JavaScript. -
idDéfinit un identifiant unique pour un élément dans le document. Utilisé pour les ancres, la liaison de formulaires, et la sélection CSS/JS. -
styleApplique des déclarations CSS inline directement sur un élément. Haute spécificité — à utiliser avec parcimonie pour des styles dynamiques ou d'exception. -
titleFournit un texte consultatif sur un élément, affiché en infobulle au survol de la souris. Son utilisation comme seul vecteur d'information est déconseillée pour l'accessibilité.
Langue & Texte
-
autocapitalizeContrôle la mise en majuscule automatique des saisies texte sur les appareils mobiles et claviers virtuels. -
dirDéfinit la direction du texte dans un élément : gauche-droite (ltr), droite-gauche (rtl), ou automatique (auto). -
langDéclare la langue du contenu de l'élément au format BCP 47 (ex. fr, en-US, ar). Essentiel pour l'accessibilité et la typographie correcte. -
spellcheckActive ou désactive la vérification orthographique et grammaticale du navigateur pour le contenu éditable d'un élément. -
translateIndique si le contenu textuel d'un élément doit être traduit par les outils de traduction automatique (Google Translate, DeepL, etc.). -
writingsuggestionsActive ou désactive les suggestions d'écriture assistée par l'IA du navigateur (complétion automatique, reformulation) sur les éléments éditables.
Interaction
-
accesskeyDéfinit un raccourci clavier pour activer ou mettre le focus sur un élément. La valeur est une liste de caractères séparés par des espaces. -
autofocusDonne automatiquement le focus à l'élément au chargement de la page ou à l'affichage du dialogue/popover parent. -
contenteditableRend le contenu d'un élément éditable directement dans le navigateur. Permet de créer des éditeurs de texte riches sans champ de formulaire. -
draggableIndique si l'élément peut être glissé-déposé avec l'API Drag and Drop HTML5. -
enterkeyhintPersonnalise le libellé ou l'icône de la touche Entrée sur les claviers virtuels mobiles selon l'action attendue. -
hiddenCache un élément et son contenu, le rendant inaccessible visuellement et aux technologies d'assistance. Variante until-found permet la recherche dans la page. -
inertRend un élément et tous ses descendants inactifs : ils ne reçoivent plus d'événements, sont exclus de la navigation au clavier et invisibles aux technologies d'assistance. -
inputmodeIndique au navigateur quel type de clavier virtuel afficher lors de la saisie dans un champ, sans changer la validation du type d'input. -
popoverActive l'API Popover sur un élément, le rendant affichable comme couche flottante gérée nativement par le navigateur, sans JavaScript requis pour les cas simples. -
tabindexContrôle si un élément est focalisable via le clavier et son ordre dans la séquence de navigation Tab. Valeur 0 pour focalisable, -1 pour focalisable uniquement via JS. -
virtualkeyboardpolicyContrôle le comportement du clavier virtuel sur les éléments éditables dans les appareils tactiles : déclenchement automatique ou manuel via JavaScript.
Données & Logique
-
data-*Permet de stocker des données personnalisées sur un élément HTML. Le suffixe après data- est libre et accessible via JavaScript avec dataset. -
dirnameIndique au navigateur de soumettre la direction du texte saisi dans un champ de formulaire en ajoutant une entrée supplémentaire dans les données envoyées. -
isPermet d'instancier un élément HTML natif en tant qu'élément personnalisé étendu (Customized Built-in Element), défini via customElements.define. -
nonceFournit un jeton cryptographique à usage unique pour autoriser l'exécution d'un script ou d'une feuille de style inline dans le contexte d'une Content Security Policy (CSP).
Composants Web
-
exportpartsPermet à un Web Component d'exposer les parts de son Shadow DOM à travers plusieurs niveaux d'imbrication de composants. -
partExpose un élément du Shadow DOM d'un Web Component au CSS externe via le pseudo-élément ::part(), permettant une personnalisation contrôlée. -
slotAssigne un élément à un slot nommé dans le Shadow DOM d'un Web Component, permettant la projection de contenu dans une position spécifique du composant.
Microdonnées
-
itemidSpécifie l'identifiant global unique d'un item de microdata, sous forme d'URL. Utilisé conjointement avec itemscope et itemtype. -
itempropAssigne une propriété de microdata à un élément, associant une valeur à un nom de propriété dans le contexte d'un itemscope. -
itemrefRéférence des éléments supplémentaires (par leur id) contenant des propriétés microdata qui font partie de l'item mais ne sont pas des descendants de l'élément itemscope. -
itemscopeDélimite la portée d'un item de microdata. Les éléments descendants portant itemprop appartiennent à cet item. -
itemtypeSpécifie le vocabulaire utilisé pour définir les propriétés d'un item microdata, sous forme d'une URL absolue (ex. https://schema.org/Person).
Accessibilité (ARIA)
-
aria-activedescendantIdentifie l'élément descendant actuellement actif dans un widget composite qui conserve le focus sur l'élément parent. -
aria-atomicIndique si les technologies d'assistance doivent annoncer l'intégralité d'une région live modifiée, ou seulement la partie qui a changé. -
aria-autocompleteIndique si la saisie dans un champ peut déclencher des suggestions d'autocomplétion, et comment elles sont présentées. -
aria-busyIndique qu'une région est en cours de mise à jour et que les technologies d'assistance doivent attendre la fin du chargement avant d'annoncer les changements. -
aria-checkedIndique l'état coché d'un élément à deux ou trois états (case à cocher, bouton radio, commutateur). -
aria-colcountDéfinit le nombre total de colonnes d'un tableau ou d'une grille, lorsque toutes les colonnes ne sont pas présentes dans le DOM. -
aria-colindexIndique la position de colonne d'une cellule dans un tableau ou une grille dont toutes les colonnes ne sont pas rendues dans le DOM. -
aria-colspanDéfinit le nombre de colonnes que couvre une cellule dans un tableau ou une grille. -
aria-controlsIdentifie l'élément (ou les éléments) dont le contenu ou l'affichage est contrôlé par l'élément courant. -
aria-currentIndique l'élément qui représente l'état courant dans un ensemble de navigation ou de progression (page active, étape actuelle, date du jour...). -
aria-describedbyIdentifie l'élément (ou les éléments) qui fournit une description complémentaire à l'élément courant. -
aria-descriptionFournit une description textuelle accessible à un élément, comme alternative inline à aria-describedby. -
aria-detailsRéférence un élément qui fournit des informations détaillées sur l'élément courant, sous une forme plus riche qu'un simple texte. -
aria-disabledIndique qu'un élément est perçu comme désactivé, sans le retirer de l'arbre d'accessibilité ni de l'ordre de tabulation. -
aria-errormessageIdentifie l'élément qui contient le message d'erreur pour un champ dont la valeur est invalide. -
aria-expandedIndique si un élément de contrôle est actuellement développé (ouvert) ou réduit (fermé). -
aria-flowtoIndique le prochain élément dans l'ordre de lecture alternatif, permettant aux utilisateurs de AT de suivre un flux de lecture non linéaire. -
aria-haspopupIndique qu'un élément peut déclencher l'ouverture d'un popup, et précise le type de ce popup. -
aria-hiddenMasque un élément et ses descendants de l'arbre d'accessibilité, les rendant invisibles aux technologies d'assistance. -
aria-invalidIndique qu'une valeur saisie ne satisfait pas au format attendu ou aux contraintes de validation. -
aria-keyshortcutsIndique les raccourcis clavier qui permettent d'activer ou de déplacer le focus sur l'élément. -
aria-labelFournit un libellé textuel accessible à un élément lorsqu'aucun libellé visible n'est présent dans le DOM. -
aria-labelledbyIdentifie l'élément (ou les éléments) qui sert de libellé à l'élément courant en référençant son identifiant. -
aria-levelDéfinit le niveau hiérarchique d'un élément dans une structure de titres ou d'arborescence. -
aria-liveIndique qu'une région de la page se met à jour dynamiquement et définit l'urgence avec laquelle les technologies d'assistance doivent annoncer ces mises à jour. -
aria-modalIndique qu'une boîte de dialogue ou une fenêtre est modale — le contenu en arrière-plan doit être ignoré par les technologies d'assistance. -
aria-multilineIndique si un champ de saisie accepte plusieurs lignes de texte ou une seule ligne. -
aria-multiselectableIndique que l'utilisateur peut sélectionner plusieurs éléments dans un widget de liste ou de grille. -
aria-orientationIndique si l'orientation d'un widget est horizontale, verticale, ou indéfinie. -
aria-ownsÉtablit une relation de parenté entre l'élément courant et un ou plusieurs éléments qui ne sont pas ses descendants directs dans le DOM. -
aria-placeholderFournit un texte d'indication court pour guider la saisie dans un widget de texte personnalisé, affiché en l'absence de valeur. -
aria-posinsetIndique la position numérique d'un élément dans un ensemble, lorsque l'ensemble n'est pas entièrement rendu dans le DOM. -
aria-pressedIndique l'état enfoncé ou non d'un bouton bascule (toggle button). -
aria-readonlyIndique qu'un élément de saisie est en lecture seule — sa valeur est visible et copiable, mais ne peut pas être modifiée. -
aria-relevantDéfinit quels types de changements dans une région live doivent être annoncés par les technologies d'assistance. -
aria-requiredIndique qu'une valeur doit être saisie dans un champ de formulaire avant de pouvoir le soumettre. -
aria-roledescriptionFournit un nom lisible par l'humain pour le rôle d'un élément, remplaçant le nom de rôle ARIA par défaut annoncé par les technologies d'assistance. -
aria-rowcountDéfinit le nombre total de lignes d'un tableau ou d'une grille, lorsque toutes les lignes ne sont pas présentes dans le DOM. -
aria-rowindexIndique la position de ligne d'une cellule dans un tableau ou une grille dont toutes les lignes ne sont pas rendues dans le DOM. -
aria-rowspanDéfinit le nombre de lignes que couvre une cellule dans un tableau ou une grille. -
aria-selectedIndique si un élément sélectionnable est actuellement sélectionné dans un widget multi-sélection ou à sélection unique. -
aria-setsizeIndique le nombre total d'éléments dans un ensemble, lorsque l'ensemble n'est pas entièrement rendu dans le DOM. -
aria-sortIndique si les éléments d'une colonne ou d'une ligne de tableau sont triés, et dans quel ordre. -
aria-valuemaxDéfinit la valeur maximale autorisée pour un widget de plage ou de progression. -
aria-valueminDéfinit la valeur minimale autorisée pour un widget de plage ou de progression. -
aria-valuenowIndique la valeur numérique courante d'un widget de plage, de progression ou de compteur. -
aria-valuetextFournit un texte alternatif lisible par l'humain pour la valeur numérique courante d'un widget de plage. -
roleDéfinit le rôle sémantique ARIA d'un élément, permettant aux technologies d'assistance de le présenter et de l'annoncer correctement aux utilisateurs.