Apprends les bonnes pratiques HTML incluant la validation W3C, l'optimisation des performances avec les stratégies de chargement de script, l'amélioration progressive, et les erreurs courantes à éviter.
Le Service de Validation de Balisage W3C vérifie ton HTML par rapport à la spécification et signale les erreurs et avertissements. Un HTML valide garantit :
| Erreur | Correction |
|---|---|
alt manquant sur <img> | Ajoute l'attribut alt (utilise alt="" pour les images décoratives) |
| Éléments non fermés | Assure-toi que chaque balise ouvrante a une balise fermante correspondante |
Attributs id dupliqués | Chaque id doit être unique sur la page |
Éléments de bloc à l'intérieur de <p> | Déplace les éléments de bloc en dehors du paragraphe |
<!DOCTYPE html> manquant | Commence toujours par la déclaration doctype |
Éléments obsolètes (<center>, <font>) | Utilise CSS à la place |
Intègre la validation dans ton workflow — lance-la pendant le développement, pas seulement avant le lancement.
La façon dont tu charges le JavaScript affecte les performances de la page. Les attributs clés sur <script> sont :
defer<script src="app.js" defer></script>async<script src="analytics.js" async></script>type="module"<script type="module" src="app.js"></script>import/export.<link rel="preload"> — Récupère une ressource immédiatement (polices, CSS critique).<link rel="prefetch"> — Récupère une ressource pour une navigation future (faible priorité).<link rel="preconnect"> — Établit une connexion précoce vers une origine tierce.<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>L'amélioration progressive est une stratégie qui commence par une base de HTML fonctionnel et ajoute des couches de CSS et JavaScript comme améliorations.
<a href="/page"> pour la navigation (fonctionne sans JS). Améliore avec du routage côté client.<form action="/submit"> pour la soumission de données (fonctionne sans JS). Améliore avec AJAX.<details>/<summary> pour du contenu repliable (fonctionne sans JS). Améliore avec des animations.<dialog> pour les modales (fonctionne sans JS complexe).L'approche opposée — la dégradation gracieuse — commence avec une expérience complète et essaie de la faire fonctionner dans des environnements limités. L'amélioration progressive est généralement préférée car elle garantit que la base fonctionne partout.
<div> pour tout — Utilise des éléments sémantiques (<nav>, <main>, <section>, <article>, <aside>, <header>, <footer>).<h1> à <h3>. La structure du document doit être logique.<br> pour l'espacement — Utilise margin et padding en CSS à la place.lang manquant sur <html> — Déclare toujours la langue du document.width et height pour éviter le décalage de mise en page.<table> pour la mise en page — Les tableaux sont uniquement pour les données tabulaires.HTML est un standard vivant maintenu par le WHATWG. Il n'y a pas de numéros de version (« HTML5 » est un terme marketing). La spécification est continuellement mise à jour sur html.spec.whatwg.org.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A well-structured HTML page example">
<!-- Preconnect to external origins -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<title>Best Practices Example</title>
<!-- CSS: non-blocking -->
<link rel="stylesheet" href="styles.css">
<!-- JS: deferred -->
<script src="app.js" defer></script>
</head>
<body>
<a href="#main" class="skip-link">Skip to content</a>
<header>
<nav aria-label="Primary">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
</header>
<main id="main">
<article>
<h1>Page Title</h1>
<p>Content goes here.</p>
<img src="photo.jpg" alt="Description" width="800" height="600" loading="lazy">
</article>
</main>
<footer>
<p>© 2025 Example Site</p>
</footer>
</body>
</html>Quelle est la différence entre les attributs `defer` et `async` sur une balise <script> ?