Comprendre le Web moderne [Grade A – Théorie]
Avant de coder votre première page web, il est essentiel de comprendre comment fonctionne le Web moderne. Cette fiche théorique pose les bases indispensables pour tout designer UX/UI qui souhaite maîtriser l’intégration.
Objectifs pédagogiques
- Comprendre le rôle du navigateur et comment il affiche une page
- Maîtriser les concepts de DOM et CSSOM
- Identifier les 3 piliers UX/UI : sémantique, accessibilité, SEO
- Connaître la structure minimale d’un document HTML5
À retenir
Comprendre le cycle requête/réponse HTTP et le rôle d’interprète du navigateur.
Le navigateur : votre interprète universel
Quand vous tapez une URL dans votre navigateur (Chrome, Firefox, Safari, Edge…), voici ce qui se passe :
- Requête HTTP : Le navigateur envoie une demande au serveur
- Réponse : Le serveur renvoie les fichiers (HTML, CSS, JS, images…)
- Parsing : Le navigateur analyse le code HTML et CSS
- Rendering : Il construit l’affichage visuel et interactif
Point clé : Le navigateur ne « compile » pas le code, il l’interprète en temps réel. C’est pourquoi vous pouvez voir vos modifications instantanément en rafraîchissant la page.
Le DOM : Document Object Model
Le DOM est une représentation arborescente de votre page HTML. Chaque balise devient un « nœud » dans cet arbre :
<html>
├── <head>
│ ├── <title>
│ └── <meta>
└── <body>
├── <header>
├── <main>
└── <footer>Le JavaScript utilise le DOM pour manipuler dynamiquement le contenu.
Le CSSOM : CSS Object Model
Parallèlement au DOM, le navigateur construit le CSSOM — une représentation de tous les styles CSS. En combinant DOM + CSSOM, il crée le Render Tree qui détermine l’affichage final.
Flux de rendu : HTML → DOM + CSS → CSSOM → Render Tree → Affichage
À retenir
HTML5 introduit des balises sémantiques et des APIs natives essentielles pour les interfaces modernes.
HTML5 n’est pas qu’une « mise à jour » du HTML. C’est une refonte complète qui introduit :
Des balises sémantiques
| Avant HTML5 | Avec HTML5 | Bénéfice |
|---|---|---|
<div id="header"> |
<header> |
Sens explicite |
<div id="nav"> |
<nav> |
Navigation identifiable |
<div id="main"> |
<main> |
Contenu principal clair |
<div id="footer"> |
<footer> |
Pied de page explicite |
Des APIs natives puissantes
- <video> et <audio> : Multimédia sans plugin
- <canvas> : Dessins et animations 2D/3D
- Geolocation API : Localisation de l’utilisateur
- LocalStorage : Stockage de données côté client
- Web Workers : Traitement en arrière-plan
Pour les designers UX/UI : HTML5 fournit les briques de base pour construire des interfaces cohérentes. Les Design Systems (Material Design, Carbon, Atlassian…) s’appuient tous sur cette structure sémantique.
À retenir
Utiliser la bonne balise pour le bon contenu améliore l’accessibilité et le SEO.
Les balises sémantiques principales :
<article>pour un contenu autonome (article de blog, commentaire…)<aside>pour du contenu secondaire (sidebar, encadré…)<section>pour regrouper du contenu thématique<figure>+<figcaption>pour les images avec légende
Erreur fréquente : Utiliser des <div> partout. Un <div> n’a aucune valeur sémantique — c’est une boîte générique. Privilégiez toujours une balise qui a du sens.
À retenir
Un site accessible peut être utilisé par tout le monde, c’est une obligation légale et une bonne pratique UX.
L’accessibilité concerne notamment les personnes :
- Malvoyantes : utilisant un lecteur d’écran
- Malentendantes : nécessitant des sous-titres
- À mobilité réduite : naviguant au clavier
- Avec troubles cognitifs : ayant besoin de clarté
En France, le RGAA (Référentiel Général d’Amélioration de l’Accessibilité) impose des règles pour les sites publics. Mais l’accessibilité est une bonne pratique pour tous les sites.
Astuce : Un site accessible est souvent un site mieux conçu. Les contraintes d’accessibilité poussent à clarifier l’information et la navigation.
À retenir
Le référencement naturel dépend en grande partie de la qualité de votre HTML.
Bonnes pratiques SEO pour le HTML :
- Un seul
<h1>par page (titre principal) - Hiérarchie logique : h1 → h2 → h3 (pas de saut)
- Attribut
altsur toutes les images - Balises
<meta>bien renseignées - Structure sémantique claire
Google lit votre HTML : Les robots d’indexation analysent la structure pour comprendre le sujet de votre page. Une bonne sémantique = meilleur référencement.
À retenir
Tout document HTML5 moderne commence par ce squelette de base.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Description de la page pour le SEO">
<title>Titre de la page</title>
</head>
<body>
<!-- Contenu visible ici -->
</body>
</html>Décryptage ligne par ligne
| Élément | Rôle |
|---|---|
<!DOCTYPE html> |
Indique au navigateur d’utiliser HTML5 |
<html lang="fr"> |
Balise racine + langue du document |
<meta charset="UTF-8"> |
Encodage des caractères (accents, emojis…) |
<meta name="viewport"...> |
Responsive : adaptation mobile |
<meta name="description"...> |
Description pour Google (SEO) |
<title> |
Titre de l’onglet du navigateur |
Récapitulatif
- Le navigateur interprète HTML, CSS et JS pour afficher une page
- Le DOM représente la structure HTML, le CSSOM les styles
- HTML5 apporte sémantique et APIs natives
- Les 3 piliers UX/UI : sémantique, accessibilité, SEO
- Tout document HTML5 commence par
<!DOCTYPE html>
Validez vos connaissances
Testez votre compréhension avec ce quiz de 10 questions :
