Accueil/Informatique & Développement /Chapitre 01

HTML — structurer une page web

Le squelette de toute page web : un langage de balises qui décrit le sens du contenu, pas son apparence.

📌

Résumé flash

HTML (HyperText Markup Language) est un langage de balisage, pas de programmation : il structure le contenu (titres, paragraphes, listes, images, liens, tableaux, formulaires). Un document a toujours quatre piliers — <!DOCTYPE html>, <html>, <head> (les métadonnées, invisibles), <body> (le visible). Le style, c'est le rôle du CSS ; l'interactivité, celui de JavaScript.

🔑 #balise #DOCTYPE #head #body #meta #sémantique #a-href #img-alt #ul-ol-dl #table #form #input #HTML5

01Le Web : client & serveur

Le Web est un système qui permet d'accéder à des pages et documents sur Internet à l'aide d'un navigateur. Son fonctionnement repose sur trois acteurs.

Le client demande, le serveur répond. Le protocole qui règle cet échange est HTTP (ou HTTPS, sa version chiffrée).

Acteur	Rôle
Le client	L'appareil de l'utilisateur. Son navigateur envoie des requêtes HTTP et affiche le contenu reçu
Le serveur	Machine distante qui stocke les fichiers du site et renvoie ceux qu'on lui demande
Internet	Le réseau mondial qui relie les deux et transporte requêtes et réponses, via HTTP/HTTPS

🌍 Ce qui se passe quand vous tapez une adresse

Vous tapez www.exemple.com dans le navigateur.
Le navigateur (client) envoie une requête HTTP au serveur.
Le serveur reçoit la requête et renvoie le code HTML correspondant.
Le navigateur reçoit ce code et affiche la page.

Tout ce chapitre concerne l'étape 3 : le langage dans lequel le serveur répond.

02HTML, CSS, JavaScript

Une page web complète s'écrit avec trois langages qui se répartissent le travail. On ne les oppose pas : on les combine.

💡 Le corps humain

Langage	Rôle	Analogie
HTML	structure le contenu	le squelette
CSS	met en forme	la peau, les vêtements
JavaScript	rend interactif	les muscles, le mouvement

Une page en HTML seul fonctionne — comme un squelette tient debout — mais elle est nue et immobile. C'est déjà suffisant pour ce chapitre : on structure d'abord, on habillera (CSS) et on animera (JS) ensuite.

Le HTML (HyperText Markup Language) est un langage de balisage, pas un langage de programmation. Il ne calcule rien : il décrit. Son rôle est de structurer le contenu (titres, paragraphes, images, liens…), d'en définir la signification (ceci est un titre, ceci est un bouton…) et de permettre au navigateur de l'afficher correctement.

🌍 Du premier HTML à HTML5

HTML est le pilier du Web depuis 1990. Il a évolué (2.0, 3.2, 4.0…) jusqu'à HTML5, la version actuelle : elle intègre nativement l'audio, la vidéo, les graphiques et l'interactivité, tout en simplifiant la structure des pages. C'est HTML5 qu'on écrit aujourd'hui.

03Balises et structure du document

En HTML, tout le contenu est rangé dans des éléments, délimités par des balises (tags) écrites entre < et >. La liste des balises est limitée et fixée par la spécification du langage — on ne les invente pas.

La plupart des éléments vont par paire : <balise> … </balise>. Quelques-uns sont auto-fermants (<img>, <br>, <meta>).

Les quatre piliers obligatoires

Tout document HTML comporte au minimum quatre éléments :

`<!DOCTYPE html>`	Tout en haut. Indique la version (ici HTML5) pour que le navigateur interprète correctement le code
`<html>`	L'élément racine. Il n'a que deux enfants : `<head>` et `<body>`
`<head>`	L'en-tête : les métadonnées, invisibles dans la page
`<body>`	Le corps : tout ce qui est visible à l'écran

La page est un arbre : <html> est la racine, <head> et <body> ses deux branches.

Dans le `<head>`

<title> — le titre affiché dans l'onglet. Seule balise obligatoire de l'en-tête.
<meta charset="utf-8"> — l'encodage des caractères (indispensable pour les accents).
<meta name="viewport" …> — l'adaptation à l'écran (mobile).
<link> — relie un fichier externe (feuille de style CSS, icône…).
<style> — du CSS écrit directement dans la page.
<script> — du JavaScript, interne ou lié via src.
<base> — l'URL de base des liens relatifs de la page.

