RM Partie 2 : Les bases du HTML

Partie 2 — Les bases du HTML

1) Objectifs pédagogiques

écrire la structure de base d’un document HTML5 ;
utiliser les balises de texte (titres, paragraphes, sauts de ligne, séparation thématique) ;
mettre en valeur du contenu avec <strong>, <em>, <mark>, <small>, <del>, <ins> ;
créer des listes (<ul>, <ol>, <li>) simples et imbriquées ;
créer des liens hypertextes avec les attributs essentiels (href, target, title, rel) ;
insérer des images correctement avec alt (accessibilité), et connaître les bonnes pratiques (width, height, loading, srcset…).

2) Rappel : structure de base d’une page HTML5

Version minimale recommandée :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Titre de la page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    Contenu…
  </body>
</html>

Points clés :

<!DOCTYPE html> active le mode standard.
lang="fr" améliore accessibilité et SEO.
meta charset="utf-8" évite les problèmes d’accents.
meta viewport prépare l’affichage correct sur mobile.

3) Balises de contenu texte

3.1 Titres : `<h1>` à `<h6>`

Un seul <h1> par document (recommandation d’accessibilité) : titre principal.
<h2> à <h6> structurent les sous-parties hiérarchiquement (ne saute pas de niveaux sans raison).
Les titres ne servent pas à « faire gros » : la taille se gère en CSS.

Exemple :

<h1>Guide de randonnée</h1>
<h2>Équipement de base</h2>
<h3>Chaussures</h3>
<h3>Sac à dos</h3>
<h2>Itinéraires</h2>

3.2 Paragraphe : `<p>`

Un paragraphe est un bloc de texte :

<p>Le parc national offre des paysages variés, accessibles à tous les niveaux.</p>

Ne pas imbriquer <p> à l’intérieur d’un autre <p>.

3.3 Saut de ligne et séparation : `<br>`, `<hr>`

<br> : saut de ligne dans un même paragraphe, cas d’usage rares (poésie, adresse, signature). Ne pas utiliser <br> pour créer des espacements verticaux (utilise le CSS).

<p>12 rue des Fleurs<br>80000 Amiens</p>

<hr> : séparation thématique (changement de sujet/section), pas une « ligne décorative ».

<p>Introduction au guide…</p>
<hr>
<p>Partie 1 : Préparer sa sortie.</p>

4) Mise en valeur sémantique

4.1 `<strong>` (importance forte)

Indique une importance accrue (souvent rendu en gras).

<p>N’oublie pas : <strong>prends de l’eau</strong> en quantité suffisante.</p>

4.2 `<em>` (emphase)

Met l’emphase (souvent rendu en italique) ; peut s’imbriquer pour accentuer l’emphase.

<p>Cet itinéraire est <em>particulièrement</em> exposé au vent.</p>

Remarque : <b> et <i> sont visuels/historiques (sans sémantique). Préfère <strong> et <em> pour donner du sens.

4.3 `<mark>` (mise en surbrillance)

Met en évidence un passage pertinent dans un contexte (résultat de recherche, surlignage).

<p>Le sommet <mark>Mont Belvédère</mark> offre un panorama unique.</p>

4.4 `<small>` (commentaire annexe, aside)

Contenu annexe, notices légales, commentaires secondaires.

<p>Tarif : 15 € <small>(gratuit pour les moins de 12 ans)</small></p>

4.5 `<del>` (contenu supprimé) et `<ins>` (contenu inséré)

Pour montrer des modifications (diffs, changelogs, corrections).

<p>Ancien prix : <del>20 €</del> Nouveau prix : <ins>15 €</ins></p>

Astuce : tu peux ajouter datetime pour préciser quand le changement a eu lieu : <del datetime="2025-09-06">20 €</del>

5) Listes : `<ul>`, `<ol>`, `<li>`

5.1 Listes non ordonnées : `<ul>`

Liste à puces (l’ordre n’a pas d’importance) :

<ul>
  <li>Eau</li>
  <li>Carte</li>
  <li>Lampe frontale</li>
</ul>

5.2 Listes ordonnées : `<ol>`

