Les attributs des balises HTML – Édition numérique

Définition

En HTML, un attribut fournit une information supplémentaire sur une balise.
Il modifie ou précise le comportement d’un élément.
Il est toujours défini dans la balise ouvrante, sous la forme :

<nom_balise nom_attribut="valeur"> … </nom_balise>

Exemple :

<a href="https://www.lacritique.org">La Critique</a>

Ici,

href est l’attribut,
"https://www.lacritique.org" est sa valeur.

Structure d’un attribut

Élément	Description	Exemple
Nom de l’attribut	Mot-clé sans espace, sensible à la casse (par convention en minuscules)	`src`
Signe égal	Sépare le nom et la valeur	`=`
Valeur	Texte entre guillemets doubles ou simples	`"portrait.jpg"`

Catégories d’attributs

Attributs universels

Valables pour presque toutes les balises :

id — identifiant unique (pour un lien interne ou un script)
class — classification (utile pour CSS ou JavaScript)
style — styles en ligne (à éviter en édition professionnelle)
title — info-bulle au survol
lang — langue du contenu (<p lang="fr">…</p>)

Attributs spécifiques

Propre à certaines balises :

<img src="image.jpg" alt="Description de l’image">
- src : chemin du fichier
- alt : texte alternatif (important pour l’accessibilité)
<a href="page.html" target="_blank">
- href : lien hypertexte
- target="_blank" : ouverture dans un nouvel onglet

Attributs booléens

Leur seule présence suffit (pas de valeur à indiquer) :

<input type="checkbox" checked>

Ici, checked signifie que la case est cochée.

Bonnes pratiques éditoriales

Toujours fermer les guillemets autour des valeurs.
Employer des minuscules pour les noms d’attributs.
Préférer les feuilles CSS externes plutôt que l’attribut style.
Ne pas dupliquer les id.
Utiliser des textes alternatifs (alt) descriptifs et sobres.

Exemples d’usage combiné

<figure id="photo1" class="portrait">
  <img src="portrait.jpg" alt="Portrait de l’artiste">
  <figcaption lang="fr">Portrait de l’artiste, 2024.</figcaption>
</figure>

Exercice pratique

Créez une page HTML contenant :
- un lien vers un site externe, ouvrant dans un nouvel onglet ;
- une image avec un texte alternatif ;
- un paragraphe avec un attribut lang différent de la langue principale ;
- un titre avec un id et une class.
Validez votre code sur https://validator.w3.org