Séance 1 · 2 heures

Comprendre et pratiquer le HTML

Découvrir comment une page web parvient au navigateur, apprendre à reconnaître ses principaux éléments, puis transformer un contenu éditorial brut en document HTML structuré, sémantique et accessible.

Niveau débutant20–25 étudiantsPratique guidéeAucun prérequis
Avant le cours

Vidéo d'introduction

La vidéo est regardée avant l'apport théorique. Elle sert à faire émerger les représentations initiales et le vocabulaire de la séance.

Consigne d'écoute
  • Notez un mot ou une notion que vous connaissez déjà.
  • Notez un élément qui reste obscur ou surprenant.
  • À votre avis, que contient réellement une page web ?
I

Comprendre le fonctionnement d'une page web

1

Du navigateur à la page web

a

Le fonctionnement général du Web

InternetWebHTTPURLressource

Le Web permet d'accéder à des ressources reliées entre elles et disponibles sur Internet. Lorsqu'une personne saisit une URL, son navigateur utilise généralement HTTP ou HTTPS pour demander une ressource : page HTML, image, feuille de style ou script. Internet désigne l'infrastructure qui relie les machines ; le Web est l'un des services qui fonctionne sur cette infrastructure.

À retenir

Internet est le réseau ; le Web est un système de ressources consultables sur ce réseau.

b

Le rôle du serveur et du navigateur

clientserveurrequêteréponseinterprétation

Le navigateur est un client : il demande une ressource à un serveur web. Le serveur reçoit la requête, localise ou fabrique le contenu, puis renvoie une réponse. Le navigateur interprète ensuite les fichiers reçus et construit la page visible. Le serveur fournit donc les données ; le navigateur les transforme en une expérience lisible et interactive.

Analogie

Le client commande un plat, le serveur transmet la demande et la cuisine renvoie une préparation ; le navigateur, lui, dresse ensuite l'assiette à l'écran.

c

Le chargement et l'affichage d'un fichier HTML

téléchargementanalyseDOMrenduressources

Après le téléchargement du HTML, le navigateur en analyse la syntaxe et transforme les éléments en une arborescence appelée DOM. Il récupère ensuite les ressources liées, notamment les images, les styles et les scripts. Il calcule enfin la disposition et produit le rendu visuel. La page affichée est donc le résultat d'une interprétation, pas le fichier HTML lui-même.

<h1>Mon premier titre</h1>
<p>Le navigateur transforme ces éléments en objets visibles.</p>
2

Le rôle du HTML face aux autres langages

a

HTML pour structurer le contenu

structurebalisecontenusémantiquedocument

HTML signifie HyperText Markup Language. Ce langage de balisage décrit la nature et l'organisation du contenu : titre, paragraphe, lien, image, navigation ou article. Il n'est pas un langage de programmation au sens strict, car il n'exprime ni calcul, ni condition, ni algorithme. Son rôle est de construire la structure intelligible du document.

Question à la classe

Dans un article de presse, quels contenus pourriez-vous identifier avant même de penser à leur apparence ?

b

CSS pour définir la présentation

stylecouleurstypographiedispositionresponsive

CSS contrôle l'apparence des éléments HTML : couleurs, polices, espacements, dimensions et disposition. Il adapte également la page aux différentes tailles d'écran. Séparer la structure HTML de la présentation CSS évite d'enfermer le sens du document dans des choix graphiques et facilite les évolutions visuelles du site.

/* Présentation : CSS */
h1 {
  color: navy;
  font-size: 2rem;
}
Le HTML dit « ceci est un titre ». Le CSS dit « ce titre doit être bleu et mesurer deux fois la taille de référence ».
c

JavaScript pour créer des interactions

comportementévénementinteractiondynamiquescript

JavaScript ajoute des comportements dynamiques. Il peut réagir à un clic, vérifier un formulaire, modifier le contenu affiché ou demander de nouvelles données à un serveur. Les trois technologies ont donc des responsabilités différentes : HTML structure, CSS présente et JavaScript fait réagir.

