Name: HTML5 : Les Fondations du Web Moderne
Author: Preparetoi.academy

1. Qu'est-ce que HTML5 et pourquoi c'est important

HTML5 est le langage de balisage qui permet de créer la structure d'une page web. Pense à HTML5 comme à l'architecture d'une maison : les balises sont comme les murs, les portes et les fenêtres qui organisent l'espace. Sans HTML5, le navigateur web ne saurait pas comment afficher le contenu.

Définition précise : HTML5 est la cinquième version du HyperText Markup Language, un standard développé par le W3C (World Wide Web Consortium). C'est un ensemble de balises qui structurent le contenu textuel, multimédia et interactif sur internet.

Analogie simple : Si une page web était une recette de cuisine, HTML5 serait la liste des ingrédients et leurs proportions. HTML5 dit "ceci est un titre", "ceci est un paragraphe", "ceci est une image". Le navigateur lit ces instructions et les affiche correctement.

Élément	Rôle	Exemple
Balises	Marqueurs de contenu	`<p>texte</p>`
Attributs	Propriétés des balises	`class="important"`
Éléments	Balise + contenu + fermeture	`<div>contenu</div>`
Nœuds	Points de la structure	Chaque balise est un nœud

Astuce pratique : Utilisez l'inspection d'éléments dans votre navigateur (clic droit → Inspecter) pour voir la structure HTML5 de n'importe quel site web. C'est le meilleur moyen d'apprendre en observant des exemples réels.

⚠️ Attention : HTML5 n'est pas un langage de programmation. Il ne peut pas faire de calculs ou de logique. HTML5 structure uniquement ; pour l'interactivité, vous aurez besoin de JavaScript plus tard.

HTML5 est devenu le standard universel en 2014 et remplace complètement les anciennes versions (HTML4, XHTML). Tous les navigateurs modernes le supportent complètement. C'est le point de départ indispensable pour quiconque souhaite créer du contenu web.

2. La structure de base d'une page HTML5

Chaque page HTML5 suit une structure standardisée, comme une lettre officielle qui commence par une en-tête et un destinataire. Cette structure garantit que le navigateur comprend correctement votre contenu et que votre page fonctionne sur tous les appareils.

Définition : La structure HTML5 de base est l'ensemble des balises obligatoires qui encadrent tout contenu web. Elle comprend la déclaration DOCTYPE, les balises html, head et body.

Analogie : Imaginez une feuille de papier officielle. Le <!DOCTYPE html> est comme le tampon en haut qui dit "c'est un document officiel". La balise <html> est la feuille entière, <head> est l'en-tête avec les informations invisibles au lecteur, et <body> est le contenu que le lecteur voit.

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Titre de la page</title>
  </head>
  <body>
    <h1>Contenu visible ici</h1>
  </body>
</html>

Balise	Localisation	Rôle	Contenu visible
`<!DOCTYPE html>`	Première ligne	Déclare la version	Non
`<html>`	Racine	Enveloppe tout	Non
`<head>`	Haut du document	Métadonnées et config	Non
`<body>`	Bas du document	Contenu principal	Oui
`<title>`	Dans head	Titre du navigateur	Onglet du navigateur
`<meta>`	Dans head	Informations du document	Non

Astuce pratique : Créez un fichier modèle (template) avec la structure de base. Chaque nouvelle page HTML5 devrait commencer par copier cette structure. Cela vous gagnera du temps et évitera les erreurs courantes.

⚠️ Attention : L'attribut lang="fr" dans <html lang="fr"> est crucial pour l'accessibilité. Les lecteurs d'écran utilisent cette information pour prononcer correctement le texte. Ne l'omettez jamais.

La <meta charset="UTF-8"> définit l'encodage des caractères. UTF-8 supporte tous les caractères du monde (français, arabe, chinois, emojis, etc.). C'est le seul encodage à utiliser en 2024.

3. Les balises sémantiques : donner du sens au contenu

