Attributs

Les attributs ont été brièvement abordés dans la section Présentation du langage HTML. Il est temps de les examiner en détail.

Ce sont les attributs qui rendent le code HTML si puissant. Les attributs sont des noms et des paires nom/valeur séparés par des espaces qui apparaissent dans la balise d'ouverture. Ils fournissent des informations sur l'élément et ses fonctionnalités.

Les attributs définissent le comportement, les liens et les fonctionnalités 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 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 inclut un espace ou des caractères spéciaux, elle doit être placée entre guillemets. C'est pourquoi, et pour améliorer la lisibilité, nous vous recommandons toujours d'utiliser des guillemets.

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îne définies, telles que les noms de classe et d'ID, sont sensibles à la casse. Si la valeur d'un attribut est sensible à la casse en HTML, elle l'est également lorsqu'elle est utilisée dans un sélecteur d'attribut en CSS et en JavaScript. Dans le cas contraire, 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, il est toujours défini sur "true". Les attributs booléens incluent autofocus, inert, checked, disabled, required, reversed, allowfullscreen, default,, loop, autoplay, controls, muted, readonly, multiple, et selected. Si l'un (ou plusieurs) de ces attributs est présent, l'élément est désactivé, obligatoire, en lecture seule, etc. S'il n'est pas présent, 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, la valeur ne doit pas nécessairement être définie sur la chaîne true. Toutes les valeurs, y compris true, false et 😀, bien qu'elles ne soient pas valides, seront évaluées à "true".

Ces trois balises sont équivalentes:

<input required>
<input required="">
<input required="required">

Si la valeur de l'attribut est "false", omettez l'attribut. Si la valeur de l'attribut est "true", incluez-le, mais ne fournissez pas de valeur. Par exemple, required="required" n'est pas une valeur valide en HTML. Toutefois, comme required est une valeur booléenne, les valeurs non valides sont résolues en "true". Toutefois, comme les attributs énumérés non valides ne se résolvent 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 souvenir des attributs booléens par rapport aux attributs énumérés et qui peuvent fournir une valeur non valide.

Lorsque vous basculez entre "true" et "false", ajoutez et supprimez complètement l'attribut avec JavaScript plutôt que de basculer la valeur.

const myMedia = document.getElementById("mediaFile");
myMedia.removeAttribute("muted");
myMedia.setAttribute("muted");

Notez que dans les langages XML, comme 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. Il s'agit d'attributs HTML qui disposent d'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">.

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, et la valeur par défaut des valeurs non valides n'est pas nécessairement la même qu'une chaîne nulle. Poursuivant l'exemple, la valeur par défaut de contenteditable est inherit si elle est manquante ou incorrecte, et peut être explicitement définie 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 " s'ils sont présents. Si vous incluez <style contenteditable="false">, l'élément n'est pas modifiable. Si la valeur n'est pas valide, comme <style contenteditable="😀"> ou, étonnamment, <style contenteditable="contenteditable">, elle est définie par défaut sur inherit.

Dans la plupart des cas, avec les attributs énumérés, les valeurs manquantes et non valides sont identiques. Par exemple, si l'attribut type d'un <input> est manquant, présent, mais sans valeur, ou si sa valeur n'est pas valide, la valeur par défaut est text. Bien que ce comportement soit courant, il ne s'agit pas d'une règle. Il est donc important de savoir si les attributs sont booléens ou énumérés. Si possible, omettez les valeurs pour ne pas vous tromper et recherchez la valeur si nécessaire.

Attributs globaux

Les attributs globaux peuvent être définis sur n'importe quel élément HTML, y compris les éléments de <head>. Il existe plus de 30 attributs globaux. En théorie, vous pouvez tous les ajouter à n'importe quel élément HTML. Toutefois, certains attributs globaux n'ont aucun effet lorsqu'ils sont définis sur certains éléments. Par exemple, le fait de définir hidden sur un <meta> n'affiche pas le méta-contenu.

id

L'attribut global id permet de définir un identifiant unique pour un élément. Il sert à plusieurs fins, y compris : - La 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 des styles avec une spécificité élevée ou en tant que sélecteurs d'attributs dans CSS.