// Interaction : JavaScript
document.querySelector("button")
  .addEventListener("click", () => alert("Bonjour !"));
3

Lire un document HTML

a

Les balises ouvrantes et fermantes

élémentouverturefermeturecontenusyntaxe

La plupart des éléments HTML possèdent une balise ouvrante et une balise fermante. Dans <p>Un texte</p>, les balises délimitent le paragraphe et le texte en est le contenu. Certains éléments, comme img et meta, ne contiennent aucun texte et ne possèdent pas de balise fermante.

<p>Voici un <strong>message important</strong>.</p>
b

Les attributs et leurs valeurs

propriétévaleurparamètreidentifiantconfiguration

Un attribut apporte une information à un élément. Il se place dans la balise ouvrante et associe généralement un nom à une valeur entre guillemets. Dans un lien, href définit la destination ; dans une image, src indique le fichier. Un élément peut posséder plusieurs attributs séparés par des espaces.

<a href="https://www.icp.fr" lang="fr">Site de l'ICP</a>
c

L'imbrication et la hiérarchie des éléments

parentenfantarborescenceordrefermeture

Les éléments sont imbriqués pour former une arborescence. Un élément qui en contient un autre est son parent ; l'élément contenu est son enfant. Les balises se ferment dans l'ordre inverse de leur ouverture. Une structure bien imbriquée reste compréhensible par le navigateur, les moteurs de recherche et les technologies d'assistance.

<!-- Correct -->
<p><strong>Important</strong></p>
<!-- Incorrect -->
<p><strong>Important</p></strong>
⌕

Exercice de manipulation — Inspecter une page

10 minutes · Binômes · Modification locale et réversible

Point essentiel : les modifications effectuées dans l'inspecteur ne changent pas le site. Elles ne modifient que la copie de la page chargée dans votre navigateur et disparaissent au rechargement.

Consigne

  1. Ouvrez une page web simple de votre choix.
  2. Faites un clic droit sur son titre principal, puis choisissez Inspecter.
  3. Repérez la balise sélectionnée, son contenu et au moins un éventuel attribut.
  4. Double-cliquez sur le texte du titre dans l'inspecteur et remplacez-le.
  5. Choisissez un paragraphe, puis remplacez sa balise p par h2.
  6. Rechargez la page et observez ce qui se passe.

Mise en commun

  • Quelle différence observez-vous entre le code consulté et le rendu ?
  • Pourquoi la modification disparaît-elle ?
  • Quelle erreur commettrait-on en confondant « Inspecter » et modifier le fichier du serveur ?
Trace attendue : chaque binôme formule oralement une phrase utilisant correctement les mots élément, navigateur et rendu.
II

Structurer un contenu éditorial en HTML

1

Construire le squelette d'une page

a

La déclaration <!DOCTYPE html>

déclarationHTML5standardcompatibiliténavigateur

Placée sur la première ligne, la déclaration <!DOCTYPE html> indique que le document suit le standard HTML moderne. Ce n'est pas une balise et elle ne produit aucun contenu visible. Sans elle, certains navigateurs peuvent adopter un ancien mode de compatibilité et interpréter la présentation de manière inattendue.

b

Les éléments html, head et body

racineparamètrescontenudocumentorganisation

html constitue la racine du document. head rassemble les informations destinées au navigateur et aux moteurs de recherche. body contient les éléments visibles : textes, images, liens et sections. Cette séparation distingue les informations qui décrivent la page de celles qui composent son contenu.

<!DOCTYPE html>
<html lang="fr">
  <head>...</head>
  <body>...</body>
</html>
c

Les métadonnées essentielles de la page

titreencodagelangueviewportréférencement