Les balises sémantiques sont les balises HTML5 qui donnent un véritable sens au contenu, pas simplement une mise en forme. Elles expliquent pourquoi une partie du contenu existe, pas juste comment l'afficher.

Définition précise : Une balise sémantique est une balise HTML5 dont le nom décrit clairement le type de contenu qu'elle contient (header, article, nav, aside, footer, section, main). Ces balises améliorent l'accessibilité, le référencement et la maintenance du code.

Analogie puissante : Comparez deux approches. Avec des balises non-sémantiques : "C'est une boîte rose avec du texte dedans" (pas clair). Avec des balises sémantiques : "C'est un article publié le 15 mars" (sens clair). Les balises sémantiques parlent au navigateur, aux lecteurs d'écran et aux moteurs de recherche.

Balise	Signification	Cas d'usage	Position typique
`<header>`	En-tête principal	Logo, navigation, titre	Haut de la page
`<nav>`	Barre de navigation	Menus, liens importants	Généralement après header
`<main>`	Contenu principal	Contenu unique de la page	Centre de la page
`<article>`	Article complet	Blog post, news	Dans main ou section
`<section>`	Thème groupé	Grouper du contenu lié	Partout où pertinent
`<aside>`	Contenu secondaire	Barre latérale, annonces	Côté de main
`<footer>`	Pied de page	Copyright, contact, liens	Bas de la page

Astuce décisive : Demandez-vous : "Si j'enlève le CSS (coloration, taille, position), est-ce que la balise a toujours du sens ?" Si oui, c'est sémantique. Si non, c'est probablement un <div> générique.

⚠️ Attention critique : Ne confondez pas <section> et <div>. Une <section> doit toujours contenir du contenu thématiquement lié. Utilisez <div> uniquement pour le layout (mise en page) sans lien sémantique.

Les balises sémantiques HTML5 améliorent considérablement l'accessibilité. Les utilisateurs de lecteurs d'écran peuvent naviguer plus facilement. Les moteurs de recherche comprennent mieux votre contenu, ce qui améliore votre référencement SEO. Votre code devient aussi plus facile à maintenir et à comprendre pour les autres développeurs.

4. Les balises de contenu : texte, liens et images

Les balises de contenu sont les balises HTML5 qui transportent l'information réelle : texte, images, vidéos, liens. Ce sont les briques fondamentales que vous utiliserez quotidiennement pour créer vos pages.

Définition : Les balises de contenu sont les éléments HTML5 qui encapsulent les données destinées à être vues ou interagies par l'utilisateur : titres, paragraphes, listes, images, vidéos, liens hypertexte, formulaires.

Analogie claire : Si HTML5 était une construction de maison, les balises de contenu seraient le mobilier et la décoration (meubles, tableaux, objets). Les balises sémantiques sont la structure (murs, étages), les balises de contenu sont ce qui remplit cet espace.

<!-- Titres (du plus important au moins important) -->
<h1>Titre principal - un seul par page</h1>
<h2>Sous-titre de section</h2>
<h3>Sous-titre de sous-section</h3>

<!-- Paragraphes et listes -->
<p>Un paragraphe de texte normal.</p>
<ul>
  <li>Élément de liste non-ordonnée</li>
</ul>
<ol>
  <li>Élément de liste ordonnée</li>
</ol>

<!-- Images et liens -->
<img src="photo.jpg" alt="Description de l'image">
<a href="https://exemple.com">Texte du lien</a>

<!-- Mise en forme -->
<strong>Texte important (sémantique)</strong>
<em>Texte accentué (sémantique)</em>

Balise	Usage	Exemple	Notes
`<h1>` à `<h6>`	Titres hiérarchiques	`<h1>Titre</h1>`	Un seul H1 par page
`<p>`	Paragraphe de texte	`<p>Texte...</p>`	Les plus courants
`<a>`	Lien hypertexte	`<a href="url">Lien</a>`	Nécessite `href`
`<img>`	Image	`<img src="url" alt="">`	Toujours un `alt`
`<ul>` / `<li>`	Liste non-ordonnée	`<ul><li>Item</li></ul>`	Points à puces
`<ol>` / `<li>`	Liste ordonnée	`<ol><li>Item</li></ol>`	Numérotée
`<strong>`	Texte important	`<strong>Important</strong>`	Sémantique (pas `<b>`)
`<em>`	Texte accentué	`<em>Accentué</em>`	Sémantique (pas `<i>`)

