HTML — Attributs globaux¶
Ce chapitre clôt la partie consacrée au HTML approfondi avant de basculer vers le CSS. Jusqu’ici, nous avons vu des attributs propres à certaines balises (href pour <a>, src pour <img>…). Il existe aussi des attributs utilisables sur n’importe quelle balise : ce sont les attributs globaux. Ils sont peu nombreux mais omniprésents, et plusieurs feront le lien direct avec le CSS et le JavaScript.
Qu’est-ce qu’un attribut global ?¶
Un attribut global est un attribut que l’on peut placer sur toutes les balises HTML, sans exception. Voici les principaux.
Attribut |
Rôle |
|---|---|
|
Identifiant unique |
|
Classe(s) CSS (réutilisable) |
|
Styles CSS inline |
|
Info-bulle au survol |
|
Données personnalisées |
|
Langue du contenu |
|
Cache l’élément |
Deux d’entre eux, id et class, sont absolument centraux : ce sont eux qui permettront au CSS et au JavaScript de cibler précisément les éléments. Commençons par là.
Attribut id¶
Rôle : donner à un élément un identifiant unique dans la page.
Trois règles le caractérisent : sa valeur doit être unique sur toute la page, elle commence par une lettre, et elle ne contient pas d’espaces.
Ses usages typiques :
<div id="header">En-tête</div>
<a href="#section2">Aller à la section 2</a>
<section id="section2">...</section>
<button id="submit-btn">Envoyer</button>
L”id brille pour les ancres (le lien #section2 saute directement à l’élément portant cet id) et comme point d’accroche pour le JavaScript. On verra plus bas pourquoi on évite de s’en servir pour le style.
Attribut class¶
Rôle : attribuer à un élément une ou plusieurs classes CSS, réutilisables.
À l’inverse de l”id, une class peut être posée sur plusieurs éléments, et un même élément peut porter plusieurs classes, séparées par des espaces.
<p class="important">Texte important</p>
<div class="card featured highlight">Carte mise en avant</div>
Ici, la carte cumule trois classes : card, featured et highlight. Chacune peut apporter sa part de mise en forme, qui se combinent. C’est cette souplesse qui fait de la classe l’outil de prédilection pour styliser.
id vs class¶
Le tableau suivant résume tout ce qui les distingue.
Critère |
|
|
|---|---|---|
Unicité |
Unique dans la page |
Réutilisable |
Nombre par élément |
Un seul |
Plusieurs possibles |
Spécificité CSS |
Très élevée (100) |
Moyenne (10) |
Usage recommandé |
Ancres, JavaScript |
Styles CSS |
<nav id="main-nav" class="navigation sticky">
<a href="#home" class="nav-link active">Accueil</a>
</nav>
Un même élément peut tout à fait porter à la fois un id (pour le ciblage JavaScript ou une ancre) et des class (pour le style), comme ce <nav> le montre.
Méthode : Préférer les classes pour le CSS
Réservez les id aux ancres de navigation et aux cibles JavaScript. Pour le style, utilisez toujours des class : leur spécificité plus faible (10 vs 100) facilite la maintenance et évite les conflits de cascade.
La notion de spécificité évoquée dans cet encart sera détaillée dans le chapitre sur les sélecteurs CSS. Retenez pour l’instant l’idée pratique : un style posé via un id est difficile à surcharger ensuite, ce qui complique la vie sur un vrai projet.
Attribut style¶
Rôle : appliquer des styles CSS inline, directement dans la balise.
<p style="color: blue; font-size: 18px;">Texte bleu</p>
À éviter en règle générale : cette approche mélange structure et présentation, exactement ce que la séparation HTML/CSS cherche à empêcher. On lui préfère un fichier CSS externe, plus lisible et réutilisable.
Il existe tout de même un cas d’usage légitime : les styles générés dynamiquement par JavaScript (par exemple une barre de progression dont la largeur change en temps réel). En dehors de ce cas, fuyez l’attribut style.
Attribut title¶
Rôle : afficher une info-bulle au survol de la souris.
<abbr title="HyperText Markup Language">HTML</abbr>
<button title="Cliquez pour enregistrer">💾</button>
<img src="photo.jpg" alt="Photo" title="Photo de vacances 2026">
Ses avantages : il fournit une aide contextuelle et améliore l’expérience utilisateur, par exemple pour expliciter une abréviation ou clarifier l’action d’un bouton-icône.
⚠️ Limites : l’info-bulle apparaît au survol de la souris, un geste qui n’existe pas sur écran tactile. Le title est donc non accessible au tactile : ne lui confiez jamais une information indispensable.
Attributs data-* — Données personnalisées¶
Rôle : stocker sur un élément des données personnalisées, généralement destinées au JavaScript. On forge le nom librement, à condition de le préfixer par data-.
<article data-article-id="42" data-author="Jean Dupont" data-category="tech">
<h2>Titre de l'article</h2>
</article>
<script>
const article = document.querySelector('article');
console.log(article.dataset.articleId); // "42"
console.log(article.dataset.author); // "Jean Dupont"
console.log(article.dataset.category); // "tech"
</script>
Côté JavaScript, ces données se récupèrent via la propriété dataset, qui convertit automatiquement data-article-id en articleId. C’est la façon propre d’attacher de l’information à un élément sans détourner d’autres attributs de leur rôle.
Bonne pratique : un nom descriptif derrière le préfixe data-, pour que le code reste lisible.
Attribut lang¶
Rôle : indiquer la langue du contenu. On le place souvent sur <html> pour toute la page, mais on peut aussi le préciser localement sur un passage dans une autre langue.
<html lang="fr">
<body>
<p>Texte en français</p>
<p lang="en">This is in English</p>
<p lang="es">Esto es en español</p>
</body>
</html>
Cet attribut discret rend plusieurs services : une prononciation correcte par les lecteurs d’écran, une meilleure identification de la langue pour le SEO, une traduction automatique plus fiable, et l’activation du bon correcteur orthographique dans le navigateur.