Attributs et bonnes pratiques — Cours HTML

Les attributs globaux

Les attributs ajoutent des informations à vos balises HTML. Certains sont utilisables sur n'importe quelle balise — ce sont les attributs globaux :

id — identifiant unique (un seul par page). Sert aux ancres (#section), au CSS, au JavaScript
class — classes CSS (plusieurs par élément, réutilisables). Le pont entre HTML et CSS
style — styles inline (à éviter en général, CSS préféré)
title — infobulle au survol
data-* — attributs personnalisés pour le JavaScript (ex : data-product-id="42")

id vs class

C'est la question classique des débutants. Voici la règle simple :

id="header" → unique, un seul élément par page. CSS : #header { }
class="card" → réutilisable, plusieurs éléments. CSS : .card { }

Un élément peut avoir un id ET des classes : <div id="main" class="container large">

Règle pratique : utilisez des classes 95% du temps, des id pour les cas uniques (ancres, cibles JavaScript spécifiques).

Accessibilité de base

L'accessibilité n'est pas un bonus, c'est une obligation. Quelques règles essentielles :

lang="fr" sur <html> — indispensable pour que les lecteurs d'écran prononcent le texte correctement
alt sur toutes les images (déjà vu dans la leçon 4)
aria-label — description pour les éléments sans texte visible (icônes, boutons avec juste une image)
role — rôle explicite quand la balise seule ne suffit pas
Contraste des couleurs — pas du HTML, mais essentiel pour la lisibilité

Bonnes pratiques

Toujours fermer ses balises (sauf auto-fermantes : br, img, hr, input, meta, link)
Indenter son code (2 espaces par niveau) — un code lisible est un code maintenable
Noms de classes descriptifs : .product-card pas .pc1
Valider son HTML : le W3C Validator détecte les erreurs
Commentaires HTML :  — utile mais ne pas en abuser

Récapitulatif du cours HTML

En 8 leçons, vous avez appris :

Ce qu'est le HTML et pourquoi le comprendre même avec l'IA
La structure de base d'une page (DOCTYPE, head, body)
Les titres h1-h6, paragraphes, mise en forme
Les liens <a> et images <img>
Les listes et les tableaux
Les balises sémantiques pour une structure claire
Les formulaires et la validation native
Les attributs, l'accessibilité et les bonnes pratiques

Vous avez maintenant les bases pour comprendre et modifier n'importe quelle page HTML.

Prochaine étape ? Le CSS pour donner du style et du design à vos pages !

Global attributes

Attributes add information to your HTML tags. Some can be used on any tag — these are global attributes:

id — unique identifier (only one per page). Used for anchors (#section), CSS, JavaScript
class — CSS classes (multiple per element, reusable). The bridge between HTML and CSS
style — inline styles (avoid in general, prefer CSS)
title — tooltip on hover
data-* — custom attributes for JavaScript (e.g., data-product-id="42")

id vs class

This is the classic beginner question. Here's the simple rule:

id="header" → unique, one element per page. CSS: #header { }
class="card" → reusable, multiple elements. CSS: .card { }

An element can have both an id AND classes: <div id="main" class="container large">

Rule of thumb: use classes 95% of the time, ids for unique cases (anchors, specific JavaScript targets).

Basic accessibility

Accessibility isn't a bonus, it's a requirement. A few essential rules:

lang="fr" on <html> — essential for screen readers to pronounce text correctly
alt on all images (covered in lesson 4)
aria-label — description for elements without visible text (icons, buttons with just an image)
role — explicit role when the tag alone isn't enough
Color contrast — not HTML, but essential for readability

Best practices

Always close your tags (except self-closing: br, img, hr, input, meta, link)
Indent your code (2 spaces per level) — readable code is maintainable code
Descriptive class names: .product-card not .pc1
Validate your HTML: the W3C Validator catches errors
HTML comments:  — useful but don't overdo it

HTML course recap

In 8 lessons, you learned:

What HTML is and why you need to understand it even with AI
Basic page structure (DOCTYPE, head, body)
Headings h1-h6, paragraphs, text formatting
Links <a> and images <img>
Lists and tables
Semantic tags for a clear structure
Forms and native validation
Attributes, accessibility and best practices

You now have the foundations to understand and modify any HTML page.

Next step? CSS to add style and design to your pages!

Essayez vous-même

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Attributs HTML</title>
</head>
<body>

<header id="top">
        <h1 class="site-title">Mon portfolio</h1>
        <nav aria-label="Navigation principale">
            <a href="#projets">Projets</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>

<main>
        <section id="projets">
            <h2>Mes projets</h2>
            <div class="card" data-category="web">
                <h3>Site e-commerce</h3>
                <p class="card-desc">Boutique en ligne avec panier.</p>
            </div>
            <div class="card" data-category="mobile">
                <h3>App mobile</h3>
                <p class="card-desc">Application de suivi fitness.</p>
            </div>
        </section>

<section id="contact">
            <h2>Contact</h2>
            <button aria-label="Envoyer un email">
                Contactez-moi
            </button>
        </section>
    </main>

<footer>
        <p><a href="#top">Retour en haut</a></p>
        
    </footer>

</body>
</html>

Avec l'IA

Copiez ce prompt dans Claude ou ChatGPT :

Audite ce code HTML et donne-moi 5 améliorations d'accessibilité et de bonnes pratiques : [coller le code]

Exercice : Corrigez le code de l'IA

L'IA a généré du HTML avec des mauvaises pratiques : styles inline partout, pas de classes, pas de alt, pas de lang. Corrigez le code en appliquant les bonnes pratiques.

Corrigez le code

Quelle est la différence entre id et class ?

Aucune id est unique par page, class est réutilisable class est plus rapide

L'attribut data-* sert à :

Le style CSS Stocker des données personnalisées pour JavaScript L'accessibilité

Pourquoi mettre lang="fr" sur <html> ?

Pour le SEO uniquement Pour que les lecteurs d'écran prononcent correctement le texte C'est décoratif

Un bon nom de classe CSS est :

.x1 .product-card .div3

Pour aller plus loin : balises HTML utiles

Vous maîtrisez maintenant les fondamentaux. Voici des balises plus rares mais précieuses à connaître. Cliquez sur les liens pour explorer la documentation.

<details> / <summary> — accordéon natif sans JavaScript W3Schools · MDN
<dialog> — fenêtre modale native W3Schools · MDN
<meter> — jauge de mesure (espace disque, score) W3Schools
<progress> — barre de progression W3Schools
<time> — date/heure sémantique (SEO, accessibilité) W3Schools
<abbr> — abréviation avec infobulle W3Schools
<mark> — texte surligné W3Schools
<figure> / <figcaption> — image avec légende W3Schools
<picture> / <source> — images responsives (formats multiples) W3Schools

Référence complète : W3Schools HTML Reference · MDN HTML Elements

Les fondations sont posées

Félicitations. En 8 leçons, vous avez construit les fondations de votre bâtiment. Le HTML, c'est la structure porteuse — les murs, les portes, les fenêtres. Sans ça, rien ne tient.

Mais un bâtiment en béton brut, personne n'a envie d'y vivre. Le CSS, c'est la façade — la peinture, l'architecture intérieure, ce qui transforme une structure solide en quelque chose de beau. C'est la prochaine étape.

Et le JavaScript, c'est l'électricité et la plomberie — ce qui rend le tout fonctionnel et vivant. Interrupteurs, robinets, ascenseur : sans ça, le bâtiment est joli mais inerte.

Vous avez les fondations. Maintenant, construisons la façade.

Commencer le cours CSS →

Going further: useful HTML tags

You now master the fundamentals. Here are rarer but valuable tags worth knowing. Click the links to explore the documentation.

<details> / <summary> — native accordion without JavaScript W3Schools · MDN
<dialog> — native modal dialog W3Schools · MDN
<meter> — measurement gauge (disk space, score) W3Schools
<progress> — progress bar W3Schools
<time> — semantic date/time (SEO, accessibility) W3Schools
<abbr> — abbreviation with tooltip W3Schools
<mark> — highlighted text W3Schools
<figure> / <figcaption> — image with caption W3Schools
<picture> / <source> — responsive images (multiple formats) W3Schools

Full reference: W3Schools HTML Reference · MDN HTML Elements

The foundations are laid

Congratulations. In 8 lessons, you've built the foundations of your building. HTML is the load-bearing structure — the walls, doors, and windows. Without it, nothing stands.

But nobody wants to live in bare concrete. CSS is the facade — the paint, the interior design, what turns a solid structure into something beautiful. That's the next step.

And JavaScript is the electricity and plumbing — what makes everything functional and alive. Light switches, faucets, elevators: without them, the building looks nice but does nothing.

You have the foundations. Now, let's build the facade.

Start the CSS course →