Astuce essentielle : L'attribut alt des images est obligatoire pour l'accessibilité. Il décrit l'image pour les utilisateurs malvoyants et les moteurs de recherche. Écrivez des descriptions courtes mais précises : "Photo de chat roux assis" plutôt que "image" ou "photo".

⚠️ Attention importante : Ne confondez pas <strong> et <b>, ou <em> et <i>. <strong> et <em> ont un sens sémantique (important, accentué), tandis que <b> et <i> ne font que changer l'affichage. Préférez toujours les versions sémantiques.

Les titres doivent suivre une hiérarchie logique (H1, puis H2, puis H3, jamais H1 puis H3). Les liens doivent avoir un texte clair (pas "cliquez ici" mais "Lire l'article complet"). Ces bonnes pratiques améliorent l'expérience utilisateur et l'accessibilité pour tous.

5. Les formulaires : capturer l'interactivité

Les formulaires HTML5 permettent aux utilisateurs d'envoyer des informations à votre site web. Ils sont l'intermédiaire entre le contenu passif et l'interaction active avec vos visiteurs.

Définition précise : Un formulaire HTML5 est un ensemble d'éléments d'entrée (input, textarea, select, etc.) qui permet aux utilisateurs de saisir et d'envoyer des données au serveur web. C'est le principal moyen d'interaction bidirectionnelle sur le web.

Analogie concrète : Un formulaire HTML5 est comme un questionnaire papier. Les balises <input> sont comme les cases à remplir, les labels sont comme les questions, et le <button type="submit"> est l'enveloppe que vous envoyez. Le serveur reçoit les réponses.

<form action="/traiter-form" method="POST">
  <!-- Champ texte -->
  <label for="nom">Votre nom :</label>
  <input type="text" id="nom" name="nom" required>
  
  <!-- Email avec validation automatique -->
  <label for="email">Email :</label>
  <input type="email" id="email" name="email" required>
  
  <!-- Mot de passe -->
  <label for="mdp">Mot de passe :</label>
  <input type="password" id="mdp" name="mdp">
  
  <!-- Menu déroulant -->
  <label for="pays">Pays :</label>
  <select id="pays" name="pays">
    <option>-- Sélectionner --</option>
    <option value="fr">France</option>
    <option value="be">Belgique</option>
  </select>
  
  <!-- Zone de texte multiligne -->
  <label for="message">Message :</label>
  <textarea id="message" name="message"></textarea>
  
  <!-- Bouton d'envoi -->
  <button type="submit">Envoyer</button>
</form>

Balise/Attribut	Type	Fonction	Exemple
`<form>`	Conteneur	Encadre le formulaire	`<form action="/url">`
`<input type="text">`	Texte simple	Saisie d'une ligne	Nom, prénom
`<input type="email">`	Email	Validation email auto	Adresse email
`<input type="password">`	Mot de passe	Caractères masqués	Authentification
`<input type="number">`	Nombre	Seulement chiffres	Âge, quantité
`<input type="checkbox">`	Case à cocher	Choix multiples possibles	Conditions d'acceptation
`<input type="radio">`	Bouton radio	Un choix uniquement	Genre, choix unique
`<textarea>`	Texte multiligne	Texte long	Commentaires, messages
`<select>`	Liste déroulante	Menu d'options	Pays, catégories
`<label>`	Étiquette	Texte associé aux champs	Description du champ

Astuce pratique : Utilisez toujours <label> associé à <input> via l'attribut for. Cela rend le formulaire accessible (lecteurs d'écran) et plus facile à utiliser (cliquer sur le label focus le champ).