Liste numérotée (ordre important).
Attributs utiles :
- start="10" : démarrer la numérotation à 10.
- reversed : numérotation décroissante.
- type="1|a|A|i|I" : style de numérotation (optionnel, préférer CSS pour le style).

<ol start="3">
  <li>Échauffement</li>
  <li>Montée</li>
  <li>Sommet</li>
</ol>

<ol reversed>
  <li>Étape finale</li>
  <li>Étape intermédiaire</li>
  <li>Étape initiale</li>
</ol>

5.3 Imbrication de listes

Tu peux imbriquer des listes dans des <li> pour créer des sous-listes.

<ul>
  <li>Équipement
    <ul>
      <li>Chaussures</li>
      <li>Sac</li>
    </ul>
  </li>
  <li>Itinéraires</li>
</ul>

Bonnes pratiques : ne pas multiplier inutilement les niveaux (lisibilité/accessibilité).

6) Liens hypertextes : `<a>`

6.1 L’attribut `href`

Lien absolu : inclut le schéma et le domaine.

<a href="https://www.example.org/">Site officiel</a>

Lien relatif : relatif au document courant.

<a href="../images/carte.pdf">Carte du site</a>

Lien ancre interne (fragment) :

<a href="#top">Revenir en haut</a>
…
<h2 id="top">Sommaire</h2>

Schémas spéciaux :

<a href="mailto:contact@example.org">Nous écrire</a>
<a href="tel:+33322000000">+33 3 22 00 00 00</a>

6.2 `target` et `rel`

target="_blank" : ouvrir dans un nouvel onglet (à utiliser avec parcimonie).
Sécurité/Perf : lorsqu’on utilise _blank, ajoute rel="noopener noreferrer" pour éviter la prise de contrôle de la fenêtre par la page cible et limiter la fuite du référent.

<a href="https://www.example.org" target="_blank" rel="noopener noreferrer">
  Ouvrir dans un nouvel onglet
</a>

6.3 `title` (info-bulle)

Texte complémentaire affiché en info-bulle.
Attention : title n’est pas une solution d’accessibilité fiable (non annoncé partout). Mieux vaut un libellé de lien clair ou aria-label si nécessaire.

<a href="guide.pdf" title="Télécharger le guide en PDF">Guide PDF</a>

6.4 Autres attributs utiles

download : suggère le téléchargement (au lieu d’ouvrir) :

<a href="brochure.pdf" download>Brochure (PDF)</a>

En HTML5, un <a> peut contenir des éléments de bloc (ex. une carte entière cliquable).

7) Images : `<img>`

7.1 Syntaxe de base

<img src="images/sommet.jpg" alt="Vue panoramique depuis le sommet enneigé">

src : chemin de l’image.
alt : texte alternatif obligatoire pour l’accessibilité :
- Image informative : décrire brièvement l’information utile.
- Image décorative : alt="" (vide) pour être ignorée par les lecteurs d’écran.

7.2 Dimensions et ratio

Spécifie idéalement width et height (en pixels naturels de l’image) pour éviter le Cumulative Layout Shift (sauts de mise en page).

<img src="images/carte.jpg" alt="Carte du massif" width="1200" height="800">

Le CSS peut ajuster l’affichage responsive (ex. max-width: 100%).

7.3 Performance et chargement

loading="lazy" : chargement différé hors écran (économie de bande passante).
decoding="async" : décodage asynchrone suggéré.

<img
  src="images/sommet.jpg"
  alt="Vue panoramique depuis le sommet"
  width="1200" height="800"
  loading="lazy"
  decoding="async">

7.4 Images responsives : `srcset` et `sizes`

Fournis plusieurs résolutions ; le navigateur choisit la meilleure selon l’écran.

<img
  src="images/sommet-1200.jpg"
  srcset="images/sommet-600.jpg 600w, images/sommet-1200.jpg 1200w, images/sommet-2000.jpg 2000w"
  sizes="(max-width: 800px) 100vw, 800px"
  alt="Vue panoramique depuis le sommet"
  width="1200" height="800">

7.5 Légendes : `<figure>` et `<figcaption>`