🧰 La structure minimale à savoir écrire de mémoire

html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Titre de la page</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- contenu visible ici -->
</body>
</html>

L'attribut lang="fr" sur <html> annonce la langue ; dir="rtl" servirait pour un texte de droite à gauche (arabe, hébreu).

⚠️ Le commentaire, et la casse

Un commentaire s'écrit  : tout ce qui est entre les deux est ignoré par le navigateur. Utile pour s'annoter le code.

Enfin, HTML est insensible à la casse (<IMG> = <img>), mais la convention moderne est d'écrire tout en minuscules. Les cours plus anciens écrivent en majuscules — on s'en tient aux minuscules.

04Le texte

Les titres

Six niveaux, de <h1> (le plus important) à <h6>. Ils structurent la page en sections hiérarchisées — et les moteurs de recherche s'en servent pour comprendre le contenu.

⚠️ Un seul <h1> par page

Le <h1> est le titre principal : il doit être unique. Et on ne saute pas de niveau (pas de <h3> juste après un <h1>) — la hiérarchie doit être continue, pour l'accessibilité comme pour le référencement. Les titres ne servent pas à « faire du gros texte » : ça, c'est le rôle du CSS.

Paragraphes et sauts

Le paragraphe <p> est l'unité de texte de base ; le navigateur ajoute automatiquement un espace avant et après. <br> force un retour à la ligne, <hr> trace une ligne de séparation.

Mettre en valeur : le sens avant l'apparence

Balise	Effet	Signification
`<strong>`	gras	texte important
`<em>`	italique	emphase, accentuation
`<mark>`	surligné	passage à mettre en évidence
`<u>` · `<s>`	souligné · barré	usage purement visuel

html

<p>Un mot <strong>important</strong>.</p>
<p>Un mot <em>accentué</em>.</p>
<p>Un passage <mark>surligné</mark>.</p>
<p>Du texte <u>souligné</u> et <s>barré</s>.</p>

HTML5 privilégie les balises sémantiques <strong> et <em> (qui portent un sens) plutôt que les anciennes <b> et <i> (purement visuelles). Un lecteur d'écran insistera sur un <strong>, pas sur un <b>.

🔧 Corrigé — la balise <font> n'existe plus

Le polycopié présente <font color>, <font size> et <font face> pour colorer, dimensionner et changer la police du texte. Ces balises sont obsolètes et supprimées de HTML5 : il ne faut plus les utiliser. Tout ce qui touche à l'apparence — couleur, taille, police — se fait désormais en CSS.

à ne plus faire → à faire

<font color="blue" size="5">Texte</font>        <!-- obsolète -->

<p style="color:blue; font-size:1.4em">Texte</p>   <!-- CSS, correct -->

05Les liens

Le lien hypertexte est l'élément fondateur du Web. La balise <a> (pour anchor, ancre) et son attribut href ne servent pas qu'à « changer de page » : ils font sept choses.

html

<!-- 1. vers une autre page (interne ou externe) -->
<a href="page2.html">Aller à la page 2</a>
<a href="https://www.exemple.com">Site externe</a>

<!-- 2. vers une section précise (ancre via un id) -->
<a href="page2.html#section3">Aller à la section 3</a>

<!-- 3. ouvrir dans un nouvel onglet -->
<a href="https://exemple.com" target="_blank" rel="noopener noreferrer">Nouvel onglet</a>

<!-- 4. télécharger un fichier -->
<a href="brochure.pdf" download>Télécharger la brochure</a>

<!-- 5. envoyer un e-mail -->
<a href="mailto:contact@cfa.fr">Nous écrire</a>

<!-- 6. appeler un numéro (sur mobile) -->
<a href="tel:+33123456789">Appeler</a>

<!-- 7. déclencher du JavaScript -->
<a href="javascript:alert('Bonjour !')">Clique</a>

🧰 L'ancre interne, en deux temps

Pour sauter à un endroit précis d'une page, on pose une cible avec un id, puis on la vise avec un # :

html

<h2 id="tarifs">Nos tarifs</h2>      <!-- la cible -->
...
<a href="#tarifs">Voir les tarifs</a>   <!-- le lien -->

C'est exactement le mécanisme du sommaire de cette fiche.