⚠️ Attention critique : L'attribut required sur un <input> effectue une validation côté client (dans le navigateur), mais ce n'est pas suffisant pour la sécurité. Vous devez aussi valider les données côté serveur. Ne faites jamais confiance aux données du client.

HTML5 apporte de nombreux types d'input modernes : type="date", type="time", type="color", type="range", qui offrent une meilleure expérience utilisateur avec des widgets natifs. L'attribut name est obligatoire car il définit le nom du paramètre envoyé au serveur. method="POST" envoie les données de manière sécurisée, tandis que GET les place dans l'URL (déconseillé pour données sensibles).

6. Les attributs HTML5 : les détails qui changent tout

Les attributs sont les propriétés supplémentaires que vous pouvez ajouter à chaque balise pour modifier son comportement, son apparence ou ses fonctionnalités. Ils transforment une balise générique en une balise spécifique et utile.

Définition : Les attributs HTML5 sont des propriétés ajoutées à l'intérieur de la balise d'ouverture qui fournissent des informations supplémentaires ou modifient le comportement de l'élément. Ils suivent le format nom="valeur".

Analogie claire : Une balise sans attributs est comme une voiture sans options. Une balise avec attributs est une voiture avec options (climatisation, toit ouvrant, intérieur cuir). Les attributs personnalisent et améliorent la fonction de base.

<!-- Attributs universels -->
<div id="section-principale" class="container">Contenu</div>
<p data-id="123">Paragraphe avec donnée custom</p>

<!-- Attributs spécifiques aux images -->
<img src="photo.jpg" alt="Photo descriptive" 
     width="300" height="200" loading="lazy">

<!-- Attributs pour les liens -->
<a href="https://exemple.com" title="Voir le site" 
   target="_blank" rel="noopener noreferrer">Lien</a>

<!-- Attributs pour les inputs -->
<input type="email" placeholder="votre@email.com" 
       maxlength="100" required>

<!-- Attributs data- (données personnalisées) -->
<button data-action="supprimer" data-id="42">Supprimer</button>

Attribut	Balises	Utilité	Exemple
`id`	Toutes	Identifiant unique	`id="entete"`
`class`	Toutes	Catégorie de style	`class="actif"`
`style`	Toutes	CSS en ligne	`style="color:red"`
`title`	Toutes	Infobulle au survol	`title="Aide"`
`data-*`	Toutes	Données personnalisées	`data-prix="19.99"`
`href`	`<a>`	Adresse du lien	`href="/page"`
`src`	`<img>`, `<script>`	Source du fichier	`src="image.jpg"`
`alt`	`<img>`	Texte alternatif	`alt="Logo"`
`placeholder`	`<input>`	Texte d'indication	`placeholder="Nom"`
`disabled`	`<input>`, `<button>`	Désactiver l'élément	`disabled`
`readonly`	`<input>`	Non-modifiable	`readonly`
`required`	`<input>`	Obligatoire	`required`
`target`	`<a>`	Ouvrir dans nouvel onglet	`target="_blank"`

Astuce de pro : Utilisez data-* pour stocker des informations liées à votre logique JavaScript sans polluer le HTML. Exemple : <div data-user-id="123" data-role="admin">. JavaScript peut accéder à ces données via element.dataset.userId.

⚠️ Attention importante : Quand vous ouvrez un lien avec target="_blank", ajoutez toujours rel="noopener noreferrer" pour des raisons de sécurité. Cela empêche la page destination d'accéder à votre objet window et d'exploiter votre site.

Les attributs width et height sur les images doivent correspondre exactement aux dimensions réelles ou utiliser le CSS. L'attribut loading="lazy" améliore les performances en chargeant les images uniquement quand l'utilisateur les voit. L'attribut placeholder aide les utilisateurs à comprendre ce qu'ils doivent saisir dans un champ. Maîtriser les attributs fait la différence entre du HTML5 basique et du HTML5 professionnel et sécurisé.

HTML5 : Les Fondations du Web Moderne