La valeur id est une chaîne sans espace. S'il contient un espace, le document ne sera pas interrompu, mais vous devrez cibler le id avec des caractères d'échappement dans vos fichiers HTML, CSS et JS. Tous les autres caractères sont valides. Une valeur id peut être 😀 ou .class, mais ce n'est pas une bonne idée. Pour faciliter la programmation pour vous-même et pour les générations futures, faites en sorte que le premier caractère de id soit une lettre et n'utilisez que des lettres ASCII, des chiffres, _ et -. Il est recommandé d'établir une convention d'attribution de noms pour les id, puis de vous 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 endommagée si un id est utilisé plusieurs fois, mais votre code JavaScript, vos liens et vos interactions avec les éléments risquent de ne pas fonctionner comme prévu.

Identifiant du fragment de lien

La barre de navigation comprend quatre liens. Nous verrons plus tard l'élément "link", mais pour l'instant, sachez que les liens ne sont pas limités aux URL basées sur HTTP. Ils peuvent être des identifiants de fragment pour des 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 de l'en-tête de page comprend quatre liens:

L'attribut href fournit le lien hypertexte vers lequel l'utilisateur est redirigé lorsqu'il active le lien. Lorsqu'une URL inclut un caractère de hachage (#) suivi d'une chaîne de caractères, cette chaîne est un identifiant de fragment. Si cette chaîne correspond à un 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'à l'emplacement 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 auquel il est associé par l'identifiant de fragment, l'élément contenant l'ID correspondant moins #, défile.

Le contenu <main> de l'atelier de machine learning comporte quatre sections avec des ID. Lorsque le visiteur du site clique sur l'un des liens de <nav>, la section associée à cet identifiant de fragment s'affiche. Le balisage ressemble à ceci:

<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>&amp;</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 nous fournit un lien sans frais vers le haut de la page. Si vous définissez href="#top", sans distinction entre majuscules et minuscules, ou simplement href="#", l'utilisateur est redirigé vers le haut de la page.

Le séparateur de caractère 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 et 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 spécificité, un sélecteur d'attribut à respecter la casse, [id="feedback"].

Script

Sur MLW.com, un œuf de Pâques est disponible pour les utilisateurs de la souris uniquement. Cliquez sur l'interrupteur pour activer ou désactiver la page.

La balise de l'image de l'interrupteur est la suivante : 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 un préfixe #, dans un paramètre pour les méthodes querySelector() et querySelectorAll().

const switchViaID = document.getElementById("switch");
const switchViaSelector = document.querySelector("#switch");

Notre seule fonction JavaScript utilise cette capacité pour 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 qui prend comme valeur le id de la commande de formulaire à laquelle il est associé. Créer un libellé explicite en incluant un id sur chaque contrôle de formulaire et en associant chacun à l'attribut for du libellé garantit que chaque contrôle de formulaire a un libellé associé.

Chaque libellé peut être associé à un seul élément de contrôle de formulaire, mais un élément de contrôle de formulaire peut avoir plusieurs libellés associés.

Si le contrôle de formulaire est imbriqué entre les balises d'ouverture et de fermeture <label>, les attributs for et id ne sont pas obligatoires. Il s'agit d'une étiquette "implicite". Les libellés indiquent à tous les utilisateurs à quoi sert chaque élément de contrôle du formulaire.

<label>
  Send me a reminder <input type="number" name="min"> before the workshop resumes
</label>.

L'association entre for et id met les informations à la disposition des utilisateurs de technologies d'assistance. De plus, cliquer n'importe où sur un libellé met en surbrillance l'élément associé, ce qui étend la zone de clic de la commande. Cela n'est pas seulement utile pour les personnes souffrant de problèmes de dextérité qui rendent la souris moins précise. Cela aide également tous les utilisateurs d'appareils mobiles dont les doigts sont plus larges qu'un bouton radio.

Dans cet exemple de code, la cinquième question fictive d'un quiz fictif est une question à choix multiples à sélection unique. Chaque contrôle de formulaire possède un libellé explicite, avec un id unique pour chacun. Pour éviter de dupliquer accidentellement un ID, la valeur de l'ID est une combinaison du numéro de la question et de la valeur.

Lorsque vous incluez des boutons d'option, comme les libellés décrivent la valeur des boutons d'option, nous regroupons tous les boutons du même nom dans un <fieldset>, le <legend> étant le libellé ou la question de l'ensemble.

Autres utilisations de l'accessibilité

L'utilisation de id en termes d'accessibilité et d'usabilité ne se limite pas aux libellés. Dans la section Présentation du 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 du <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 assurer l'accessibilité. aria-labelledby, aria-describedby, aria-details et aria-owns prennent comme valeur une liste de références id séparée par des espaces. aria-activedescendant, qui identifie l'élément descendant actuellement sélectionné, prend comme valeur une seule référence id: celle de l'élément unique sélectionné (un seul élément peut être sélectionné à la fois).

class

L'attribut class offre un moyen supplémentaire de cibler des éléments avec CSS (et JavaScript), mais n'a aucune autre utilité en HTML (bien que les frameworks et les bibliothèques de composants puissent les utiliser). L'attribut de classe prend comme valeur une liste séparée par des espaces des classes sensibles à la casse pour l'élément.

Créer une structure sémantique solide permet de cibler des é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. À mesure que vous vous familiariserez avec les attributs tout au long de cette section, réfléchissez à la façon dont les éléments ayant les mêmes attributs ou valeurs d'attributs peuvent être stylisés. Il ne s'agit pas de ne pas utiliser l'attribut de classe, mais la plupart des développeurs ne réalisent pas qu'ils n'en ont souvent pas besoin.

Jusqu'à présent, MLW n'a utilisé aucune classe. Un site peut-il être lancé sans nom de classe unique ? Nous verrons.

style

L'attribut style permet d'appliquer des styles intégrés, qui sont des styles appliqués à l'élément unique sur lequel l'attribut est défini. L'attribut style prend comme valeur des paires de valeurs de propriété CSS, dont la syntaxe est identique à celle du contenu d'un bloc de style CSS: les propriétés sont suivies d'un deux-points, comme dans CSS, et les 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éritant des valeurs de propriété héritées si elles ne sont pas remplacées par d'autres déclarations de style sur des éléments imbriqués ou dans des blocs ou des feuilles de style <style>. Comme la valeur comprend l'équivalent du contenu d'un seul bloc de style appliqué à cet élément uniquement, elle ne peut pas être utilisée pour le contenu généré, pour créer des animations de clés-images ni pour appliquer d'autres règles at.

Bien que style soit un attribut global, son utilisation n'est pas recommandée. Définissez plutôt les styles dans un ou plusieurs fichiers distincts. Toutefois, l'attribut style peut s'avérer utile lors du développement pour appliquer un style rapide, par exemple à des fins de test. Ensuite, prenez le style "solution" et collez-le dans votre fichier CSS associé.

tabindex

L'attribut tabindex peut être ajouté à n'importe quel élément pour lui permettre de recevoir la sélection. La valeur tabindex définit si elle est ajoutée à l'ordre des tabulations et, éventuellement, à un ordre de tabulation autre que la valeur par défaut.

L'attribut tabindex utilise un entier comme valeur. Une valeur négative (la convention consiste à utiliser -1) permet à un élément de recevoir la sélection, par exemple via JavaScript, mais ne l'ajoute pas à la séquence de tabulation. Une valeur tabindex de 0 permet de mettre l'élément en surbrillance et de le rendre accessible via la tabulation, en l'ajoutant à l'ordre par défaut des onglets de la page dans l'ordre du code source. Une valeur de 1 ou plus place l'élément dans une séquence de mise au point prioritaire, ce qui n'est pas recommandé.

Cette page comporte une fonctionnalité de partage utilisant un élément personnalisé <share-action> agissant en tant que <button>. Le tabindex de zéro est inclus 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 indique aux utilisateurs de lecteurs d'écran que cet élément doit se comporter comme un bouton. JavaScript est utilisé pour s'assurer que la promesse de fonctionnalité des boutons est tenue, y compris pour gérer les événements click et keydown, ainsi que les pressions sur les touches Entrée et Espace.

Les commandes de formulaire, les liens, les boutons et les éléments modifiables peuvent être sélectionnés. Lorsqu'un utilisateur appuie sur la touche de tabulation, le focus passe à l'élément sélectionnable suivant, comme s'il avait défini tabindex="0". Les autres éléments ne sont pas sélectionnables par défaut. L'ajout de l'attribut tabindex à ces éléments leur permet de recevoir la sélection, ce qui ne serait pas le cas autrement.

Si un document inclut des éléments dont la valeur tabindex est égale ou supérieure à 1, ils sont inclus dans une séquence d'onglets distincte. Comme vous le remarquerez 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 entraîner une très mauvaise expérience utilisateur. Il est donc difficile de s'appuyer sur des technologies d'assistance (claviers et lecteurs d'écran) pour naviguer dans votre contenu. En tant que développeur, il est également difficile de les gérer et de les maintenir. Le focus est important. Un module entier est consacré à ce sujet et à l'ordre des éléments en focus.

