Vos choix de confidentialité

Le stockage essentiel permet la connexion et le fonctionnement des outils d’apprentissage. Google Analytics mesure les visites ; Microsoft Clarity enregistre les interactions pour améliorer l’ergonomie. Ces deux services sont facultatifs et restent désactivés tant que vous n’avez pas fait votre choix. Lire notre politique de confidentialité.

HTML — Attributs — Cours HTML | SovranCode

Contenu du coursHTML — Attributs · 26 leçons

Les bases de HTML

HTML — Introduction HTML — Éditeurs de code HTML — Structure d’un document HTML — En-tête et métadonnées HTML — Éléments et balises HTML — Attributs

Organiser le texte et le contenu

HTML — Titres h1 à h6 HTML — Paragraphes HTML — Mise en forme du texte

Ajouter des liens et des médias

HTML — Liens hypertextes HTML — Images HTML — Images adaptatives HTML — Audio et vidéo HTML — Iframes et intégration de pages

Présenter des listes et des tableaux

HTML — Listes HTML — Tableaux

Créer des formulaires

HTML — Formulaires HTML — Types de champs de saisie HTML — Listes de choix et zones de texte HTML — Boutons HTML — Validation des formulaires

Donner du sens à vos pages

HTML — Éléments sémantiques

Accessibilité et bonnes pratiques

HTML — Accessibilité HTML — Adaptation aux écrans HTML — Conventions d’écriture

Références et mise en pratique

HTML — Référence des éléments

HTML 47 min

HTML — Attributs

Les attributs apportent des précisions à un élément : une URL, un texte alternatif, un identifiant, une classe, une langue ou un état booléen comme required.

Les attributs précisent la destination d’un lien, la description d’une image, le nom d’un champ, la langue, un identifiant ou un état de fonctionnement. Ils s’écrivent dans la balise ouvrante et doivent correspondre à une information, un réglage ou une relation utile.

Écrire les noms et les valeurs de façon cohérente

Écrivez les noms d’attributs en minuscules et placez leurs valeurs entre guillemets. Certains attributs sont globaux, comme id, class, lang, hidden et data-*. D’autres concernent des éléments précis : href sur a, src et alt sur img, ou type sur input.

<a class="primary-link" href="/fr/courses/html" lang="fr">
  Continuer à apprendre HTML
</a>

<img src="diagram.svg" alt="Anatomie d’un élément HTML" width="640" height="360">

Séparez les attributs par des espaces.
Placez systématiquement les valeurs entre guillemets.
Utilisez chaque id une seule fois dans le document.
Utilisez class pour regrouper plusieurs éléments et id pour désigner une cible unique.
Privilégiez les attributs HTML prévus pour le besoin avant d’ajouter des valeurs data-* personnalisées.

<form>
  <label for="topic">Sujet</label>
  <input id="topic" name="topic" required>

  <button type="submit" data-action="save-draft">
    Enregistrer le brouillon
  </button>
</form>

APPROFONDIR ET PRATIQUER · ENVIRON 25 MIN

Comprenez. Créez. Expliquez.

Explorez l’exemple, essayez de corriger le code avant de consulter la solution, puis créez votre propre version.

Les objectifs de cet atelier

Distinguer l’identification, le regroupement et les données personnalisées
Prévoir le comportement des attributs booléens
Préserver les relations d’accessibilité fondées sur les identifiants

Un attribut précise le fonctionnement d’un élément

id identifie un élément précis ; class regroupe des éléments pour les styles et les sélecteurs. Réutiliser une classe est normal, mais un id doit rester unique dans le document. Lorsque vous copiez un champ de formulaire, modifiez son id ainsi que toutes les références de libellé et de description associées. Une copie visuellement identique contenant des identifiants dupliqués peut diriger les utilisateurs vers le mauvais champ.

Les attributs data-* stockent des chaînes de caractères propres à l’application. Ils ne créent automatiquement ni texte visible, ni information d’accessibilité, ni comportement interactif. Par exemple, data-price='20' n’annonce pas un prix aux lecteurs et ne calcule pas un total. Les informations importantes doivent figurer dans le document, et les comportements doivent être programmés.

La présence compte, pas le mot true

Pour un attribut booléen comme disabled, la présence de l’attribut active l’état correspondant. disabled='false' désactive donc toujours le champ ou le bouton. Retirez l’attribut pour le rendre actif. Cette règle ne vaut pas pour tous les attributs : aria-expanded='false' possède une valeur textuelle explicite et une autre signification ; ce n’est pas un attribut booléen HTML.

Les guillemets évitent de découper par erreur les valeurs qui contiennent des espaces ou de la ponctuation. Ils ne sécurisent pas un contenu provenant d’une source non fiable. Si une application produit du HTML à partir de données utilisateur, elle doit échapper ces données et traiter les URL de manière sûre lors de leur insertion. Des valeurs entre guillemets facilitent la relecture du code, mais ne constituent pas une protection de sécurité.

VOTRE ESPACE DE PRATIQUE

