01 Fonctionnement technique du web + HTML avancé
Découvrez les rouages du web moderne ! De l’architecture client-serveur aux structures HTML sémantiques, cette formation vous donnera les clés pour comprendre et maîtriser les fondamentaux techniques qui font fonctionner Internet.
Objectifs pédagogiques
- Comprendre l’architecture technique du web (hébergement, domaines, serveurs, navigateurs)
- Maîtriser le cycle requête/réponse et identifier les composants d’un site web
- Structurer un document HTML5 sémantique et accessible
- Appliquer les bonnes pratiques d’accessibilité et de performance
- Analyser et diagnostiquer la structure technique d’un site existant
Le modèle client-serveur
Le web fonctionne selon un modèle client-serveur où votre navigateur (client) communique avec des serveurs distants pour récupérer des ressources. Lorsque vous tapez une URL, le navigateur envoie une requête HTTP au serveur qui héberge le site. Ce serveur traite la demande et renvoie une réponse contenant le code HTML, CSS, JavaScript et les médias nécessaires à l’affichage de la page.
DNS et résolution d’adresse
Le système DNS (Domain Name System) agit comme l’annuaire d’Internet. Quand vous saisissez « exemple.com », le DNS traduit ce nom de domaine en adresse IP (comme 192.168.1.1) que les machines peuvent comprendre. Ce processus de résolution implique plusieurs serveurs DNS qui se relaient l’information jusqu’à trouver l’adresse IP correspondante. L’hébergement web consiste à louer de l’espace sur des serveurs connectés en permanence à Internet, garantissant la disponibilité de votre site 24h/24.
Point clé : Le cycle requête/réponse HTTP est la base de toute interaction web. Chaque clic, chaque formulaire soumis génère une nouvelle requête vers un serveur.
À retenir
Le web est un système distribué où navigateurs et serveurs communiquent via HTTP, avec le DNS comme système d’adressage universel.
Organisation des fichiers
Un projet web typique s’organise en plusieurs dossiers : le HTML pour la structure, le CSS pour le style (souvent dans un dossier « css » ou « styles »), le JavaScript pour l’interactivité (dossier « js » ou « scripts »), et les médias (images, vidéos) dans un dossier « assets » ou « media ». Cette organisation facilite la maintenance et le travail collaboratif. Les fichiers HTML référencent les autres ressources via des chemins relatifs ou absolus.
Rôle de chaque technologie
HTML (HyperText Markup Language) définit la structure sémantique du contenu avec des balises qui décrivent le sens de chaque élément. CSS (Cascading Style Sheets) s’occupe de la présentation visuelle : couleurs, polices, mise en page, animations. JavaScript ajoute l’interactivité : réaction aux clics, validation de formulaires, mise à jour dynamique du contenu. Ces trois langages travaillent ensemble selon le principe de séparation des préoccupations.
Optimisation des performances : La minification des fichiers CSS/JS et la compression d’images réduisent les temps de chargement. Les CDN (Content Delivery Networks) distribuent les ressources géographiquement pour accélérer l’accès.
Point clé : La séparation HTML/CSS/JS permet une maintenance plus facile et une meilleure performance. Chaque technologie a un rôle spécifique et complémentaire.
À retenir
Un site web moderne sépare structure (HTML), présentation (CSS) et comportement (JavaScript) pour une architecture maintenable et performante.
Balises sémantiques HTML5
HTML5 introduit des balises sémantiques qui décrivent clairement le rôle de chaque section : <header> pour l’en-tête, <nav> pour la navigation, <main> pour le contenu principal, <article> pour un contenu autonome, <section> pour regrouper du contenu thématique, <aside> pour du contenu complémentaire, et <footer> pour le pied de page. Ces balises remplacent les <div> génériques et donnent du sens au document.
Structure logique et hiérarchie
Une page HTML bien structurée suit une hiérarchie logique avec un seul <h1> par page, suivi de <h2>, <h3>, etc. sans sauter de niveaux. Les listes (<ul>, <ol>, <dl>) structurent l’information, tandis que les balises <figure> et <figcaption> associent images et légendes. Cette structure aide les moteurs de recherche à comprendre le contenu et facilite la navigation au clavier.
Point clé : La sémantique HTML améliore le référencement SEO, l’accessibilité et la maintenance du code. Elle donne du sens au contenu au-delà de son apparence.
Validation W3C : Le validateur HTML du W3C vérifie la conformité de votre code aux standards web. Un HTML valide garantit une meilleure compatibilité entre navigateurs.
À retenir
Les balises sémantiques HTML5 structurent le contenu de façon logique, améliorant l’accessibilité, le SEO et la maintenabilité du code.
Standards WCAG et attributs ARIA
Les Web Content Accessibility Guidelines (WCAG) définissent les standards d’accessibilité web. Les attributs ARIA (Accessible Rich Internet Applications) enrichissent la sémantique pour les technologies d’assistance : aria-label fournit une description alternative, aria-describedby associe des éléments explicatifs, role précise le rôle d’un élément. Ces attributs sont essentiels pour les interfaces dynamiques et les composants personnalisés non standard.
Navigation au clavier et lecteurs d’écran
Une interface accessible doit être entièrement navigable au clavier avec la touche Tab. L’ordre de tabulation (tabindex) doit être logique et les éléments focalisés clairement visibles. Les images nécessitent un attribut alt descriptif, les formulaires des labels explicites associés, et les liens un texte significatif. Les couleurs ne doivent pas être le seul moyen de transmettre l’information, et le contraste doit respecter les ratios WCAG.
Point clé : L’accessibilité bénéficie à tous les utilisateurs, pas seulement aux personnes en situation de handicap. Elle améliore l’expérience utilisateur globale.
Outils de test : Les outils comme Lighthouse, axe-core ou WAVE détectent automatiquement de nombreux problèmes d’accessibilité et guident vers les corrections.
À retenir
L’accessibilité web suit les standards WCAG et utilise les attributs ARIA pour créer des interfaces utilisables par tous, indépendamment des capacités ou technologies d’assistance.
Inspecteur de navigateur
L’inspecteur de navigateur (F12) est l’outil indispensable du développeur web. L’onglet Elements permet d’examiner et modifier le HTML/CSS en temps réel, révélant la structure réelle de la page après traitement JavaScript. L’onglet Network montre toutes les requêtes HTTP : temps de chargement, taille des fichiers, codes de réponse. Cette analyse aide à identifier les goulots d’étranglement et optimiser les performances.
Audit et performance
L’onglet Lighthouse génère des audits automatisés sur les performances, l’accessibilité, le SEO et les bonnes pratiques. Il fournit des scores et des recommandations concrètes d’amélioration. L’onglet Performance enregistre l’activité du navigateur pour identifier les opérations coûteuses. Ces outils permettent de mesurer objectivement la qualité technique d’un site et de suivre les améliorations.
Responsive Design : Le mode appareil mobile de l’inspecteur simule différentes tailles d’écran et débits réseau pour tester l’adaptabilité du site.
Point clé : L’inspecteur révèle le fonctionnement interne des sites web et guide l’optimisation grâce à ses outils d’analyse intégrés.
À retenir
Les outils de développement des navigateurs permettent d’analyser, déboguer et optimiser les sites web en temps réel avec des métriques objectives.
Exercice pratique
? Instructions
Réalise une carte de profil stylisée en HTML/CSS, avec un avatar rond, un nom, un titre, une description, et des liens/boutons stylisés. Le design doit être moderne, responsive, avec ombre portée, arrondis, couleurs harmonieuses. Utilise des classes explicites.
Code de référence :
<div class="carte">
<div class="carte-photo">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Photo de profil de Sophie Martin">
</div>
<div class="carte-contenu">
<h3 class="carte-nom">Sophie Martin</h3>
<p class="carte-titre">Développeuse Front-end</p>
<p class="carte-description">Passionnée par les technologies web modernes et l'expérience utilisateur. Spécialisée en React et design systems.</p>
<div class="carte-liens">
<a href="#" class="carte-lien carte-lien-primaire">Portfolio</a>
<a href="#" class="carte-lien carte-lien-secondaire">LinkedIn</a>
<a href="#" class="carte-lien carte-lien-secondaire">Contact</a>
</div>
</div>
</div>
.carte {
max-width: 400px;
background: #ffffff;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
padding: 32px;
text-align: center;
margin: 20px auto;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.carte-photo {
margin-bottom: 24px;
}
.carte-photo img {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
border: 4px solid #f8f9fa;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.carte-nom {
font-size: 28px;
font-weight: 700;
color: #2d3748;
margin: 0 0 8px 0;
}
.carte-titre {
font-size: 16px;
color: #667eea;
font-weight: 500;
margin: 0 0 16px 0;
}
.carte-description {
font-size: 15px;
color: #4a5568;
line-height: 1.6;
margin: 0 0 24px 0;
}
.carte-liens {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.carte-lien {
text-decoration: none;
font-weight: 500;
font-size: 14px;
padding: 10px 20px;
border-radius: 8px;
transition: all 0.2s ease;
border: none;
cursor: pointer;
}
.carte-lien-primaire {
background: #667eea;
color: white;
}
.carte-lien-primaire:hover {
background: #5a67d8;
transform: translateY(-1px);
}
.carte-lien-secondaire {
background: #f7fafc;
color: #4a5568;
border: 1px solid #e2e8f0;
}
.carte-lien-secondaire:hover {
background: #edf2f7;
border-color: #cbd5e0;
transform: translateY(-1px);
}
@media (max-width: 480px) {
.carte {
margin: 20px;
padding: 24px;
}
.carte-liens {
flex-direction: column;
}
}
Monaco Editor v0.45
Récapitulatif
Points essentiels à retenir
- Architecture web : Le web fonctionne selon un modèle client-serveur avec le DNS comme système d’adressage universel
- Séparation des technologies : HTML structure, CSS stylise, JavaScript ajoute l’interactivité selon le principe de séparation des préoccupations
- HTML sémantique : Les balises HTML5 sémantiques donnent du sens au contenu et améliorent l’accessibilité et le SEO
- Accessibilité : Les standards WCAG et attributs ARIA garantissent l’utilisabilité par tous, avec navigation clavier et lecteurs d’écran
- Outils de développement : L’inspecteur de navigateur permet d’analyser, déboguer et optimiser les performances en temps réel
Validez vos connaissances
Testez votre compréhension avec ce quiz de 10 questions :
