Docs HTML exécutables : Attributs HTML

Q: Quelle est la différence entre class et id en HTML ?

Un id doit être unique sur la page et identifie un seul élément, pour les liens #fragment, et getElementById. Une class peut être partagée par plusieurs éléments, et un élément peut avoir plusieurs classes séparées par des espaces. Utilisez les classes pour le style.

Q: Comment ajouter plusieurs classes à un élément HTML ?

Mettez-les dans un seul attribut class, séparées par des espaces : . Écrire class deux fois ne marche pas : le navigateur ne garde que le premier.

Q: Pourquoi mon bouton reste désactivé avec disabled="false" ?

disabled est un attribut booléen : sa présence signifie vrai, quelle que soit la valeur. Pour activer l'élément, supprimez l'attribut, ou exécutez button.disabled = false en JavaScript, ce qui le supprime.

Q: Puis-je inventer mes propres attributs HTML ?

Utilisez le préfixe data- : data-price="12" ou data-user-id="7" sont valides sur n'importe quel élément et lisibles en JavaScript via element.dataset. Les noms inventés sans ce préfixe sont du HTML invalide.

Ce que sont les attributs HTML

Un attribut ajoute une information à un élément. Il se place dans la balise ouvrante et s'écrit avec un nom, un signe égal et une valeur entre guillemets : name="value". Un élément peut avoir autant d'attributs que nécessaire, séparés par des espaces.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Attributes</title>
</head>
<body>
  <a href="#note" title="Jumps to the note below">A link with href and title</a>
  <p>
    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='28' fill='%2316a34a'/%3E%3C/svg%3E" alt="A green circle" width="60" height="60">
  </p>
  <input type="email" placeholder="you@example.com" required>
  <p id="note">Hover the link to see its title.</p>
</body>
</html>

href indique au lien où aller, src et alt décrivent l'image, type, placeholder et required configurent le champ. Chaque élément a son propre jeu d'attributs, et quelques-uns (les attributs globaux ci-dessous) fonctionnent sur tous les éléments.

Règles de syntaxe

<input type="text" name="city" value="Paris" disabled>

Nom, signe égal, valeur entre guillemets. Les guillemets doubles sont la convention ; les simples marchent aussi (title='Say "hi"' permet de mettre un guillemet double dans une valeur).
Les noms sont insensibles à la casse. CLASS et class sont le même attribut. Les valeurs, non : class="Box" et class="box" sont deux classes différentes.
Les guillemets sont facultatifs sans espaces, mais mettez-en quand même. class=big box donne à l'élément la classe big et un second attribut sans aucun sens appelé box.
L'ordre ne compte pas. <img alt="" src="a.png"> équivaut à <img src="a.png" alt="">.
Chaque nom une seule fois par élément. Si un attribut apparaît deux fois, le navigateur garde le premier et ignore le second sans rien dire.

Attributs booléens

Certains attributs sont activés ou désactivés. Pour eux, la présence signifie vrai, et la valeur est ignorée. disabled, checked, required, readonly, hidden, multiple, autofocus et open fonctionnent tous ainsi.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Boolean attributes</title>
</head>
<body>
  <p><button>No attribute: enabled</button></p>
  <p><button disabled>disabled: off</button></p>
  <p><button disabled="false">disabled="false": still off</button></p>
  <p><label><input type="checkbox" checked> checked</label></p>
</body>
</html>

Le troisième bouton est désactivé alors que la valeur dit false, car le navigateur vérifie seulement si l'attribut est présent. Pour désactiver un attribut booléen, supprimez-le. En JavaScript, button.disabled = false fait exactement cela.

L'attribut class