Les métadonnées décrivent la page. title donne un titre à l'onglet et contribue à l'identification du résultat dans un moteur de recherche. charset="UTF-8" assure le bon affichage des caractères. lang="fr" précise la langue du document, tandis que la métadonnée viewport adapte l'affichage aux écrans mobiles.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Le Média des transitions</title>
</head>
2

Hiérarchiser l'information

a

Les titres de h1 à h6

titreniveauhiérarchiestructureaccessibilité

Les éléments h1 à h6 indiquent six niveaux hiérarchiques. Le h1 exprime le sujet principal ; les niveaux suivants organisent parties et sous-parties. On choisit un niveau pour sa place logique, jamais pour sa taille visuelle. Une hiérarchie cohérente aide tous les lecteurs à parcourir le document.

Erreur fréquente : passer de h1 à h4 parce que le rendu de h2 paraît trop grand. La taille relève du CSS, pas du niveau du titre.
b

Les paragraphes et les citations

paragraphecitationsourcesenséditorial

p représente un paragraphe. Une citation longue et autonome emploie blockquote, tandis que q convient à une citation courte intégrée dans une phrase. cite peut désigner le titre d'une œuvre ou d'une source. Le balisage signale ainsi la fonction éditoriale du texte.

<blockquote>
  <p>Le numérique doit rester compréhensible pour être choisi.</p>
</blockquote>
c

Les listes ordonnées et non ordonnées

listeordrepuceélémenténumération

ul convient lorsque l'ordre n'a pas d'importance. ol signale une suite, un classement ou des étapes. Chaque entrée prend place dans un élément li. Ces balises décrivent réellement une liste, contrairement à une série de tirets saisis dans un paragraphe.

<ol>
  <li>Analyser le contenu</li>
  <li>Choisir les balises</li>
  <li>Contrôler le résultat</li>
</ol>
3

Enrichir et relier les contenus

a

Créer des liens internes et externes

hypertexteancredestinationnavigationURL

L'élément a crée un lien ; href en définit la destination. Une URL absolue mène vers un autre site, un chemin relatif vers une ressource du même site et un identifiant précédé de # vers une zone de la page. L'intitulé doit permettre de comprendre la destination hors contexte.

<a href="https://www.icp.fr">Découvrir l'ICP</a>
<a href="#sources">Consulter les sources</a>
b

Insérer une image et renseigner son texte alternatif

imagesourcealternativeaccessibilitécontexte

img insère une image à partir de l'adresse fournie par src. alt restitue par le texte l'information portée par l'image lorsque celle-ci n'est pas visible. Sa rédaction dépend du contexte : l'alternative décrit l'information utile, mais reste vide si l'image est uniquement décorative.

<img
  src="images/jardin-partage.jpg"
  alt="Six habitants plantent des légumes dans un jardin partagé">
c

Utiliser href, src, alt et title

attributadresseressourcedescriptionpertinence

href désigne la destination d'un lien, src l'emplacement d'une ressource et alt l'alternative d'une image. title peut ajouter une information, mais son accès n'est pas garanti sur clavier, lecteur d'écran ou écran tactile. Il ne remplace donc ni un lien explicite ni une alternative utile.

Test rapide

Si l'image disparaît, le lecteur comprend-il encore ce qu'elle apportait ? Si le lien est isolé, son intitulé indique-t-il toujours où il mène ?

1

Exercice fil rouge — Étape 1

15 minutes · Individuel puis comparaison en binôme · Structurer un article

Contexte

Vous rejoignez la rédaction du média fictif Transitions locales. Le texte ci-dessous a été transmis sans aucune mise en forme. Votre première mission consiste à produire un fichier HTML valide et à donner une structure éditoriale au contenu.

Contenu brut

Une ancienne friche devient un média-jardin à Saint-Denis

Publié le 11 septembre 2026 par Nora Martin

Un collectif d'habitants transforme une friche de 800 m² en jardin partagé et en laboratoire de journalisme local.

Informer depuis le terrain
Chaque mercredi, les habitants se réunissent pour jardiner, documenter les transformations du quartier et publier une lettre d'information.

