Partie 2 : HTML5 (Structure) - Version détaillée
2.1 Bases du HTML
Qu'est-ce que le HTML ?
HTML = HyperText Markup Language (Langage de balisage hypertexte)
Ce n'est pas un langage de programmation, mais un langage de balisage : on entoure le
contenu de balises pour lui donner du sens et de la structure.
Une balise ressemble à ceci : <nomBalise>Contenu</nomBalise>
a) Structure minimale d'une page HTML5
Décortiquons chaque ligne d'une page HTML minimale :
```html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titre de la page</title>
</head>
<body>
<!-- Le contenu visible de la page -->
</body>
</html>
```
Ligne par ligne :
Ligne Code Rôle
1 <!DOCTYPE html> Indique au navigateur : "C'est du HTML5". Sans ça, le navigateur pourrait
utiliser un mode dégradé.
2 <html lang="fr"> Balise racine qui contient TOUTE la page. L'attribut lang="fr" dit : "le
contenu est en français" (utile pour les lecteurs d'écran et le référencement).
3 <head> En-tête de la page. Ce qui est DEDANS ne s'affiche PAS à l'écran. C'est des
métadonnées.
4 <meta charset="UTF-8"> Définit l'encodage des caractères. UTF-8 permet d'afficher tous
les caractères : accents, ç, €, caractères chinois, émojis 😀.
5 <meta name="viewport" ...> Indique au navigateur mobile d'adapter la largeur d'affichage
à l'écran. Essentiel pour le responsive.
6 <title>...</title> Titre qui apparaît dans l'onglet du navigateur. Aussi utilisé par les moteurs
de recherche.
7 </head> Fermeture de l'en-tête.
8 <body> Corps de la page. TOUT ce qui s'affiche à l'écran doit être DEDANS.
9 <!-- ... --> Commentaire (invisible à l'écran). Utile pour se souvenir de ce qu'on a fait.
10 </body> Fermeture du corps.
11 </html> Fermeture de la balise racine.
À savoir :
· Les balises s'ouvrent (<html>) et se ferment (</html>)
· Certaines balises sont auto-fermantes : <meta>, <img>, <br>, <hr>
· L'indentation (les espaces en début de ligne) n'est pas obligatoire mais elle rend le code
lisible
b) Les balises sémantiques HTML5
"Sémantique" = qui a du sens. Avant HTML5, on utilisait <div> pour tout. Maintenant, on a
des balises qui décrivent leur rôle.
Tableau des balises sémantiques :
Balise Signification Exemple d'usage
<header> En-tête Logo, titre du site, menu principal
<nav> Navigation Liens entre les pages du site
<main> Contenu principal Le coeur de la page (un seul par page)
<section> Section Groupe thématique (ex: "Nos services")
<article> Article Contenu autonome (blog post, produit)
<aside> Complément Sidebar, publicités, notes de bas de page
<footer> Pied de page Mentions légales, copyright, contacts
<figure> Figure Illustration légendée (image+texte)
<figcaption> Légende Texte qui accompagne une figure
Exemple visuel de structure de page :
```
┌─────────────────────────────────────┐
│ <header> │
│ ┌─────────────────────────────┐ │
│ │ <nav> │ │
│ │ Accueil | Produits | Contact│ │
│ └─────────────────────────────┘ │
├─────────────────────────────────────┤
│ <main> │
│ ┌─────────────────────────────┐ │
│ │ <section> │ │
│ │ Contenu principal 1 │ │
│ └─────────────────────────────┘ │
│ ┌─────────────────────────────┐ │
│ │ <section> │ │
│ │ Contenu principal 2 │ │
│ └─────────────────────────────┘ │
│ ┌─────────────┐ ┌─────────────┐ │
│ │ <article> │ │ <aside> │ │
│ │ Article │ │ Sidebar │ │
│ └─────────────┘ └─────────────┘ │
├─────────────────────────────────────┤
│ <footer> │
└─────────────────────────────────────┘
```
Exemple codé complet :
```html
<body>
<!-- EN-TÊTE -->
<header>
<h1>MonSuperSite</h1>
<p>Le meilleur site du monde</p>
<!-- MENU DE NAVIGATION -->
<nav>
<ul>
<li><a href="[Link]">Accueil</a></li>
<li><a href="[Link]">Blog</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>
</header>
<!-- CONTENU PRINCIPAL -->
<main>
<!-- SECTION 1 : PRÉSENTATION -->
<section>
<h2>Qui sommes-nous ?</h2>
<p>Nous sommes une équipe passionnée de développeurs web.</p>
</section>
<!-- SECTION 2 : ARTICLES -->
<section>
<h2>Derniers articles</h2>
<article>
<h3>Apprendre HTML5</h3>
<p>Le HTML5 est essentiel pour tout développeur web...</p>
<a href="[Link]">Lire la suite</a>
</article>
<article>
<h3>Les bases du CSS</h3>
<p>Le CSS permet de mettre en forme vos pages...</p>
<a href="[Link]">Lire la suite</a>
</article>
</section>
<!-- FIGURE AVEC LÉGENDE -->
<figure>
<img src="[Link]" alt="Un bureau avec ordinateur">
<figcaption>Notre équipe au travail</figcaption>
</figure>
</main>
<!-- SIDEBAR (à côté du contenu principal) -->
<aside>
<h3>En ce moment</h3>
<p>Promotion exceptionnelle sur nos formations !</p>
</aside>
<!-- PIED DE PAGE -->
<footer>
<p>© 2025 MonSuperSite - Tous droits réservés</p>
<p><a href="[Link]">Mentions légales</a></p>
</footer>
</body>
```
c) Les balises de contenu courantes (détail)
Les titres <h1> à <h6>
```html
<h1>Titre principal</h1> <!-- 1 seul par page (le plus important) -->
<h2>Sous-titre</h2> <!-- Plusieurs possibles -->
<h3>Titre de niveau 3</h3> <!-- Hiérarchie logique -->
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6> <!-- Le moins important -->
```
Règles importantes :
· Il ne doit y avoir qu'UN SEUL <h1> par page
· On saute pas de niveaux : après <h1>, on met <h2>, pas <h3>
· Les moteurs de recherche accordent beaucoup d'importance aux titres
Les paragraphes <p> et le texte
```html
<p>Ceci est un paragraphe. Le texte va automatiquement à la ligne
quand il atteint le bord de l'écran. Les espaces multiples
et les retours à la ligne dans le code sont ignorés par le
navigateur.</p>
```
Mise en forme du texte :
```html
<p>
Voici un texte avec <strong>du texte important (gras)</strong>
et <em>du texte accentué (italique)</em>.
On peut aussi faire <mark>du texte surligné</mark>.
Pour un <small>texte plus petit</small> (mentions légales).
Et <u>souligner</u> (rarement utilisé).
</p>
<!-- Attention : <b> et <i> existent mais sont NON sémantiques -->
<!-- Préférez <strong> et <em> pour le sens -->
```
Sauts de ligne et séparateurs :
```html
<p>
Première ligne.<br> <!-- <br> = retour à la ligne forcé -->
Deuxième ligne.
</p>
<hr> <!-- <hr> = ligne horizontale (séparation thématique) -->
<p>Texte après la ligne horizontale.</p>
```
Les listes
Liste non ordonnée (<ul>) : puces (points)
```html
<ul>
<li>Pommes</li>
<li>Poires</li>
<li>Bananes</li>
</ul>
```
Résultat visuel :
· Pommes
· Poires
· Bananes
Liste ordonnée (<ol>) : numérotation
```html
<ol>
<li>Préchauffer le four</li>
<li>Mélanger les ingrédients</li>
<li>Cuire 30 minutes</li>
</ol>
```
Résultat visuel :
1. Préchauffer le four
2. Mélanger les ingrédients
3. Cuire 30 minutes
Liste de définition (<dl>, <dt>, <dd>) : terme + définition
```html
<dl>
<dt>HTML</dt>
<dd>Langage de balisage pour créer des pages web</dd>
<dt>CSS</dt>
<dd>Langage pour mettre en forme les pages web</dd>
</dl>
```
Listes imbriquées (liste dans une liste) :
```html
<ul>
<li>Fruits
<ul>
<li>Pomme</li>
<li>Poire</li>
</ul>
</li>
<li>Légumes
<ul>
<li>Carotte</li>
<li>Tomate</li>
</ul>
</li>
</ul>
```
Les liens <a>
La balise <a> (ancre) permet de naviguer.
Syntaxe de base :
```html
<a href="destination">Texte cliquable</a>
```
Les différents types de liens :
```html
<!-- Lien vers un autre site (externe) -->
<a href="[Link] sur Google</a>
<!-- Important : https:// obligatoire pour les liens externes -->
<!-- Lien vers une page du même site (interne) -->
<a href="[Link]">Nous contacter</a>
<a href="pages/[Link]">À propos</a>
<!-- Lien vers un dossier parent -->
<a href="../[Link]">Retour à l'accueil</a>
<!-- ../ = remonter d'un dossier -->
<!-- Lien vers une ancre (même page) -->
<h2 id="section1">Section 1</h2>
<a href="#section1">Aller à la section 1</a>
<!-- Lien vers une ancre (autre page) -->
<a href="[Link]#section2">Aller à la section 2 de [Link]</a>
<!-- Lien pour envoyer un email -->
<a href="[Link] un email</a>
<!-- Lien pour appeler (mobile) -->
<a href="[Link] appeler</a>
<!-- Ouvrir dans un nouvel onglet -->
<a href="[Link] target="_blank">Nouvel onglet</a>
<!-- target="_blank" ouvre un nouvel onglet -->
```
Attributs importants du lien :
Attribut Rôle Exemple
href Destination (obligatoire) href="[Link]"
target Où ouvrir le lien target="_blank" (nouvel onglet)
title Info bulle au survol title="En savoir plus"
rel Relation avec la page cible rel="noopener noreferrer" (sécurité)
Sécurité avec target="_blank" :
```html
<!-- Bonne pratique : ajouter rel="noopener noreferrer" -->
<a href="[Link] target="_blank" rel="noopener noreferrer">
Lien sécurisé
</a>
```
Les images <img>
La balise <img> est auto-fermante (pas de balise fermante).
Syntaxe :
```html
<img src="chemin/[Link]" alt="Description">
```
Attributs obligatoires et optionnels :
```html
<!-- Minimum requis (src + alt) -->
<img src="[Link]" alt="Description de la photo">
<!-- Avec dimensions explicites -->
<img src="[Link]" alt="Paysage" width="300" height="200">
<!-- Avec titre (info bulle) -->
<img src="[Link]" alt="Logo" title="Cliquez pour agrandir">
<!-- Formats supportés -->
<img src="[Link]"> <!-- JPG : photos, bonne compression -->
<img src="[Link]"> <!-- PNG : transparence, logos -->
<img src="[Link]"> <!-- GIF : animations -->
<img src="[Link]"> <!-- SVG : vectoriel, logo, icônes -->
<img src="[Link]"> <!-- WebP : moderne, léger -->
```
L'importance de alt :
· Accessibilité : lu par les lecteurs d'écran pour les malvoyants
· SEO : les moteurs de recherche l'utilisent pour comprendre l'image
· Affiché si l'image ne charge pas
```html
<!-- Bon alt : descriptif -->
<img src="[Link]" alt="Un chaton roux jouant avec une pelote">
<!-- Mauvais alt : inutile -->
<img src="[Link]" alt="image">
<!-- Image décorative : alt vide -->
<img src="[Link]" alt="">
```
Image cliquable (lien + image) :
```html
<a href="[Link]">
<img src="[Link]" alt="Notre nouveau produit">
</a>
```
---
2.2 Les formulaires
À quoi servent les formulaires ?
Les formulaires permettent aux visiteurs d'envoyer des données au serveur : inscription,
connexion, recherche, contact, commentaire, etc.
a) Structure de base
```html
<form action="[Link]" method="POST">
<!-- Tous les champs du formulaire ici -->
<button type="submit">Envoyer</button>
</form>
```
Détail des attributs de <form> :
Attribut Rôle Exemple
action Où envoyer les données action="[Link]"
method Méthode HTTP method="POST" ou method="GET"
name Nom du formulaire name="inscription"
GET vs POST :
GET POST
Les données apparaissent dans l'URL Les données sont cachées (dans le corps de la requête)
?nom=Alice&age=25 Invisible dans l'URL
Limité en taille (env. 2048 caractères) Pas de limite pratique
À utiliser pour la recherche, les filtres À utiliser pour les mots de passe, les longs textes
Peut être mis en favori Ne peut pas être mis en favori
Exemple GET (visible dans l'URL) :
```
[Link]
```
b) Tous les types d'inputs
Le <input> : l'élément polyvalent
<input> est une balise auto-fermante. Son comportement change selon l'attribut type.
Types de base :
```html
<!-- Texte sur une ligne -->
<input type="text" name="prenom" placeholder="Votre prénom">
<!-- Email (validation automatique) -->
<input type="email" name="email" placeholder="exemple@[Link]">
<!-- Téléphone -->
<input type="tel" name="telephone" placeholder="06 12 34 56 78">
<!-- Mot de passe (caractères masqués) -->
<input type="password" name="motdepasse">
<!-- Nombre avec flèches +/- -->
<input type="number" name="age" min="0" max="120" step="1">
<!-- Recherche (avec bouton × pour effacer) -->
<input type="search" name="recherche" placeholder="Rechercher...">
<!-- URL (validation automatique) -->
<input type="url" name="siteweb" placeholder="[Link]
<!-- Date (calendrier natif) -->
<input type="date" name="naissance">
<!-- Heure -->
<input type="time" name="heure">
<!-- Couleur (sélecteur de couleur) -->
<input type="color" name="couleur_fond" value="#ff0000">
<!-- Curseur -->
<input type="range" name="volume" min="0" max="100" value="50">
<!-- Fichier (upload) -->
<input type="file" name="document">
```
Attributs communs à tous les <input> :
Attribut Rôle Exemple
name Nom du champ (envoyé au serveur) name="prenom"
id Identifiant unique (pour <label>) id="prenom"
value Valeur par défaut value="Jean"
placeholder Texte indicatif (disparaît en tapant) placeholder="Votre prénom"
required Champ obligatoire required
disabled Champ désactivé disabled
readonly Lecture seule (mais envoyé) readonly
Le <textarea> : zone de texte multiligne
```html
<textarea name="message" rows="5" cols="30" placeholder="Votre message..."></textarea>
```
Attribut Rôle
rows Nombre de lignes visibles
cols Nombre de colonnes visibles
maxlength Nombre max de caractères
Le <select> : liste déroulante
```html
<select name="pays">
<option value="fr">France</option>
<option value="be">Belgique</option>
<option value="ch">Suisse</option>
<option value="ca">Canada</option>
</select>
```
Avec option présélectionnée :
```html
<select name="couleur">
<option value="rouge">Rouge</option>
<option value="bleu" selected>Bleu</option> <!-- selected = présélectionné -->
<option value="vert">Vert</option>
</select>
```
Avec groupes d'options :
```html
<select name="voiture">
<optgroup label="Françaises">
<option value="peugeot">Peugeot</option>
<option value="renault">Renault</option>
</optgroup>
<optgroup label="Allemandes">
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</optgroup>
</select>
```
Sélection multiple (Ctrl+clic) :
```html
<select name="langues[]" multiple size="4">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="php">PHP</option>
</select>
```
Les cases à cocher (checkbox)
```html
<!-- Une seule case -->
<input type="checkbox" name="newsletter" value="oui" checked> <!-- checked = cochée -->
<label>Je souhaite recevoir la newsletter</label>
<!-- Groupes de cases (plusieurs choix possibles) -->
<input type="checkbox" name="loisirs[]" value="sport" id="sport">
<label for="sport">Sport</label>
<input type="checkbox" name="loisirs[]" value="lecture" id="lecture">
<label for="lecture">Lecture</label>
<input type="checkbox" name="loisirs[]" value="musique" id="musique">
<label for="musique">Musique</label>
```
Les boutons radio (radio) : un seul choix
```html
<p>Sexe :</p>
<input type="radio" name="sexe" value="homme" id="homme">
<label for="homme">Homme</label>
<input type="radio" name="sexe" value="femme" id="femme">
<label for="femme">Femme</label>
<input type="radio" name="sexe" value="autre" id="autre">
<label for="autre">Autre</label>
```
Important : tous les radio du même groupe doivent avoir le MÊME name
Les boutons
```html
<!-- Bouton d'envoi (soumet le formulaire) -->
<button type="submit">Envoyer</button>
<input type="submit" value="Envoyer">
<!-- Bouton de réinitialisation (efface tous les champs) -->
<button type="reset">Effacer</button>
<input type="reset" value="Effacer">
<!-- Bouton générique (sans action par défaut) -->
<button type="button" id="monBouton">Cliquez-moi</button>
<input type="button" value="Cliquez-moi">
```
c) Le <label> : l'accessibilité avant tout
Le <label> relie un texte à un champ. Deux méthodes :
Méthode 1 (recommandée) : for + id
```html
<label for="nom">Nom complet :</label>
<input type="text" id="nom" name="nom">
```
Méthode 2 (label parent) :
```html
<label>
Nom complet :
<input type="text" name="nom">
</label>
```
Avantages du <label> :
· Cliquer sur le texte sélectionne/champ le champ
· Les lecteurs d'écran annoncent correctement le champ
· Améliore le référencement
d) Organisation des formulaires
Regrouper avec <fieldset> et <legend> :
```html
<form>
<fieldset>
<legend>Informations personnelles</legend>
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom">
<label for="email">Email :</label>
<input type="email" id="email" name="email">
</fieldset>
<fieldset>
<legend>Préférences</legend>
<input type="checkbox" name="newsletter" id="news">
<label for="news">Recevoir la newsletter</label>
</fieldset>
<button type="submit">Envoyer</button>
</form>
```
Visuellement, <fieldset> ajoute un cadre autour du groupe.
e) Validation HTML5 (côté client)
Sans JavaScript, HTML5 peut déjà valider les champs :
```html
<!-- Champ obligatoire -->
<input type="text" required>
<!-- Longueur minimale et maximale -->
<input type="text" minlength="3" maxlength="20">
<!-- Valeur minimale et maximale (number, date, range) -->
<input type="number" min="18" max="99">
<!-- Pattern (expression régulière) -->
<input type="text" pattern="[A-Za-z]{3,}" title="Au moins 3 lettres">
<!-- Email et URL natifs -->
<input type="email" required>
<input type="url" required>
```
Exemple de validation complète :
```html
<form>
<!-- Code postal : 5 chiffres -->
<input type="text" pattern="[0-9]{5}"
title="Code postal à 5 chiffres" required>
<!-- Mot de passe : 8 caractères, 1 maj, 1 chiffre -->
<input type="password" pattern="(?=.*[A-Z])(?=.*[0-9]).{8,}"
title="8 caractères, 1 majuscule, 1 chiffre" required>
<!-- Age entre 18 et 120 -->
<input type="number" min="18" max="120" required>
</form>
```
---
2.3 Bonnes pratiques
a) Accessibilité web (WCAG)
Principes de base :
1. Texte alternatif pour les images
```html
<!-- Image informative -->
<img src="[Link]" alt="Graphique des ventes 2024 : +15%">
<!-- Image décorative -->
<img src="[Link]" alt="">
```
1. Structure de titres logique
```html
<h1>Titre principal</h1> <!-- Un seul -->
<h2>Sous-titre niveau 2</h2>
<h3>Détail niveau 3</h3>
<h2>Autre sous-titre</h2>
```
1. Associer labels et champs
```html
<label for="email">Email :</label>
<input type="email" id="email" name="email">
```
1. Navigation au clavier
· Toutes les fonctionnalités doivent être accessibles avec la touche Tab
· Les liens et boutons doivent avoir un :focus visible (style par défaut ou personnalisé)
b) Validation W3C
Pourquoi valider ?
· Éviter les erreurs d'affichage selon les navigateurs
· Améliorer le référencement SEO
· Rendre le code plus maintenable
Comment valider ?
· En ligne : [Link]
· Options : coller du code, uploader un fichier, ou valider par URL
c) Indentation et lisibilité
Mauvais code (difficile à lire) :
```html
<body>
<header>
<h1>Titre</h1>
<nav>
<a href="#">Lien</a>
</nav>
</header>
<main>
<section>
<h2>Section</h2>
<p>Texte</p>
</section>
</main>
</body>
```
Bon code (indenté et lisible) :
```html
<body>
<header>
<h1>Titre</h1>
<nav>
<a href="#">Lien</a>
</nav>
</header>
<main>
<section>
<h2>Section</h2>
<p>Texte</p>
</section>
</main>
</body>
```
Conventions de nommage :
· Fichiers et dossiers : minuscules, sans espaces, tirets
· ✅ [Link], [Link], [Link]
· ❌ Ma [Link], style [Link], photo [Link]
---
Exemple complet : Page "Nous contacter"
Voici une page de contact complète qui intègre tout ce qu'on a vu :
```html
<!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="Contactez-nous pour toute question">
<title>Contact - MonSite</title>
</head>
<body>
<!-- EN-TÊTE -->
<header>
<h1>MonSite</h1>
<nav>
<ul>
<li><a href="[Link]">Accueil</a></li>
<li><a href="[Link]">Services</a></li>
<li><a href="[Link]">Contact</a></li>
</ul>
</nav>
</header>
<!-- CONTENU PRINCIPAL -->
<main>
<section>
<h2>Nous contacter</h2>
<p>Vous avez une question ? Remplissez le formulaire ci-dessous.</p>
</section>
<!-- FORMULAIRE DE CONTACT -->
<form action="[Link]" method="POST">
<!-- Coordonnées -->
<fieldset>
<legend>Vos coordonnées</legend>
<div>
<label for="nom">Nom complet * :</label>
<input type="text" id="nom" name="nom"
minlength="2" maxlength="50" required
placeholder="Jean Dupont">
</div>
<div>
<label for="email">Email * :</label>
<input type="email" id="email" name="email"
required placeholder="jean@[Link]">
</div>
<div>
<label for="telephone">Téléphone :</label>
<input type="tel" id="telephone" name="telephone"
placeholder="06 12 34 56 78">
</div>
</fieldset>
<!-- Demande -->
<fieldset>
<legend>Votre demande</legend>
<div>
<label for="sujet">Sujet * :</label>
<select id="sujet" name="sujet" required>
<option value="">-- Choisissez un sujet --</option>
<option value="info">Demande d'information</option>
<option value="rdv">Prise de rendez-vous</option>
<option value="reclamation">Réclamation</option>
<option value="autre">Autre</option>
</select>
</div>
<div>
<label for="message">Message * :</label>
<textarea id="message" name="message" rows="5"
maxlength="1000" required
placeholder="Votre message..."></textarea>
</div>
</fieldset>
<!-- Options supplémentaires -->
<fieldset>
<legend>Options</legend>
<div>
<input type="checkbox" id="newsletter" name="newsletter" value="oui"
checked>
<label for="newsletter">Je souhaite recevoir la newsletter</label>
</div>
<div>
<input type="checkbox" id="cgu" name="cgu" required>
<label for="cgu">J'accepte les conditions d'utilisation *</label>
</div>
</fieldset>
<!-- Bouton d'envoi -->
<button type="submit">Envoyer le message</button>
<button type="reset">Effacer le formulaire</button>
</form>
<!-- Coordonnées physiques -->
<aside>
<h3>Nos coordonnées</h3>
<address>
123 Rue de l'Exemple<br>
75001 Paris<br>
Tél : <a href="[Link] 23 45 67 89</a><br>
Email : <a href="[Link]
</address>
</aside>
</main>
<!-- PIED DE PAGE -->
<footer>
<p>© 2025 MonSite - Tous droits réservés</p>
<p><small>Dernière mise à jour : janvier 2025</small></p>
</footer>
</body>
</html>