Ces attributs ont été brièvement décrits dans la section Présentation du langage HTML. Le moment est venu d'entrer dans le détail du code.
Ce sont les attributs qui font du HTML si puissant. Les attributs sont des noms séparés par un espace et des paires nom/valeur apparaissant dans la balise d'ouverture. Ils fournissent des informations sur l'élément et ses fonctionnalités.
Les attributs définissent le comportement, les liaisons et la fonctionnalité des éléments. Certains attributs sont globaux, ce qui signifie qu'ils peuvent apparaître dans la balise d'ouverture de n'importe quel élément. D'autres s'appliquent à plusieurs éléments, mais pas à tous, tandis que d'autres sont spécifiques à un élément et ne concernent qu'un seul élément. En HTML, tous les attributs à l'exception des attributs booléens et, dans une certaine mesure, des attributs énumérés, nécessitent une valeur.
Si une valeur d'attribut comprend un espace ou des caractères spéciaux, la valeur doit être placée entre guillemets. C'est pourquoi, et pour améliorer la lisibilité, il est toujours recommandé de citer des citations.
Bien que le code HTML ne soit pas sensible à la casse, certaines valeurs d'attributs le sont. Les valeurs qui font partie de la spécification HTML ne sont pas sensibles à la casse. Les valeurs de chaînes définies, telles que les noms de classe et d'identifiant, sont sensibles à la casse. Si la valeur d'un attribut est sensible à la casse en HTML, elle l'est lorsqu'elle est utilisée dans un sélecteur d'attribut en CSS et en JavaScript. Sinon, elle ne l'est pas.
<!-- the type attribute is case insensitive: these are equivalent -->
<input type="text">
<input type="TeXt">
<!-- the id attribute is case sensitive: they are not equivalent -->
<div id="myId">
<div id="MyID">
Attributs booléens
Si un attribut booléen est présent, la valeur est toujours "true". Les attributs booléens incluent autofocus, inert, checked, disabled, required, reversed, allowfullscreen, default, loop, autoplay, controls, muted, readonly, multiple, et selected.
Si un ou plusieurs de ces attributs sont présents, l'élément est désactivé, obligatoire, en lecture seule, etc. S'il est absent, il ne l'est pas.
Les valeurs booléennes peuvent être omises, définies sur une chaîne vide ou correspondre au nom de l'attribut. Toutefois, il n'est pas nécessaire que la valeur soit définie sur la chaîne true. Toutes les valeurs, y compris true, false et 😀, bien qu'elles ne soient pas valides, seront remplacées par "true".
Ces trois tags sont équivalents:
<input required>
<input required="">
<input required="required">
Si la valeur de l'attribut est "false", omettez l'attribut. Si l'attribut est vrai, incluez-le mais n'indiquez aucune valeur.
Par exemple, required="required" n'est pas une valeur valide en HTML. Cependant, comme required est une valeur booléenne, les valeurs non valides sont associées à la valeur "true".
Toutefois, étant donné que les attributs énumérés non valides ne renvoient pas nécessairement la même valeur que les valeurs manquantes, il est plus facile de prendre l'habitude d'omettre des valeurs que de se rappeler quels attributs sont booléens ou énumérés et qui fournissent potentiellement une valeur non valide.
Lorsque vous basculez entre "true" et "false", ajoutez et supprimez complètement l'attribut à l'aide de JavaScript au lieu d'activer/de désactiver la valeur.
const myMedia = document.getElementById("mediaFile");
myMedia.removeAttribute("muted");
myMedia.setAttribute("muted");
Notez que dans les langues XML, comme le format SVG, tous les attributs doivent inclure une valeur, y compris les attributs booléens.
Attributs énumérés
Les attributs énumérés sont parfois confondus avec les attributs booléens. Ce sont des attributs HTML qui ont un ensemble limité de valeurs valides prédéfinies.
Comme les attributs booléens, ils ont une valeur par défaut si l'attribut est présent, mais que la valeur est manquante. Par exemple, si vous incluez <style contenteditable>, la valeur par défaut est <style contenteditable="true">.
Cependant, contrairement aux attributs booléens, l'omission de l'attribut ne signifie pas qu'il est faux. Un attribut présent avec une valeur manquante n'est pas nécessairement vrai. De plus, la valeur par défaut pour les valeurs non valides n'est pas nécessairement identique à une chaîne nulle. Pour reprendre l'exemple, contenteditable est défini par défaut sur inherit s'il est manquant ou non valide, et peut être explicitement défini sur false.
La valeur par défaut dépend de l'attribut. Contrairement aux valeurs booléennes, les attributs ne sont pas automatiquement définis sur "true " lorsqu'ils sont présents. Si vous incluez <style contenteditable="false">, l'élément n'est pas modifiable. Si la valeur n'est pas valide (par exemple, <style contenteditable="😀">) ou, ce qui n'est pas surprenant, <style contenteditable="contenteditable">, elle n'est pas valide et est définie par défaut sur inherit.
Dans la plupart des cas avec des attributs énumérés, les valeurs manquantes et non valides sont les mêmes. Par exemple, si l'attribut type d'un élément <input> est manquant, présent mais sans valeur, ou s'il a une valeur non valide, il est défini par défaut sur text. Bien que ce comportement soit courant, il ne s'agit pas d'une règle.
Pour cette raison, il est important de savoir quels attributs sont booléens ou énumérés. Si possible, omettez des valeurs pour ne pas vous tromper et recherchez les valeurs si nécessaire.
Attributs globaux
Les attributs globaux peuvent être définis pour n'importe quel élément HTML, y compris les éléments <head>. Il existe plus de 30 attributs globaux. Bien que tous ces éléments puissent en théorie être ajoutés à n'importe quel élément HTML, certains attributs globaux n'ont aucun effet lorsqu'ils sont définis sur certains éléments ; par exemple, définir hidden sur un <meta>, car le métacontenu n'est pas affiché.
id
L'attribut global id permet de définir un identifiant unique pour un élément. Il remplit de nombreuses fonctions, y compris :
- Cible de l'identifiant de fragment d'un lien.
- Identifier un élément pour l'écriture de script.
- associer un élément de formulaire à son libellé.
- Fournir un libellé ou une description pour les technologies d'assistance.
- Ciblage de styles avec une forte spécificité ou en tant que sélecteurs d'attributs dans CSS.
La valeur id est une chaîne sans espaces. S'il contient un espace, le document ne sera pas coupé, mais vous devrez cibler la id avec des caractères d'échappement dans vos fichiers HTML, CSS et JS. Tous les autres caractères sont valides. La valeur id peut être 😀 ou .class, mais ce n'est pas une bonne idée. Pour faciliter la programmation pour vous, actuel et futur, faites du premier caractère de id une lettre et n'utilisez que des lettres ASCII, des chiffres, ainsi que des caractères _ et -. Il est recommandé de définir une convention d'attribution de noms id et de s'y tenir, car les valeurs id sont sensibles à la casse.
Le id doit être unique au document. La mise en page de votre page ne sera probablement pas interrompue si vous utilisez id plusieurs fois, mais vos interactions JavaScript, les liens et les éléments risquent de ne pas se comporter comme prévu.
Identifiant de fragment de lien
La barre de navigation comprend quatre liens. Nous aborderons l'élément "lien" ultérieurement, mais pour l'instant, les liens ne sont pas limités aux URL HTTP. Il peut s'agir d'identifiants de fragments de sections de la page dans le document actuel (ou dans d'autres documents).
Sur le site de l'atelier de machine learning, la barre de navigation dans l'en-tête de page comprend quatre liens:
L'attribut "href" fournit le lien hypertexte vers lequel l'utilisateur est redirigé en activant le lien. Lorsqu'une URL comprend un signe de hachage (#) suivi d'une chaîne de caractères, cette chaîne est un identifiant de fragment. Si cette chaîne correspond à l'id d'un élément de la page Web, le fragment est une ancre (ou un favori) de cet élément. Le navigateur fait défiler la page jusqu'au point où l'ancre est définie.
Ces quatre liens pointent vers quatre sections de notre page identifiées par leur attribut id. Lorsque l'utilisateur clique sur l'un des quatre liens de la barre de navigation, l'élément lié par l'identifiant de fragment, c'est-à-dire l'élément contenant l'ID correspondant moins l'élément #, défile.
Le contenu <main> de l'atelier de machine learning comporte quatre sections avec des identifiants. Lorsque le visiteur du site clique sur l'un des liens du <nav>, la section associée à cet identifiant de fragment défile. Le balisage est semblable à celui-ci:
<section id="reg">
<h2>Machine Learning Workshop Tickets</h2>
</section>
<section id="about">
<h2>What you'll learn</h2>
</section>
<section id="teachers">
<h2>Your Instructors</h2>
<h3>Hal 9000 <span>&</span> EVE</h3>
</section>
<section id="feedback">
<h2>What it's like to learn good and do other stuff good too</h2>
</section>
En comparant les identifiants de fragment dans les liens <nav>, vous remarquerez que chacun correspond au id d'un <section> dans <main>.
Le navigateur affiche un lien sans frais en haut de page. Définir href="#top", non sensible à la casse ou simplement href="#" fait défiler l'utilisateur jusqu'en haut de la page.
Le séparateur de marque de hachage dans href ne fait pas partie de l'identifiant de fragment. L'identifiant de fragment est toujours la dernière partie de l'URL. Il n'est pas envoyé au serveur.
Sélecteurs CSS
En CSS, vous pouvez cibler chaque section à l'aide d'un sélecteur d'ID tel que #feedback ou, pour moins de précision, d'un sélecteur d'attributs sensible à la casse, [id="feedback"].
Script
Sur MLW.com, seuls les utilisateurs de souris peuvent bénéficier d'un easter egg. Cliquez sur le bouton bascule pour afficher et éteindre la page.
Le balisage de l'image de l'interrupteur d'éclairage est le suivant :
html
<img src="svg/switch2.svg" id="switch"
alt="light switch" class="light" />
L'attribut id peut être utilisé comme paramètre pour la méthode getElementById() et, avec le préfixe #, comme paramètre pour les méthodes querySelector() et querySelectorAll().
const switchViaID = document.getElementById("switch");
const switchViaSelector = document.querySelector("#switch");
Notre fonction JavaScript unique exploite cette possibilité de cibler des éléments en fonction de leur attribut id:
<script>
/* switch is a reserved word in js, so we us onoff instead */
const onoff = document.getElementById('switch');
onoff.addEventListener('click', function(){
document.body.classList.toggle('black');
});
</script>
<label>
L'élément HTML <label> possède un attribut for dont la valeur correspond au id de la commande de formulaire à laquelle il est associé.
La création d'une étiquette explicite en incluant un id sur chaque commande de formulaire et en l'associant à l'attribut for du libellé garantit que chaque commande de formulaire est associée à une étiquette.
Bien que chaque libellé puisse être associé à une seule commande de formulaire, une commande de formulaire peut être associée à plusieurs libellés.
Si la commande de formulaire est imbriquée entre les balises d'ouverture et de fermeture <label>, les attributs for et id ne sont pas obligatoires: il s'agit d'un libellé "implicite". Les libellés permettent à tous les utilisateurs de savoir à quoi sert chaque commande de formulaire.
<label>
Send me a reminder <input type="number" name="min"> before the workshop resumes
</label>.
L'association entre for et id rend ces informations accessibles aux utilisateurs de technologies d'assistance. En outre, si vous cliquez n'importe où sur un libellé, l'élément associé est sélectionné, ce qui étend la zone de clic de la commande. Cette fonctionnalité n'est pas seulement utile pour les personnes souffrant de problèmes de dextérité, ce qui rend la souris moins précise. Elle aide également chaque utilisateur d'appareil mobile dont les doigts sont plus larges qu'une case d'option.
Dans cet exemple de code, la cinquième question d'un faux quiz est une question à choix multiples à choix unique. Chaque commande de formulaire est associée à un libellé explicite, avec un id unique pour chacune. Pour éviter de dupliquer un identifiant par erreur, sa valeur est une combinaison du numéro de question et de la valeur.
Lorsque vous incluez des cases d'option, puisque les libellés décrivent la valeur de ces cases, nous incluons tous les boutons portant le même nom dans une <fieldset>, où <legend> correspond au libellé, ou à la question, pour l'ensemble de l'ensemble.
Autres utilisations de l'accessibilité
L'utilisation de id pour l'accessibilité et la facilité d'utilisation ne se limite pas aux libellés. Dans l'introduction au texte, un <section> a été converti en repère de région en référençant le id d'un <h2> comme valeur du aria-labelledby de <section> pour fournir le nom accessible:
<section id="about" aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>
Plus de 50 états et propriétés aria-* peuvent être utilisés pour garantir l'accessibilité. aria-labelledby, aria-describedby, aria-details et aria-owns utilisent comme valeur une liste de références id séparées par des espaces. aria-activedescendant, qui identifie l'élément descendant actuellement sélectionné, prend comme valeur une référence id unique: celle de l'élément unique ciblé (un seul élément peut être ciblé à la fois).
class
L'attribut class offre un moyen supplémentaire de cibler des éléments avec CSS (et JavaScript), mais ne remplit aucune autre fonction en HTML (bien que les frameworks et les bibliothèques de composants puissent les utiliser). La valeur de l'attribut de classe est une liste des classes sensibles à la casse de l'élément, séparées par des espaces.
La construction d'une structure sémantique sonore permet de cibler les éléments en fonction de leur emplacement et de leur fonction. La structure sonore permet d'utiliser des sélecteurs d'éléments descendants, des sélecteurs relationnels et des sélecteurs d'attributs. En examinant les attributs tout au long de cette section, réfléchissez à la manière dont les éléments ayant les mêmes attributs ou valeurs d'attribut peuvent être stylisés. Vous ne devez pas utiliser l'attribut "class", mais la plupart des développeurs n'ont pas conscience qu'ils n'ont souvent pas besoin de le faire.
Jusqu'à présent, MLW n'a utilisé aucune classe. Un site peut-il être lancé sans un seul nom de classe ? Nous verrons.
style
L'attribut style permet d'appliquer des styles intégrés, c'est-à-dire des styles appliqués à l'élément unique sur lequel l'attribut est défini.
L'attribut style utilise comme paire valeur/clé de propriété CSS, la syntaxe de la valeur étant identique au contenu d'un bloc de style CSS: les propriétés sont suivies du signe deux-points, comme dans CSS, et des points-virgules terminent chaque déclaration, après la valeur.
Les styles ne sont appliqués qu'à l'élément sur lequel l'attribut est défini. Les descendants héritent des valeurs de propriété héritées s'ils ne sont pas remplacés par d'autres déclarations de style sur des éléments imbriqués ou dans des feuilles de style ou des blocs <style>. Étant donné que la valeur comprend l'équivalent du contenu d'un bloc de style unique appliqué à cet élément uniquement, elle ne peut pas être utilisée pour le contenu généré, pour créer des animations d'images clés ou pour appliquer d'autres règles at rules.
Bien que style soit en effet un attribut global, son utilisation n'est pas recommandée. Définissez plutôt les styles dans un ou plusieurs fichiers distincts.
Cela dit, l'attribut style peut s'avérer utile pendant le développement, car il permet d'appliquer un style rapide, par exemple à des fins de test. Prenez ensuite le style "solution" et collez-le dans votre fichier CSS associé.
tabindex
L'attribut tabindex peut être ajouté à n'importe quel élément pour qu'il soit sélectionné. La valeur tabindex détermine si elle est ajoutée à l'ordre de tabulation et, éventuellement, dans un ordre de tabulation autre que celui par défaut.
La valeur de l'attribut tabindex correspond à un entier. Une valeur négative (la convention consiste à utiliser -1) rend un élément capable de recevoir le focus, par exemple via JavaScript, mais n'ajoute pas l'élément à la séquence de tabulation. Une valeur tabindex de 0 rend l'élément sélectionnable et accessible via la touche de tabulation, en l'ajoutant à l'ordre de tabulation par défaut de la page, dans l'ordre du code source. Une valeur supérieure ou égale à 1 place l'élément dans une séquence de focus prioritaire, ce qui n'est pas recommandé.
Cette page contient une fonctionnalité de partage utilisant un élément personnalisé <share-action> agissant en tant que <button>. La valeur tabindex de zéro est incluse pour ajouter l'élément personnalisé à l'ordre de tabulation par défaut du clavier:
<share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
<svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
<use href="#shareIcon" />
</svg>
<span>Share</span>
</share-action>
Le role de button informe les utilisateurs de lecteurs d'écran que cet élément doit se comporter comme un bouton. JavaScript permet de s'assurer que la promesse de fonctionnalité du bouton est respectée, y compris pour gérer les événements de clic et de touche de touche, ainsi que les pressions sur les touches Entrée et Espace.
Les commandes de formulaire, les liens, les boutons et les éléments modifiables du contenu peuvent être sélectionnés. Lorsqu'un utilisateur du clavier appuie sur la touche de tabulation, le curseur passe à l'élément sélectionnable suivant, comme si la valeur tabindex="0" était définie. Par défaut, les autres éléments ne sont pas sélectionnables. L'ajout de l'attribut tabindex à ces éléments leur permet d'être ciblés lorsqu'ils ne le feraient pas autrement.
Si un document comprend des éléments avec une tabindex de 1 ou plus, ils sont inclus dans une séquence de tabulation distincte. Comme vous pouvez le constater dans le codepen, la tabulation commence dans une séquence distincte, de la valeur la plus basse à la valeur la plus élevée, avant de passer par celles de la séquence régulière dans l'ordre source.
Modifier l'ordre de tabulation peut créer une très mauvaise expérience utilisateur. Il est difficile d'utiliser des technologies d'assistance (claviers et lecteurs d'écran) pour naviguer dans votre contenu. En tant que développeur, il est également difficile à gérer et à entretenir. L'attention est importante ; tout un module traite de ce sujet.
role
L'attribut role fait partie de la spécification ARIA, et non de la spécification HMTL whatWG. L'attribut role peut être utilisé pour donner une signification sémantique au contenu, ce qui permet aux lecteurs d'écran d'informer les utilisateurs du site de l'interaction utilisateur attendue pour un objet.
Il existe quelques widgets d'interface utilisateur courants, tels que les boîtes combinées, les barres de menu, les listes d'onglets et les arborescences, qui n'ont pas d'équivalent HTML natif.
Par exemple, lors de la création d'un modèle de conception à onglets, vous pouvez utiliser les rôles tab, tablist et tabpanel. Une personne qui peut voir physiquement l'interface utilisateur a appris par expérience à naviguer dans le widget et à rendre différents panneaux visibles en cliquant sur les onglets associés.
L'inclusion du rôle tab avec <button role="tab"> lorsqu'un groupe de boutons est utilisé pour afficher différents panneaux permet à l'utilisateur du lecteur d'écran de savoir que le <button> sélectionné peut afficher un panneau associé au lieu d'implémenter une fonctionnalité typique de bouton.
L'attribut role ne modifie pas le comportement du navigateur ni les interactions avec le clavier ou les pointeurs. Ajouter role="button" à un <span> ne le transforme pas en <button>. C'est pourquoi nous vous recommandons d'utiliser les éléments HTML sémantiques à bon escient. Toutefois, lorsqu'il n'est pas possible d'utiliser l'élément approprié, l'attribut role permet d'informer les utilisateurs de lecteurs d'écran lorsqu'un élément non sémantique a été adapté au rôle d'un élément sémantique.
contenteditable
Un élément dont l'attribut contenteditable est défini sur true est modifiable, sélectionnable et ajouté à l'ordre de tabulation comme si l'élément tabindex="0" avait été défini. Contenteditable est un attribut énuméré qui prend en charge les valeurs true et false. La valeur par défaut est inherit si l'attribut est absent ou s'il a une valeur non valide.
Ces trois balises d'ouverture sont équivalentes:
<style contenteditable>
<style contenteditable="">
<style contenteditable="true">
Si vous incluez <style contenteditable="false">, l'élément n'est pas modifiable (sauf s'il est modifiable par défaut, comme <textarea>). Si la valeur n'est pas valide (<style contenteditable="😀"> ou <style contenteditable="contenteditable">, par exemple), la valeur par défaut est inherit.
Pour passer d'un état à un autre, interrogez la valeur de la propriété en lecture seule HTMLElement.isContentEditable.
const editor = document.getElementById("myElement");
if(editor.contentEditable) {
editor.setAttribute("contenteditable", "false");
} else {
editor.setAttribute("contenteditable", "");
}
Vous pouvez également spécifier cette propriété en définissant editor.contentEditable sur true, false ou inherit.
Les attributs globaux peuvent être appliqués à tous les éléments, même aux éléments <style>. Vous pouvez utiliser des attributs et un peu de CSS pour créer un éditeur CSS en direct.
<style contenteditable>
style {
color: inherit;
display:block;
border: 1px solid;
font: inherit;
font-family: monospace;
padding:1em;
border-radius: 1em;
white-space: pre;
}
</style>
Essayez de remplacer le color de style par une valeur autre que inherit. Essayez ensuite de remplacer style par un sélecteur p.
Ne supprimez pas la propriété d'affichage, sinon le bloc de style disparaîtra.
Attributs personnalisés
Nous avons abordé uniquement les attributs globaux HTML. D'autres attributs ne s'appliquent qu'à un seul élément ou à un ensemble limité d'éléments. Même avec des centaines d'attributs définis, il se peut que vous ayez besoin d'un attribut non inclus dans la spécification. HTML est là pour vous aider.
Vous pouvez créer les attributs personnalisés de votre choix en ajoutant le préfixe data-. Vous pouvez nommer votre attribut avec n'importe quel nom commençant par data-, suivi de toute série minuscule de caractères ne commençant pas par xml et ne contenant pas le signe deux-points (:).
Bien que le code HTML soit indulgent et ne pose pas de problème si vous créez des attributs non compatibles qui ne commencent pas par data, ou même si vous commencez votre attribut personnalisé par xml ou incluez un :, créer des attributs personnalisés valides commençant par data- présente des avantages.
Grâce aux attributs de données personnalisés, vous savez que vous n'utilisez pas par erreur un nom d'attribut existant. Les attributs de données personnalisées sont évolutifs.
Bien que les navigateurs n'implémentent pas de comportements par défaut pour un attribut spécifique précédé de data-, il existe une API d'ensemble de données intégrée permettant d'itérer vos attributs personnalisés. Les propriétés personnalisées sont un excellent moyen de communiquer des informations spécifiques à une application via JavaScript. Ajoutez des attributs personnalisés aux éléments sous la forme data-name et accédez-y via le DOM à l'aide de dataset[name] sur l'élément en question.
<blockquote data-machine-learning="workshop"
data-first-name="Blendan" data-last-name="Smooth"
data-formerly="Margarita Maker" data-aspiring="Load Balancer"
data-year-graduated="2022">
HAL and EVE could teach a fan to blow hot air.
</blockquote>
Vous pouvez utiliser getAttribute() en utilisant le nom complet de l'attribut ou utiliser la propriété dataset plus simple.
el.dataset[machineLearning]; // workshop
e.dataset.machineLearning; // workshop
La propriété dataset renvoie un objet DOMStringMap contenant les attributs data- de chaque élément. Il existe plusieurs attributs personnalisés sur la <blockquote>. La propriété de l'ensemble de données signifie que vous n'avez pas besoin de connaître ces attributs personnalisés pour accéder à leurs noms et à leurs valeurs:
for (let key in el.dataset) {
customObject[key] = el.dataset[key];
}
Les attributs présentés dans cet article sont globaux, ce qui signifie qu'ils peuvent être appliqués à n'importe quel élément HTML (bien qu'ils n'aient pas tous un impact sur ces éléments). Nous allons maintenant examiner les deux attributs de l'image d'introduction que nous n'avons pas abordés (target et href), ainsi que plusieurs autres attributs spécifiques à l'élément à mesure que nous examinons plus en détail les liens.
Testez vos connaissances
Testez vos connaissances sur les attributs.
Un id doit être unique dans le document.
Sélectionnez l'attribut personnalisé correctement mis en forme.
data-birthdaybirthdaydata:birthday