class donne à un élément un ou plusieurs noms que le CSS et le JavaScript utilisent pour le trouver. Plusieurs éléments peuvent partager une classe, et un élément peut avoir plusieurs classes séparées par des espaces :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>class</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .card { border: 2px solid #e5e7eb; border-radius: 8px; padding: 12px; margin-bottom: 8px; }
    .featured { border-color: #2563eb; }
    .muted { color: #6b7280; }
  </style>
</head>
<body>
  <div class="card">class="card"</div>
  <div class="card featured">class="card featured"</div>
  <div class="card featured muted">class="card featured muted"</div>
</body>
</html>

Chaque classe supplémentaire ajoute ses règles par-dessus. En CSS, une classe se sélectionne avec un point (.card) ; en JavaScript, element.classList.add('featured') et classList.remove les modifient. Les classes sont le moyen normal de mettre en forme : la plupart de votre CSS ciblera des classes.

L'attribut id

id donne à un élément un nom qui doit être unique sur la page. Utilisez-le quand vous avez besoin d'exactement un élément : la cible d'un lien, un <label for> ou document.getElementById.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>id</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #pricing { background: #e5e7eb; padding: 12px; margin-top: 600px; }
  </style>
</head>
<body>
  <a href="#pricing">Jump to pricing</a>
  <p><label for="email">Email</label> <input id="email" type="email"></p>
  <section id="pricing">This section has id="pricing". The link above scrolls here.</section>
</body>
</html>

Cliquer sur le label met le focus sur le champ, car for="email" pointe vers id="email". Le lien fait défiler jusqu'à #pricing car le fragment du href correspond à l'id.

	`class`	`id`
Combien d'éléments peuvent le partager	Autant que vous voulez	Un seul (unique)
Valeurs par élément	Plusieurs, séparées par des espaces	Une
Sélecteur CSS	`.name`	`#name`
Usage typique	Mettre en forme des groupes d'éléments	Cibles de liens, labels, un élément précis en JavaScript

Un id ne peut pas contenir d'espaces. Commencez-le par une lettre pour qu'il reste simple à utiliser en CSS : #2col n'est pas un sélecteur CSS valide sans échappement.

Attributs globaux

Ces attributs fonctionnent sur n'importe quel élément :

Attribut	Rôle
`id`	Nom unique de l'élément
`class`	Liste de noms de classes séparés par des espaces
`style`	CSS en ligne, comme `style="color: red"`
`title`	Texte d'infobulle affiché au survol
`lang`	Langue du contenu, comme `lang="fr"`
`dir`	Sens du texte : `ltr`, `rtl` ou `auto`
`hidden`	Masque l'élément (booléen)
`tabindex`	Rend un élément atteignable avec Tab, ou fixe son ordre
`contenteditable`	Permet à l'utilisateur de modifier le texte de l'élément
`data-*`	Vos propres données, lues en JavaScript

L'attribut lang a sa propre page car il influence les lecteurs d'écran, la traduction et la recherche.

Les attributs data-*

Quand vous devez stocker votre propre valeur sur un élément, préfixez le nom par data-. N'importe quel nom convient après le préfixe, et le JavaScript lit les valeurs via element.dataset, les tirets étant convertis en camelCase :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>data attributes</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    button { margin: 4px; }
    #out { font-weight: bold; }
  </style>
</head>
<body>
  <button data-product-id="101" data-price="4.50">Tea</button>
  <button data-product-id="102" data-price="3.20">Coffee</button>
  <p id="out">Click a product.</p>
  <script>
    document.querySelectorAll('button').forEach((btn) => {
      btn.addEventListener('click', () => {
        const { productId, price } = btn.dataset;
        document.getElementById('out').textContent = 'Product ' + productId + ' costs ' + price;
      });
    });
  </script>
</body>
</html>

data-product-id devient dataset.productId. Les valeurs reviennent toujours sous forme de chaînes, donc convertissez-les avec Number() avant de calculer. Le CSS peut aussi les sélectionner : [data-price="4.50"].

Erreurs fréquentes

Écrire class deux fois. <div class="a" class="b"> ne garde que a. Mettez les deux dans un seul attribut : class="a b".
Réutiliser un id. Deux éléments avec le même id cassent les liens d'ancre (#links), les labels et getElementById, qui ne renvoie que le premier. Utilisez une classe pour tout ce qui se répète.
disabled="false" ou checked="false". L'attribut est toujours présent, donc toujours actif. Supprimez-le plutôt.
Valeurs sans guillemets avec des espaces. alt=My photo donne à alt la valeur My. Mettez chaque valeur entre guillemets.
Inventer des attributs sans data-. <div price="4"> est du HTML invalide et peut entrer en conflit avec un futur attribut standard. Utilisez data-price.

Questions fréquentes

Qu'est-ce qu'un attribut HTML ?

Un attribut est une information supplémentaire écrite dans une balise ouvrante sous la forme name="value". Il configure l'élément : href définit la destination d'un lien, src et alt décrivent une image, class et id permettent au CSS et au JavaScript de trouver l'élément.

Quelle est la différence entre class et id en HTML ?

Un id doit être unique sur la page et identifie un seul élément, pour les liens #fragment, <label for> et getElementById. Une class peut être partagée par plusieurs éléments, et un élément peut avoir plusieurs classes séparées par des espaces. Utilisez les classes pour le style.

Comment ajouter plusieurs classes à un élément HTML ?

Mettez-les dans un seul attribut class, séparées par des espaces : <div class="card featured dark">. Écrire class deux fois ne marche pas : le navigateur ne garde que le premier.

Les attributs HTML ont-ils besoin de guillemets ?

Les guillemets sont facultatifs quand la valeur n'a ni espace ni caractère spécial, mais mettre toujours des guillemets est l'habitude la plus sûre. class=big box donne à l'élément la classe big et un attribut distinct nommé box.

Pourquoi mon bouton reste désactivé avec disabled="false" ?

disabled est un attribut booléen : sa présence signifie vrai, quelle que soit la valeur. Pour activer l'élément, supprimez l'attribut, ou exécutez button.disabled = false en JavaScript, ce qui le supprime.

Puis-je inventer mes propres attributs HTML ?

Utilisez le préfixe data- : data-price="12" ou data-user-id="7" sont valides sur n'importe quel élément et lisibles en JavaScript via element.dataset. Les noms inventés sans ce préfixe sont du HTML invalide.

Concepts liés