Trois objectifs
Créer un espace commun
Former les habitants à l'écriture numérique
Documenter les initiatives écologiques locales

La technologie n'a d'intérêt que si elle permet aux habitants de raconter eux-mêmes leur territoire.

Pour aller plus loin : site de l'Institut Catholique de Paris
Image : six habitants travaillent dans un jardin partagé.

Travail demandé

  1. Créez le squelette complet du document : doctype, langue, encodage, viewport et titre d'onglet.
  2. Placez le contenu visible dans body.
  3. Utilisez un h1, un h2, des paragraphes et une liste adaptée.
  4. Transformez « site de l'Institut Catholique de Paris » en lien vers https://www.icp.fr.
  5. Ajoutez une image nommée jardin-partage.jpg et rédigez l'attribut alt.
Livrable intermédiaire : un fichier article.html qui s'ouvre dans le navigateur et conserve exactement toutes les informations du texte source.
Afficher un point de départ minimal
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>...</title>
  </head>
  <body>
    <!-- Votre contenu -->
  </body>
</html>
III

Concevoir une première page web

1

Organiser la page avec des balises sémantiques

a

Identifier l'en-tête, le contenu principal et le pied de page

headermainfooterrepèrestructure

header introduit une page ou une section. main délimite le contenu principal propre à la page et ne doit normalement apparaître qu'une fois. footer rassemble les informations de fin, comme l'auteur, les mentions légales ou des liens complémentaires. Ces balises créent des repères plus explicites qu'une succession de conteneurs génériques.

b

Structurer la navigation avec nav

menuliensparcoursrepèrenavigation

nav regroupe un ensemble important de liens de navigation : menu principal, sommaire ou pagination. Tous les liens d'une page ne doivent pas être placés dans un nav. Son utilisation permet notamment aux technologies d'assistance d'atteindre rapidement les parcours principaux.

<nav aria-label="Navigation principale">
  <ul>
    <li><a href="index.html">Accueil</a></li>
  </ul>
</nav>
c

Distinguer main, section et article

principalregroupementautonomiethèmesémantique

main contient le sujet central de la page. section rassemble des contenus appartenant à un même thème et porte généralement un titre. article représente un contenu autonome qui pourrait être diffusé séparément, comme une actualité ou un billet. Le choix dépend du sens, jamais de la mise en page.

Dans le fil rouge

La publication complète est un article. « Informer depuis le terrain » peut former une section interne à cet article.

2

Réaliser une page éditoriale simple

a

Analyser et hiérarchiser le contenu fourni

analyseinformationprioriténiveaudécoupage

Avant de coder, on identifie le sujet principal, les parties, les informations secondaires et la navigation éventuelle. Cette analyse produit une hiérarchie éditoriale : titre principal, intertitres, paragraphes, listes, citations et illustrations. Une bonne page HTML commence donc par une lecture et une compréhension du contenu.

Méthode : annotez d'abord le texte avec des fonctions — titre, chapô, métadonnée, intertitre, paragraphe, liste, citation, lien, image — puis seulement avec des noms de balises.
b

Traduire cette hiérarchie en éléments HTML

balisagestructuresémantiqueconversioncohérence

Chaque fonction éditoriale est traduite par l'élément approprié. Un titre devient un élément de titre, une énumération devient une liste, une partie thématique devient éventuellement une section. Il faut résister au réflexe de choisir une balise pour son rendu visuel : la forme sera prise en charge ultérieurement par CSS.

c

Ajouter des liens, une image et des informations complémentaires

enrichissementlienillustrationlégendesource

Les liens permettent d'approfondir ou de documenter le sujet. Une image informative complète le texte grâce à une alternative pertinente. Lorsqu'une illustration et sa légende forment un ensemble autonome, figure les regroupe et figcaption porte la légende. Chaque enrichissement doit servir l'information.