Associer un champ à son texte d’aide

Repérez les deux références d’identifiants utilisées par ce champ et son libellé.

Ouvrir dans un nouvel onglet

Code

<label for="attendee-name">Nom à afficher sur votre badge</label>
<p id="name-help">Indiquez le nom que vous souhaitez montrer aux autres participants.</p>
<input id="attendee-name" name="badge_name"
  autocomplete="nickname" aria-describedby="name-help"
  class="form-control" data-purpose="event-badge">

<label for="attendee-name">Nom à afficher sur votre badge</label>
<p id="name-help">Indiquez le nom que vous souhaitez montrer aux autres participants.</p>
<input id="attendee-name" name="badge_name"
  autocomplete="nickname" aria-describedby="name-help"
  class="form-control" data-purpose="event-badge">

Résultat

Modifiez votre HTML ou votre CSS et comparez le résultat. L’aperçu s’actualise après une courte pause. Les scripts, l’envoi de formulaires et les ressources externes sont bloqués. Les aperçus larges défilent à l’intérieur du panneau. Exécuter le code ne le note pas et ne l’enregistre pas : utilisez les commandes prévues pour cela.

Nom de la version

Vous pouvez conserver cinq versions nommées par exemple. Restaurer une version remplace le code dans l’éditeur sans modifier la version enregistrée. Connectez-vous avant de modifier le code pour enregistrer votre travail sur votre compte. Les brouillons invités restent sur cet appareil.

Chargement du travail enregistré…

Pourquoi cet exemple fonctionne

for correspond à l’id du champ : le libellé est ainsi associé au bon élément.
aria-describedby désigne le paragraphe d’aide. Il apporte des précisions sans remplacer le libellé.
name est la clé utilisée pour envoyer la valeur du champ. Ni class ni data-purpose ne la remplacent.

À VOUS DE CORRIGER

Un bouton désactivé malgré la valeur false

Repérez le problème et proposez une correction. Expliquez ce qu’elle améliore dans le document, même si les deux versions se ressemblent à l’écran.

<button disabled="false">Continuer</button>

Afficher la correction et son explication

<button type="button">Continuer</button>

disabled='false' est toujours présent : le bouton reste donc désactivé. La correction retire l’attribut et précise le type du bouton pour éviter qu’il envoie involontairement un formulaire qui le contient.

À VOUS DE CRÉER

Copier un formulaire en préservant ses associations

Créez deux champs de nom, l’un pour une personne inscrite et l’autre pour son invité, chacun avec son propre texte d’aide.

Votre plan de réalisation

Écrivez le premier champ et repérez les références de son libellé et de sa description.
Dupliquez la structure et remplacez tous les identifiants concernés.
Gardez une classe de style commune, mais utilisez des noms d’envoi distincts.
Cliquez sur chaque libellé et vérifiez quel champ reçoit le focus.

Vérifiez votre travail

Cette grille vous aide à évaluer votre travail ; elle ne donne pas de note automatique. Enregistrez vos fichiers et vérifiez chaque critère avant de marquer la leçon comme terminée.

Tous les identifiants sont uniques.
Chaque libellé donne le focus au champ prévu.
Chaque champ est associé au bon paragraphe d’aide.

Pour aller plus loin : Désactivez un champ, puis expliquez pourquoi la valeur 'false' ne peut pas le réactiver.

Savez-vous expliquer votre choix ?

Répondez d’abord avec vos propres mots, puis comparez votre raisonnement.

Pourquoi data-label ne remplace-t-il pas un libellé visible ?

Les données personnalisées ne créent pas automatiquement de libellé. Utilisez un véritable label associé au champ et réservez les attributs de données aux besoins de l’application.

Les deux champs peuvent-ils partager la même classe CSS ?

Oui. Les classes servent à regrouper des éléments. Les identifiants désignent chaque élément individuellement et doivent rester uniques.

Vos choix de confidentialité

Les bases de HTML

Organiser le texte et le contenu

Ajouter des liens et des médias

Présenter des listes et des tableaux

Créer des formulaires

Donner du sens à vos pages

Accessibilité et bonnes pratiques

Références et mise en pratique

HTML — Attributs

Écrire les noms et les valeurs de façon cohérente

Reconnaître les attributs booléens et les attributs data-*

Les erreurs à éviter

Mise en pratique guidée

À retenir

Comprenez. Créez. Expliquez.

Les objectifs de cet atelier

Un attribut précise le fonctionnement d’un élément

La présence compte, pas le mot true

Associer un champ à son texte d’aide

Code

Résultat

Pourquoi cet exemple fonctionne

Un bouton désactivé malgré la valeur false

Copier un formulaire en préservant ses associations

Votre plan de réalisation

Vérifiez votre travail

Savez-vous expliquer votre choix ?

Donner du sens aux attributs

Code

Résultat

Tester les attributs booléens

Code

Résultat

Testez ce que vous avez appris

Testez ce que vous avez appris

Testez ce que vous avez appris

Vérifiez vos acquis