HTML Academy · Leçon

id, class, style et title

Appliquez les principaux attributs globaux à n’importe quel élément HTML.

Leçon 1 sur 413 étapes

id, class, style et title est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

Attributs globaux

Les attributs globaux peuvent être appliqués à n’importe quel élément HTML :

id — identifiant unique
class — une ou plusieurs classes CSS
style — CSS en ligne
title — texte d’infobulle
Et bien d’autres : lang, hidden, tabindex, data-*...

L’attribut id

L’attribut id attribue un identifiant unique à un élément :

<h2 id="installation">Installation Guide</h2>
<form id="signup-form">...</form>
<div id="hero-banner">...</div>

<!-- Rules:
  - Must be unique per page
  - No spaces
  - Use hyphens: user-profile
  - Case-sensitive: #hero ≠ #Hero
-->

Utilisations de id

L’attribut id a plusieurs fonctions :

Ciblage CSS : #hero-banner { ... }
Sélection JavaScript : document.getElementById('signup-form')
Navigation par fragment : <a href="#installation">
Étiquetage ARIA : aria-labelledby="modal-title"

L’attribut class

L’attribut class attribue une ou plusieurs classes CSS :

<p class="text-large">Large text paragraph.</p>
<button class="btn btn-primary">Submit</button>
<div class="card card-featured highlighted">...</div>

<!-- Multiple classes separated by spaces -->
<!-- Elements can share classes (unlike id) -->
<!-- JavaScript: element.classList.add('active') -->

id ou class

Quand utiliser chacun :

id — un élément précis sur la page
class — un modèle de style appliqué à plusieurs éléments

<!-- id: unique element -->
<main id="main-content">...</main>

<!-- class: reusable style -->
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card card-featured">Featured</div>

L’attribut style

L’attribut style ajoute du CSS en ligne :

<p style="color: red; font-weight: bold;">Warning message</p>
<div style="background: #f0f4f8; padding: 1rem; border-radius: 0.5rem;">
  Info box
</div>

<!-- Inline styles have the highest specificity
     They are hard to override and hard to maintain
     Prefer external CSS classes whenever possible -->

Quand utiliser style en ligne

Le style en ligne est acceptable dans les cas suivants :

Valeurs dynamiques définies par JavaScript
Valeurs impossibles à connaître au moment d’écrire le CSS (couleurs ou largeurs définies par l’utilisateur)
HTML des e-mails (les clients de messagerie suppriment le CSS externe)

N’utilisez pas style pour des choix de présentation statiques — ceux-ci doivent être définis en CSS.

L’attribut title

L’attribut title fournit un texte d’infobulle au survol :

<abbr title="HyperText Markup Language">HTML</abbr>
<button title="Submit the registration form">Submit</button>
<a href="/docs" title="Full documentation (opens in new tab)" target="_blank" rel="noopener">Docs</a>

Limites d’accessibilité de title

L’attribut title présente d’importants problèmes d’accessibilité :

Il n’est pas accessible au clavier
Il ne s’affiche pas sur les écrans tactiles
Son comportement avec les lecteurs d’écran est incohérent
Ne placez jamais d’informations essentielles uniquement dans title

Utilisez aria-label ou un texte visible pour les informations importantes.

Spécificité : id ou class ou style en ligne

Spécificité CSS, de la plus faible à la plus élevée :

/* Element selector: 0-0-1 */
p { color: gray; }

/* Class selector: 0-1-0 */
.text { color: blue; }

/* ID selector: 1-0-0 */
#unique { color: green; }

/* Inline style: 1-0-0-0 (highest) */
<p style="color: red;">Red wins</p>

Conventions de nommage de class

Conventions courantes de nommage des classes :

<!-- BEM (Block Element Modifier) -->
<div class="card">
  <div class="card__header">
    <h2 class="card__title card__title--featured">Title</h2>
  </div>
</div>

<!-- Utility classes (Tailwind style) -->
<div class="flex items-center gap-4 p-4 bg-white rounded-lg shadow">

Vérification rapide

Quelle est la règle principale concernant l’attribut id ?

Réponds-y dans la leçon interactive

Récapitulatif : id, class, style et title

Attributs globaux essentiels :

id — unique par page ; utilisé pour CSS, JavaScript, les fragments et ARIA
class — réutilisable ; plusieurs classes séparées par des espaces
style — CSS en ligne (à utiliser avec parcimonie ; préférez le CSS externe)
title — infobulle ; inaccessible aux utilisateurs du clavier et des écrans tactiles
La spécificité de id est supérieure à celle de class en CSS

Gratuit pour commencer

Apprends HTML avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 40
Leçons: 159

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « id, class, style et title » est-elle gratuite ?

Oui — le texte complet de « id, class, style et title » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « id, class, style et title » ?

Appliquez les principaux attributs globaux à n’importe quel élément HTML. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer HTML Academy ?

Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « id, class, style et title » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?

Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

id, class, style et title
L’attribut hidden
tabindex et accesskey
Attributs de données personnalisés data-*

← Retour à HTML Academy