role

L'attribut role fait partie de la spécification ARIA, et non de la spécification HTML du WHATWG. L'attribut role peut être utilisé pour donner un sens sémantique au contenu, ce qui permet aux lecteurs d'écran d'informer les utilisateurs du site de l'interaction attendue avec un objet.

Certains widgets d'interface utilisateur courants, tels que les comboboxes, les barres de menu, les listes à onglets et les grilles arborescentes, n'ont pas d'équivalent HTML natif. Par exemple, lorsque vous créez 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 à afficher différents panneaux en cliquant sur les onglets associés. Inclure le 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> actuellement sélectionné peut activer un panneau associé plutôt que d'implémenter une fonctionnalité de bouton typique.

L'attribut role ne modifie pas le comportement du navigateur ni les interactions avec le clavier ou le pointeur. 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 à leur fin prévue. Toutefois, lorsque l'utilisation de l'élément approprié n'est pas possible, l'attribut role permet d'informer les utilisateurs de lecteurs d'écran lorsqu'un élément non sémantique a été converti en rôle d'élément sémantique.

contenteditable

Un élément dont l'attribut contenteditable est défini sur true est modifiable, peut être sélectionné et est ajouté à l'ordre des onglets comme si tabindex="0" était défini. Contenteditable est un attribut énuméré compatible avec les valeurs true et false, avec une valeur par défaut de inherit si l'attribut n'est pas présent ou si sa valeur n'est pas 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 un <textarea>). Si la valeur n'est pas valide, comme <style contenteditable="😀"> ou <style contenteditable="contenteditable">, la valeur par défaut est inherit.