<figure>
  <img src="images/refuge.jpg" alt="Refuge en pierre au bord du lac" width="1200" height="800">
  <figcaption>Refuge des Aiguilles, altitude 2150 m.</figcaption>
</figure>

7.6 Formats d’image (aperçu)

Photographie : JPEG, WebP, AVIF (meilleurs taux de compression).
Transparence nette / logos : PNG, SVG (vectoriel).
Icônes/illustrations vectorielles : SVG (privilégie le vectoriel quand possible).

Bonnes pratiques :

N’intègre pas du texte important dans une image (préférer du vrai texte + CSS).

Utilise des images optimisées (poids réduit) et pertinentes.

alt doit transmettre l’information utile sans redondance (ne dis pas « image de… » si ce n’est pas pertinent).

8) Exercice guidé (avec corrigé)

Consigne

Crée une page index.html qui :

Contient une structure HTML5 correcte.
Affiche un titre principal (<h1>), deux sous-titres (<h2>).
Présente deux paragraphes, un <hr> entre eux, et un <br> dans l’adresse postale du bas.
Met en valeur deux mots : un en <strong>, un en <em>.
Contient une liste non ordonnée des éléments à emporter, et une liste ordonnée des étapes d’un parcours.
Intègre un lien vers un site externe (ouverture dans un nouvel onglet, sécurisé).
Affiche une image avec alt, width, height, loading="lazy".
(Optionnel) Ajoute un <figure>/<figcaption>.

Corrigé possible

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Randonnée – Préparer sa sortie</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>

    <h1>Randonnée – Préparer sa sortie</h1>

    <h2>Équipement de base</h2>
    <p>Avant de partir, pense à vérifier ton sac : une <strong>réserve d’eau</strong>, une carte,
       et une lampe. Un vêtement chaud peut s’avérer <em>indispensable</em> en altitude.</p>

    <ul>
      <li>Eau</li>
      <li>Carte</li>
      <li>Lampe frontale</li>
      <li>Coupe-vent</li>
    </ul>

    <hr>

    <h2>Itinéraire conseillé</h2>
    <ol>
      <li>Départ du parking du col</li>
      <li>Montée par le sentier nord</li>
      <li>Pause au belvédère</li>
      <li>Sommet</li>
    </ol>

    <p>Plus d’infos :
      <a href="https://www.example.org/rando"
         target="_blank" rel="noopener noreferrer"
         title="Conseils officiels de randonnée">guide officiel</a>.
    </p>

    <figure>
      <img
        src="images/sommet-1200.jpg"
        alt="Panorama depuis le sommet au lever du soleil"
        width="1200" height="800"
        loading="lazy" decoding="async">
      <figcaption>Panorama depuis le sommet (alt. 2 450 m).</figcaption>
    </figure>

    <p>
      Association Les Marcheurs<br>
      12 rue des Fleurs<br>
      80000 Amiens
    </p>

  </body>
</html>

9) Pièges fréquents et bonnes pratiques

Titres : ne pas utiliser plusieurs <h1> pour « grossir » le texte ; respecte la hiérarchie (h1 → h2 → h3…).
Paragraphe : ne pas imbriquer <p> dans <p>.
<br> : uniquement pour des retours à la ligne sémantiques (adresse, poésie), jamais pour faire des marges → utilise CSS.
<hr> : séparation thématique, pas un trait “décoratif”.
Listes : chaque item est un <li>. Évite de sur-imbriquer.
Liens :
- texte de lien explicite (évite « cliquez ici ») ;
- si target="_blank", ajoute rel="noopener noreferrer" ;
- title est optionnel, pas une solution d’accessibilité universelle.
Images :
- alt pertinent (ou alt="" si décorative) ;
- fournis width/height pour la stabilité de la mise en page ;
- utilise loading="lazy" pour les images sous la ligne de flottaison ;
- privilégie des formats modernes et des fichiers optimisés.

10) Mini-quiz

À quoi servent <h1> … <h6> et comment doivent-ils être utilisés ?
Quand utiliser <br> plutôt que de créer un nouveau <p> ?
Différence entre <strong> et <b> ; <em> et <i> ?
Donne un cas d’usage légitime de <hr>.
Comment commencer une liste ordonnée à 5 ?
Quel attribut ajouter à <a target="_blank"> pour des raisons de sécurité/performance ?
Écris une balise <img> correcte (avec alt, width, height, loading).
Quand mettre alt="" à une image ?

