1.1 Qu'est-ce que HTML ?
Définition : HTML (HyperText Markup Language) est un langage de balisage (markup
language) utilisé pour structurer le contenu d'une page Web. Il ne s'agit pas d'un langage
de programmation.
Fonction : Déterminer la signification structurelle et sémantique du contenu (ceci est un
titre, ceci est un paragraphe, ceci est un lien, etc.).
Rôle Complémentaire : HTML est le squelette ; CSS gère l'apparence ; JavaScript gère
l'interactivité.
1.2 Histoire et Origines
Tim Berners-Lee (1989) : Le concept d'Hypertexte (liens) au CERN pour l'échange de
documents.
HTML 1.0 (1991) : Les bases de la syntaxe.
Le Web 2.0 et le XHTML : Tentative de rendre HTML plus strict en suivant les règles
de XML.
L'Émergence de l'HTML5 : Développement collaboratif (WHATWG) et l'abandon du
XHTML au profit d'une approche plus pragmatique et orientée vers les applications.
1.3 Les Standards et la Gouvernance
W3C (World Wide Web Consortium) : L'organisation principale qui élabore les
spécifications HTML.
Interopérabilité : L'importance pour les navigateurs (Chrome, Firefox, Safari) de
respecter les mêmes standards pour garantir l'affichage uniforme du contenu.
Page 2 : Anatomie d'un Document HTML
2.1 La Structure Minimale
Déclaration du Doctype : <!DOCTYPE html> (indique au navigateur la version HTML).
L'Élément Racine : <html lang="fr"> (le conteneur principal).
La Tête (<head>) : Informations pour le navigateur (métadonnées) et liens vers les
ressources externes.
Le Corps (<body>) : Le contenu visible par l'utilisateur.
2.2 La Balise (Tag) et l'Élément
Balise d'Ouverture et de Fermeture : <p> (balise ouvrante) et </p> (balise fermante).
Éléments Vides (Self-Closing) : Balises ne contenant pas de contenu (ex: <br>, <hr>,
<img>).
Les Attributs : Ajoutent des informations supplémentaires à l'élément (ex: <a
href="url">Lien</a>).
2.3 Le Rôle de la <head>
Métadonnées : Définition du jeu de caractères (<meta charset="UTF-8">).
Viewport : <meta name="viewport"> (essentiel pour la conception Web adaptative -
Responsive Design).
Titres : <title> (affiché dans l'onglet du navigateur).
Liens : <link> (CSS) et <script> (JavaScript).
Page 3 : Les Balises de Contenu Textuel
3.1 Les Titres et Hiérarchie
Utilisation des balises de titre de <h1> à <h6>.
Règle Sémantique : Il ne doit y avoir qu'un seul <h1> par page, représentant le titre
principal. L'utilisation des titres doit suivre une hiérarchie logique.
3.2 Les Blocs de Texte
Paragraphes : <p> (l'élément de base pour le texte).
Sauts de Ligne : <br> (simple saut de ligne) et <hr> (ligne horizontale/séparateur
thématique).
Blocs de Citation : <blockquote> (citations longues) et <q> (citations courtes en ligne).
3.3 Mise en Forme en Ligne (Inline)
Emphase : <em> (emphase, souvent en italique) et <strong> (importance, souvent en
gras).
Termes : <abbr> (abréviation), <cite> (titre d'une œuvre).
Code : <code> (pour le code en ligne) et <pre> (pour le texte préformaté, souvent utilisé
pour les blocs de code).
Page 4 : Liens et Navigation (Hypertexte)
4.1 La Balise d'Ancrage (<a>)
Rôle : Créer des liens hypertexte. L'essence même du Web.
L'Attribut href : Spécifie l'URL de destination.
Liens Absolus vs. Relatifs : Différence entre href="[Link] et
href="/[Link]".
4.2 Cibles des Liens
target="_blank" : Ouvrir le lien dans un nouvel onglet ou une nouvelle fenêtre (à
utiliser avec précaution).
Liens Mailto : href="[Link]
Ancres Internes : Liens vers des sections spécifiques de la même page (utilisation de
href="#sectionID").
4.3 Navigation et Accessibilité
Navigation Sémantique : Utilisation de l'élément <nav> pour regrouper les liens de
navigation principaux.
Accessibilité : L'importance d'un texte de lien descriptif et non générique (éviter
"Cliquez ici").
Page 5 : Images, Médias et Contenu Externe
5.1 Les Images (<img>)
Attributs Essentiels :
o src : Chemin vers le fichier image.
o alt : Texte alternatif obligatoire pour l'accessibilité (lu par les lecteurs d'écran) et
affiché si l'image ne charge pas.
Images Responsives : L'utilisation de l'élément <picture> et de l'attribut srcset pour
charger différentes versions de l'image en fonction de la taille de l'écran.
5.2 L'Intégration de Médias (HTML5)
Audio : <audio> (lecture de fichiers sonores, avec contrôle par l'utilisateur).
Vidéo : <video> (lecture de fichiers vidéo, supportant différents codecs).
Contrôles : L'attribut controls pour afficher les boutons de lecture, pause et volume.
5.3 Contenu Intégré
Iframes : <iframe> pour intégrer des pages Web ou des contenus tiers (ex: cartes
Google Maps, vidéos YouTube). Considérations de sécurité.
Page 6 : Les Listes et les Tableaux
6.1 Les Listes Non Ordonnées (<ul>)
Utilisées pour les collections d'éléments dont l'ordre n'est pas important (ex: menus de
navigation).
Composées d'éléments de liste <li>.
6.2 Les Listes Ordonnées (<ol>)
Utilisées lorsque l'ordre des éléments est significatif (ex: étapes d'une recette,
classement).
Possibilité de changer le style de numérotation via CSS ou l'attribut type.
6.3 Les Tableaux (<table>)
Rôle Sémantique : Utilisation uniquement pour afficher des données tabulaires (ne
jamais utiliser des tableaux pour la mise en page, c'est obsolète et non accessible).
Structure : <thead> (en-tête), <tbody> (corps), <tfoot> (pied de tableau).
En-têtes de Colonne : <th> (importance cruciale pour l'accessibilité).
Page 7 : Les Formulaires et l'Interaction Utilisateur
7.1 L'Élément Formulaire (<form>)
Rôle : Conteneur pour les contrôles d'entrée utilisateur.
Attributs Clés :
o action : L'URL vers laquelle les données seront envoyées (le backend).
o method : La méthode HTTP utilisée (GET ou POST).
7.2 Les Champs de Saisie (<input>)
Types : text, password, email, number, date, checkbox, radio, submit.
Les Attributs d'Amélioration : placeholder, required (validation HTML5),
maxlength.
7.3 Autres Contrôles
Zones de Texte : <textarea> (pour les entrées multi-lignes).
Sélection : <select> avec les options <option>.
Étiquettes : <label> (importance pour l'accessibilité, lier une étiquette à un champ de
saisie).
Page 8 : Sémantique HTML5 et Accessibilité (ARIA)
8.1 Les Nouveaux Éléments Sémantiques
Rôle : Rendre la structure de la page compréhensible non seulement par l'œil humain,
mais aussi par les machines (moteurs de recherche, lecteurs d'écran).
Exemples : <header>, <footer>, <article>, <section>, <aside>, <figure>.
Avantage SEO : Aide les moteurs de recherche à comprendre la hiérarchie et la
pertinence du contenu.
8.2 Le Rôle et les Avantages de la Sémantique
Le concept de "Document Outline" (Plan du Document) basé sur les éléments
sémantiques et les niveaux de titres.
8.3 Accessibilité (ARIA)
Définition : ARIA (Accessible Rich Internet Applications) est un ensemble d'attributs
HTML permettant de rendre les applications Web dynamiques plus accessibles aux
personnes handicapées.
Exemples : Utilisation des attributs role et des propriétés aria-label, aria-expanded.
Conformité : L'importance des normes WCAG (Web Content Accessibility Guidelines).
Page 9 : Relation avec CSS et JavaScript
9.1 HTML et CSS
Séparation des Préoccupations : HTML pour la structure, CSS pour la présentation.
Liaison : L'élément <link> dans la <head> ou l'attribut style (à éviter pour la mise en
forme globale).
Les Sélecteurs : Utilisation des attributs id (identifiant unique) et class (classe
réutilisable) comme points d'ancrage pour le style CSS.
9.2 HTML et JavaScript
Interaction : JavaScript manipule le HTML via le DOM (Document Object Model).
Le DOM : Représentation arborescente de la structure HTML, permettant à JavaScript
d'accéder, de modifier ou de créer des éléments.
L'Élément <script> : Insertion de code JS ou liaison à un fichier JS externe. Les
attributs defer et async pour optimiser le temps de chargement.
9.3 Développement Front-end Moderne
L'utilisation de HTML par les frameworks comme React, Vue, et Angular (souvent
masqué derrière des composants et des templates).
Page 10 : Défis, Tendances Futures et Conclusion
10.1 Défis de Performance
Optimisation : La minimisation du code HTML (suppression des espaces et
commentaires inutiles) pour améliorer le temps de chargement.
Lazy Loading : L'attribut loading="lazy" sur les images et iframes pour ne les charger
que lorsqu'elles sont visibles par l'utilisateur.
10.2 Les Web Components
Concept : Un ensemble de technologies Web qui permettent de créer des balises HTML
réutilisables, personnalisées et encapsulées (Shadow DOM).
Objectif : Standardiser la réutilisation de composants sans dépendre de frameworks
JavaScript propriétaires.
10.3 Conclusion
HTML reste le pilier indéfectible du Web. Son évolution vers HTML5 a non seulement
ajouté des fonctionnalités multimédias et de formulaires riches, mais a surtout renforcé
l'importance cruciale de la sémantique.
Un HTML bien structuré et accessible est la base d'un Web universel, rapide et durable.