Attributs HTML

Dans la leçon précédente, vous avez appris que les éléments sont faits de balises et de contenu. Les attributs donnent à ces balises des informations supplémentaires. Sans attributs, beaucoup d’éléments ne peuvent pas faire leur vrai travail — un lien a besoin d’une adresse, une image d’un chemin de fichier.

Qu’est-ce qu’un attribut HTML ?

Un attribut HTML est un nom et une valeur placés dans la balise de début d’un élément. Il dit au navigateur quelque chose sur cet élément qui n’est pas le même texte visible entre les balises.

Réponse directe

Les attributs suivent un motif simple : name="value". Ils appartiennent à la balise ouvrante, avant le > de fermeture. Exemples courants : href pour les liens, src et alt pour les images. Les leçons suivantes utilisent souvent les attributs ; apprenez le motif une fois ici.

Lire l’exemple

• Sur le lien, href stocke l’URL de destination
• Le texte visible du lien reste le contenu entre <a> et </a>
• Sur l’image, src pointe vers le fichier image
• alt fournit un texte alternatif si l’image ne charge pas ou pour l’accessibilité
• Les deux attributs sont dans la balise de début

Règles de syntaxe à retenir

1. Placez les attributs uniquement dans la balise de début — pas dans la balise de fin
2. Séparez le nom de la valeur avec =
3. Entourez la plupart des valeurs de guillemets : href="https://example.com"
4. Vous pouvez mettre plusieurs attributs dans la même balise de début, séparés par des espaces
5. Les noms d’attributs s’écrivent souvent en minuscules en HTML moderne

Ici href fixe l’adresse et title peut fournir un texte d’aide supplémentaire (souvent une info-bulle sur bureau). Vous n’avez pas besoin de chaque attribut optionnel sur chaque balise — utilisez ceux dont l’élément a besoin.

Attributs vs contenu

Le contenu se trouve entre la balise de début et celle de fin, comme les mots d’un paragraphe. Les attributs vivent sur la balise de début et configurent l’élément. Les confondre crée des bugs : mettre une URL seulement dans le texte du lien ne crée pas un lien qui fonctionne ; l’URL appartient à href.

Note sur les éléments vides

Les éléments vides comme img utilisent encore des attributs même sans balise de fin séparée. C’est normal : les attributs décrivent l’élément ; ce n’est pas le contenu enveloppé.

Essayez vous-même

1. Ouvrez une page HTML de base dans votre éditeur
2. Ajoutez un lien avec un attribut href vers une URL réelle ou d’exemple
3. Ajoutez un img avec src et un alt pertinent (tout chemin d’exercice ou nom provisoire pour apprendre la syntaxe)
4. Enregistrez et ouvrez la page dans le navigateur
5. Cliquez sur le lien et vérifiez dans le code source que le balisage de l’image est présent même si le fichier image manque

Erreurs fréquentes

• Écrire des attributs sur la balise de fermeture
• Oublier les guillemets autour des valeurs qui en ont besoin
• Utiliser le mauvais attribut (par exemple une URL dans src sur un lien au lieu de href)
• Laisser alt vide sur des images informatives
• Supposer que le texte d’attribut apparaît toujours comme contenu visible — beaucoup configurent le comportement ou l’accessibilité

Résumé

• Les attributs ajoutent des informations supplémentaires dans la balise de début
• La forme habituelle est name="value"
• Les liens ont besoin de href ; les images ont souvent besoin de src et alt
• Le contenu est entre les balises ; les attributs configurent la balise
• Vous pouvez combiner plusieurs attributs sur une balise de début
• Les leçons suivantes réutilisent ce motif pour titres, formulaires, médias et plus