Corrigé (bref)

Structurer la hiérarchie des titres ; un <h1> principal, ne pas sauter de niveaux arbitrairement.
Pour un retour à la ligne dans un même paragraphe (poésie, adresse).
<strong>/<em> = sémantiques (importance/emphase) ; <b>/<i> = purement visuels.
Pour marquer un changement de sujet ou de section.
<ol start="5">…</ol>.
rel="noopener noreferrer".
Exemple :

<img src="img/photo.jpg" alt="Sentier en forêt"
     width="1200" height="800" loading="lazy">

Quand l’image est strictement décorative (aucune information utile).

11) Fiche-mémo (à coller en fin de poly)

Squelette : <!DOCTYPE html>, <html lang="fr">, <head> (charset, viewport, title), <body>.
Titres : <h1> unique (titre principal), puis <h2>…<h6> pour la hiérarchie.
Texte : <p> pour un paragraphe ; <br> pour un retour à la ligne ponctuel ; <hr> pour une rupture thématique.
Mise en valeur : <strong> (importance), <em> (emphase), <mark> (surlignage), <small> (annexe), <del>/<ins> (modifs).
Listes : <ul> (à puces), <ol> (numérotée), <li> (élément). Attributs utiles : start, reversed.
Liens : <a href="…"> ; si _blank ⇒ rel="noopener noreferrer". Préfère un texte de lien descriptif.
Images : <img src="…" alt="…"> ; alt="" si décorative ; width/height pour la stabilité ; loading="lazy" ; figure/figcaption pour légende.

RM Partie 2 : Les bases du HTML

Partie 2 — Les bases du HTML

1) Objectifs pédagogiques

2) Rappel : structure de base d’une page HTML5

3) Balises de contenu texte

3.1 Titres : <h1> à <h6>

3.2 Paragraphe : <p>

3.3 Saut de ligne et séparation : <br>, <hr>

4) Mise en valeur sémantique

4.1 <strong> (importance forte)

4.2 <em> (emphase)

4.3 <mark> (mise en surbrillance)

4.4 <small> (commentaire annexe, aside)

4.5 <del> (contenu supprimé) et <ins> (contenu inséré)

5) Listes : <ul>, <ol>, <li>

5.1 Listes non ordonnées : <ul>

5.2 Listes ordonnées : <ol>

5.3 Imbrication de listes

6) Liens hypertextes : <a>

6.1 L’attribut href

6.2 target et rel

6.3 title (info-bulle)

6.4 Autres attributs utiles

7) Images : <img>

7.1 Syntaxe de base

7.2 Dimensions et ratio

7.3 Performance et chargement

7.4 Images responsives : srcset et sizes

7.5 Légendes : <figure> et <figcaption>

7.6 Formats d’image (aperçu)

8) Exercice guidé (avec corrigé)

Consigne

Corrigé possible

9) Pièges fréquents et bonnes pratiques

10) Mini-quiz

11) Fiche-mémo (à coller en fin de poly)

3.1 Titres : `<h1>` à `<h6>`

3.2 Paragraphe : `<p>`

3.3 Saut de ligne et séparation : `<br>`, `<hr>`

4.1 `<strong>` (importance forte)

4.2 `<em>` (emphase)

4.3 `<mark>` (mise en surbrillance)

4.4 `<small>` (commentaire annexe, aside)

4.5 `<del>` (contenu supprimé) et `<ins>` (contenu inséré)

5) Listes : `<ul>`, `<ol>`, `<li>`

5.1 Listes non ordonnées : `<ul>`

5.2 Listes ordonnées : `<ol>`

6) Liens hypertextes : `<a>`

6.1 L’attribut `href`

6.2 `target` et `rel`

6.3 `title` (info-bulle)

7) Images : `<img>`

7.4 Images responsives : `srcset` et `sizes`

7.5 Légendes : `<figure>` et `<figcaption>`