Pour basculer entre les états, 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 n'avons fait qu'effleurer les attributs globaux HTML. Il existe encore plus d'attributs qui ne s'appliquent qu'à un seul élément ou à un ensemble limité d'éléments. Même si vous avez défini des centaines d'attributs, vous pouvez avoir besoin d'un attribut qui ne figure pas dans les spécifications. Le code HTML est là pour vous.

Vous pouvez créer n'importe quel attribut personnalisé en ajoutant le préfixe data-. Vous pouvez nommer votre attribut n'importe quel nom commençant par data-, suivi d'une série de caractères minuscules qui ne commencent pas par xml et ne contiennent pas de deux-points (:).

Bien que le code HTML soit tolérant et ne plante pas 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 si vous incluez un :, il est avantageux de créer des attributs personnalisés valides commençant par data-. Avec les attributs de données personnalisés, vous savez que vous n'utilisez pas accidentellement un nom d'attribut existant. Les attributs de données personnalisés sont évolutifs.

Bien que les navigateurs n'implémentent pas de comportements par défaut pour un attribut spécifique avec le préfixe data-, une API d'ensemble de données intégrée permet d'itérer sur vos attributs personnalisés. Les propriétés personnalisées sont un excellent moyen de communiquer des informations spécifiques à l'application via JavaScript. Ajoutez des attributs personnalisés aux éléments sous la forme de 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() avec le nom complet de l'attribut ou profiter de la propriété dataset plus simple.

el.dataset["machineLearning"]; // workshop
e.dataset.machineLearning; // workshop

La propriété dataset renvoie un objet DOMStringMap des attributs data- de chaque élément. Plusieurs attributs personnalisés sont disponibles sur <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 valeurs:

for (let key in el.dataset) {
  customObject[key] = el.dataset[key];
}

Les attributs de 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) et plusieurs autres attributs spécifiques aux éléments, tout en examinant plus en détail les liens.

Vérifier vos connaissances

Testez vos connaissances sur les attributs.