⚠️ target="_blank" va avec rel="noopener"

Ouvrir un lien externe dans un nouvel onglet sans rel="noopener noreferrer" laisse la page ouverte manipuler la vôtre (faille tabnabbing) et fuiter l'adresse de provenance. Le réflexe : les deux ensemble, toujours, pour un lien externe.

06Les images

La balise <img> est auto-fermante (pas de </img>). Ses deux attributs essentiels :

src — le chemin vers le fichier image ;
alt — le texte alternatif, affiché si l'image ne charge pas et lu par les lecteurs d'écran.

⚠️ alt n'est pas optionnel

Un <img> sans alt est invalide et inaccessible : une personne malvoyante n'a alors aucune information sur l'image. Toujours décrire l'image — ou, si elle est purement décorative, mettre un alt="" vide (jamais l'omettre).

Quatre types d'images

Type	Ce que c'est
Normale	affichage simple : `<img src="photo.jpg" alt="Photo">`
Cliquable	une image dans un lien : `<a href="…"><img …></a>`
Mappée	plusieurs zones cliquables via `<map>` et `<area>` (plans interactifs)
Responsive	plusieurs versions via `srcset` ; le navigateur choisit selon l'écran

La légende : `figure` et `figcaption`

html

<figure>
  <img src="schema.png" alt="Schéma du réseau">
  <figcaption>Topologie en étoile du réseau TechShop</figcaption>
</figure>

🔧 Corrigé — dimensionner et espacer, c'est du CSS

Le polycopié règle la taille avec width/height et l'espacement avec hspace/vspace. hspace et vspace sont obsolètes ; width/height restent tolérés (utiles pour réserver la place et éviter les sauts de mise en page), mais l'ajustement fin et l'espacement relèvent du CSS (margin, width en %…).

07Les listes

Trois familles de listes, selon le besoin.

Liste	Balises	Quand
Ordonnée	`<ol>` + `<li>`	l'ordre compte (étapes, classement)
Non ordonnée	`<ul>` + `<li>`	l'ordre est indifférent (options, courses)
De définitions	`<dl>` · `<dt>` · `<dd>`	terme + définition (glossaire, FAQ)

html

<ol>
  <li>Premier</li>
  <li>Deuxième</li>
</ol>

<ul>
  <li>Pommes</li>
  <li>Bananes</li>
</ul>

<dl>
  <dt>HTML</dt>
  <dd>Langage de balisage.</dd>
  <dt>CSS</dt>
  <dd>Langage de style.</dd>
</dl>

Attributs de `<ol>` et imbrication

<ol> accepte start (démarrer à un autre numéro), type (chiffres, lettres, romains) et reversed (numérotation décroissante). On peut imbriquer une liste dans un <li> pour créer des sous-niveaux.

🔧 Corrigé — ce que fait vraiment reversed

Le polycopié donne, pour <ol type="A" start="3" reversed> avec les items « Item un / Item deux / Item trois », l'affichage :

C. Item trois     ← annoncé par le cours
B. Item deux
A. Item un

C'est inexact. L'attribut reversed inverse la numérotation, pas l'ordre des éléments. Avec start="3", le premier item porte le 3, le suivant 2, puis 1 → en type="A" : C, B, A. Mais les items restent dans l'ordre du code. L'affichage réel est donc :

C. Item un       ← résultat réel dans le navigateur
B. Item deux
A. Item trois

08Les tableaux

Un tableau présente des données en lignes et colonnes. On le décrit ligne par ligne, et dans chaque ligne, cellule par cellule.

Balise	Rôle
`<table>`	le tableau entier
`<caption>`	sa légende
`<tr>`	une ligne (table row)
`<th>`	une cellule d'en-tête
`<td>`	une cellule de données
`<thead>` · `<tbody>` · `<tfoot>`	en-tête, corps, pied du tableau

html

<table>
  <caption>Gestion des budgets</caption>
  <thead>
    <tr><th>Poste</th><th>Voiture</th><th>Maison</th><th>Charges</th></tr>
  </thead>
  <tbody>
    <tr><th>Tarif (€)</th><td>2000</td><td>3000</td><td>7000</td></tr>
  </tbody>
</table>

Fusionner des cellules

colspan="2" — la cellule s'étend sur 2 colonnes (fusion horizontale) ;
rowspan="2" — sur 2 lignes (fusion verticale).