<figure>
  <img src="jardin-partage.jpg" alt="Six habitants plantent des légumes">
  <figcaption>Le collectif lors de l'atelier du mercredi.</figcaption>
</figure>
3

Vérifier et corriger la production

a

Contrôler l'imbrication et la fermeture des balises

syntaxeimbricationfermetureindentationvalidation

Les balises doivent être correctement écrites, imbriquées et fermées. L'indentation rend visibles les relations parent-enfant et facilite la détection des erreurs. Le navigateur sait corriger certaines fautes, mais sa tolérance ne garantit pas une structure logique. Un code propre est plus simple à relire, valider et maintenir.

b

Repérer les erreurs de structure et d'accessibilité

titresalternativelanguesémantiqueaudit

Une page affichable peut rester mal structurée. Il faut contrôler la langue, le titre d'onglet, le titre principal, l'ordre des niveaux, l'alternative des images et la clarté des liens. Une balise ne doit pas être utilisée uniquement pour obtenir un effet graphique. Ces contrôles améliorent à la fois l'accessibilité, la maintenabilité et la qualité éditoriale.

Un seul sujet principal clairement identifié
Des titres sans saut hiérarchique arbitraire
Une langue et un titre d'onglet renseignés
Des liens compréhensibles hors contexte
Une alternative adaptée à chaque image
Des balises fermées dans le bon ordre
c

Expliquer les principaux choix de balisage

justificationintentionautonomiehiérarchieargumentation

Produire du HTML suppose de pouvoir relier chaque choix à la fonction du contenu : article pour un contenu autonome, section pour un regroupement thématique ou ol pour une séquence. Cette justification montre que le balisage résulte d'un raisonnement et non d'une copie mécanique.

Formulation attendue

« J'ai choisi une liste non ordonnée parce que les trois objectifs n'expriment ni étapes ni classement. »

2

Exercice fil rouge — Étape 2

20 minutes · Reprise du même fichier · Sémantique, contrôle et justification

Mission

Reprenez votre fichier article.html sans repartir de zéro. Vous devez désormais transformer sa structure éditoriale en page sémantique et expliquer vos décisions.

Travail demandé

  1. Placez l'identité du média et une navigation dans un header.
  2. Regroupez les liens principaux dans un nav.
  3. Placez la publication dans main, puis dans un article.
  4. Créez une section autour de « Informer depuis le terrain » et de son contenu.
  5. Regroupez l'image et sa légende avec figure et figcaption.
  6. Placez l'auteur, la date ou les informations complémentaires dans les éléments qui vous paraissent les plus justes.
  7. Ajoutez un footer comprenant le nom du média et une mention fictive de droits d'auteur.
  8. Contrôlez votre code avec la grille ci-dessous et corrigez les anomalies.

Contrôle croisé en binôme

Doctype et langue présents
Titre d'onglet explicite
Un main unique
Hiérarchie de titres cohérente
Liste correctement structurée
Lien doté d'un intitulé précis
Image avec alternative utile
Imbrication et indentation lisibles
Livrable final : le fichier article.html corrigé et trois phrases justifiant un choix de balise, un choix de hiérarchie et un choix d'accessibilité.
Afficher une proposition de structure — après la mise en commun
<body>
  <header>
    <p>Transitions locales</p>
    <nav aria-label="Navigation principale">...</nav>
  </header>
  <main>
    <article>
      <header>
        <h1>Une ancienne friche devient un média-jardin à Saint-Denis</h1>
        <p>Publié le <time datetime="2026-09-11">11 septembre 2026</time> par Nora Martin</p>
      </header>
      <p>Un collectif d'habitants transforme...</p>
      <figure>...</figure>
      <section>
        <h2>Informer depuis le terrain</h2>
        <p>Chaque mercredi...</p>
        <h3>Trois objectifs</h3>
        <ul>...</ul>
        <blockquote><p>La technologie n'a d'intérêt...</p></blockquote>
      </section>
    </article>
  </main>
  <footer>...</footer>
</body>