Quand les faits sont confus, on écrit.
Quand ils sont clairs, on structure.
Un bon rapport ne crie pas. Il impose.
🎯 Objectifs d’apprentissage
À la fin de ce module, vous serez capable de :
- Maîtriser les éléments textuels fondamentaux d’HTML
- Organiser l’information avec une hiérarchie claire
- Donner du sens au contenu pour les humains, les machines… et les moteurs de recherche
🧱 Hiérarchie des titres — Qui commande ici ?
Les titres, c’est la chaîne de commandement.
Mal placés, et tout devient suspect.
🕵️ <h1> — Le titre principal
<h1>Rapport d’enquête : Affaire du site fantôme</h1>
- Un seul par page
- Définit le sujet principal
- Essentiel pour le SEO et l’accessibilité
Un second <h1>, et le dossier perd toute crédibilité.
🗂️ <h2> à <h6> — Les sous-sections
<h2>Contexte de l’affaire</h2>
<h3>Témoins interrogés</h3>
<h4>Déclarations contradictoires</h4>
- Organisation logique
- Pas de saut de niveau (pas de
h2→h4) - Lecture fluide pour les lecteurs d’écran
La hiérarchie raconte l’histoire avant même de la lire.
📝 Paragraphes et séparation du contenu
📄 <p> — Le paragraphe
<p>Le site est apparu à 02:14. À 02:16, il avait disparu.</p>
- Un paragraphe = une idée
- Lisible
- Respirant
↩️ <br> — Le saut de ligne
<p>
Nom : Inconnu<br>
Statut : En fuite
</p>
À utiliser avec parcimonie. Ce n’est pas un paragraphe, juste une pause.
🚧 <hr> — La séparation thématique
<hr>
- Marque un changement de sujet
- Sépare deux parties d’un rapport
- Visuel et sémantique
Un trait, une frontière.
🧠 Mise en forme sémantique — Le sens avant le style
Ici, on ne parle pas de décoration, mais de signification.
🔥 <strong> — Importance critique
<p>Le suspect est <strong>toujours en liberté</strong>.</p>
- Indique une importance forte
- Interprété par les lecteurs d’écran
🎯 <em> — Emphase subtile
<p>Il a <em>prétendu</em> ne rien savoir.</p>
Le doute est dans le mot.
🖍️ <mark> — Élément clé
<p>L’arme a été retrouvée à <mark>03:42</mark>.</p>
On attire l’œil sur ce qui compte.
📎 <small> — Mentions secondaires
<small>Rapport confidentiel — diffusion interdite</small>
- Notes légales
- Mentions annexes
- Informations secondaires
🔢 <sub> et <sup> — Indices et exposants
<p>Formule du dossier : H<sub>2</sub>O</p>
<p>Erreur critique n°2<sup>e</sup> degré</p>
Précision chirurgicale.
🗃️ Listes — Mettre de l’ordre dans le chaos
📌 Liste non ordonnée
<ul>
<li>Preuve manquante</li>
<li>Alibi fragile</li>
<li>Témoin silencieux</li>
</ul>
- Éléments sans ordre précis
- Lecture rapide
🔢 Liste ordonnée
<ol>
<li>Ouverture du dossier</li>
<li>Analyse du code source</li>
<li>Conclusion de l’enquête</li>
</ol>
Chaque étape compte.
📚 Liste de définition
<dl>
<dt>HTML</dt>
<dd>Langage qui structure les faits bruts</dd>
<dt>CSS</dt>
<dd>Ce qui rend le rapport présentable</dd>
</dl>
Parfait pour les glossaires et rapports techniques.
🗣️ Citations et références — Les voix extérieures
📜 <blockquote> — Citation longue
<blockquote>
"Le site n’a jamais existé.
Ou alors, personne ne devait le voir."
</blockquote>
- Témoignage
- Extrait de rapport
- Voix extérieure claire
💬 <q> — Citation courte
<p>Le suspect a dit : <q>je n’ai rien à cacher</q>.</p>
Discret, mais précis.
🏷️ <cite> — Source ou référence
<p>
<cite>Rapport interne — Division Web Crimes</cite>
</p>
Toujours citer ses sources. C’est comme ça qu’on tient devant un tribunal.
Fin du module 3. Le rapport est lisible. La vérité commence à émerger.