🔧 Corrigé — align, valign, border : obsolètes

Le polycopié aligne le contenu avec align/valign et trace les bordures avec border="1". Ces attributs de présentation sont obsolètes en HTML5. Le tableau HTML porte la structure ; son apparence (bordures, alignement, centrage) se règle en CSS (border, text-align, margin:auto).

À retenir : les tableaux servent à présenter des données, jamais à faire la mise en page d'une page (ça, c'est le rôle de CSS — Flexbox, Grid).

09Les formulaires

Un formulaire est une zone interactive où l'utilisateur saisit des informations envoyées à un serveur : inscription, connexion, contact, commande… Tout ce qui implique l'envoi de données passe par un <form>.

La balise `<form>` et ses deux attributs

html

<form method="POST" action="/traitement.php">
    <!-- les champs ici -->
    <button type="submit">Envoyer</button>
</form>

`action`	l'URL qui traite les données. Vide (`action=""`) → la même page
`method`	`GET` : données visibles dans l'URL (`?nom=Dupont`) · `POST` : données dans le corps de la requête, plus sûr pour les informations sensibles

⚠️ Un mot de passe ne passe jamais en GET

Avec GET, tout se retrouve dans l'URL — donc dans l'historique, les journaux du serveur, les favoris. Pour un mot de passe ou toute donnée sensible, c'est POST. Règle simple : GET pour lire (une recherche), POST pour envoyer (une inscription).

Les champs courants

Champ	Balise
Texte simple	`<input type="text">`
Mot de passe	`<input type="password">`
E-mail (vérifié)	`<input type="email">`
Nombre	`<input type="number">`
Texte long	`<textarea></textarea>`
Un seul choix	`<input type="radio">`
Choix multiples	`<input type="checkbox">`
Liste déroulante	`<select><option>…</select>`
Fichier	`<input type="file">`
Envoi	`<button type="submit">`

Le <button> a trois types : submit (envoie), reset (réinitialise les champs) et button (générique, piloté par JavaScript).

Les attributs booléens

Certains attributs n'ont pas de valeur : leur simple présence suffit.

`required`	champ obligatoire avant l'envoi
`autofocus`	curseur placé ici au chargement
`placeholder="…"`	texte indicatif grisé (prend une valeur)
`readonly` · `multiple`	lecture seule · sélection multiple

🧰 <label> : le réflexe accessibilité

Le <label> associe un texte à un champ. On peut cliquer le texte pour activer le champ, et les lecteurs d'écran l'annoncent. Deux écritures :

html

<!-- avec for = id -->
<label for="email">E-mail :</label>
<input type="email" id="email" name="email">

<!-- ou en englobant le champ -->
<label>E-mail : <input type="email" name="email"></label>

Et pour regrouper des champs : <fieldset> avec un <legend> comme titre du groupe.

🌍 HTML5 a musclé les formulaires

Avant, tout se validait en JavaScript. HTML5 apporte des types et attributs qui valident et assistent nativement : type="email" vérifie le format, type="color" ouvre un sélecteur de couleur, type="date" un calendrier, <datalist> propose des suggestions, minlength/ maxlength bornent la saisie. Moins de code, plus de fiabilité.

🧠 Auto-évaluation

Pourquoi ce champ est-il mal fichu ? <input type="text" placeholder="Nom"> (seul, sans rien d'autre)

Il manque le name : sans lui, la valeur saisie n'est pas envoyée au serveur (c'est le name qui nomme la donnée). Il manque aussi un <label> associé : un placeholder n'est pas une étiquette (il disparaît dès qu'on tape et n'est pas un vrai substitut pour l'accessibilité).

01Le Web : client & serveur

02HTML, CSS, JavaScript

03Balises et structure du document

Les quatre piliers obligatoires

Dans le <head>

04Le texte

Les titres

Paragraphes et sauts

Mettre en valeur : le sens avant l'apparence

05Les liens

06Les images

Quatre types d'images

La légende : figure et figcaption

07Les listes

Attributs de <ol> et imbrication

08Les tableaux

Fusionner des cellules

09Les formulaires

La balise <form> et ses deux attributs

Les champs courants

Les attributs booléens

Dans le `<head>`

La légende : `figure` et `figcaption`

Attributs de `<ol>` et imbrication

La balise `<form>` et ses deux attributs