Partie 4 — Texte & contenu : titres, paragraphes, listes et citations

Quand on parle de création de sites web, beaucoup de personnes pensent immédiatement au design ou aux animations. Pourtant, dans la majorité des cas, un site web est avant tout du texte bien structuré.

Articles, pages d’accueil, pages de services, blogs, documentation, pages de formation… Tout repose sur la manière dont le texte est organisé.

Dans cette partie, vous allez apprendre à utiliser le HTML pour structurer le contenu textuel de façon claire, logique et professionnelle, exactement comme sur de vrais sites.

👉 Un bon contenu commence toujours par une bonne structure.

1) Les titres HTML : organiser l’information

Les titres permettent de structurer une page et de guider le lecteur. En HTML, ils vont de <h1> à <h6>.

Chaque niveau a une importance précise :

• <h1> : titre principal de la page
• <h2> : grandes sections
• <h3> : sous-sections
• <h4> à <h6> : détails

Exemple réel : page d’article de blog

<h1>Apprendre le HTML facilement</h1>

<h2>Pourquoi apprendre le HTML</h2>
<p>Le HTML est la base de tous les sites web.</p>

<h2>Les bases à connaître</h2>

<h3>Les balises</h3>
<p>Les balises permettent de structurer le contenu.</p>

<h3>La hiérarchie</h3>
<p>Une bonne hiérarchie améliore la lisibilité.</p>
  

❌ Erreur fréquente : utiliser les titres uniquement pour agrandir le texte.

2) Les paragraphes : rendre le texte lisible

Les paragraphes sont créés avec la balise <p>. Chaque idée importante devrait être dans son propre paragraphe.

Exemple réel : page de présentation

<p>
  Nous aidons les débutants à apprendre le développement web étape par étape.
</p>

<p>
  Nos tutoriels sont conçus pour être simples, clairs et pratiques.
</p>
  

Bonnes pratiques :

• Un paragraphe = une idée
• Éviter les blocs de texte trop longs
• Penser au confort de lecture

3) Mettre en valeur le texte (importance sémantique)

HTML permet aussi de donner de l’importance à certains mots ou phrases, sans faire du design.

Balises importantes

• <strong> : importance forte
• <em> : emphase

<p>
  Apprendre le <strong>HTML</strong> est essentiel pour tout développeur web.
</p>

<p>
  Il est <em>important</em> de bien structurer son contenu.
</p>
  

Ces balises ont un sens sémantique fort pour :

• les moteurs de recherche
• les lecteurs d’écran
• l’accessibilité

4) Les listes : organiser l’information clairement

Les listes sont partout sur le Web : menus, fonctionnalités, étapes, avantages, conditions.

Liste non ordonnée (ul)

Utilisée quand l’ordre n’est pas important.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>
  

Liste ordonnée (ol)

Utilisée pour des étapes ou un ordre précis.

<ol>
  <li>Installer l’éditeur</li>
  <li>Créer le fichier HTML</li>
  <li>Ajouter le CSS</li>
</ol>
  

Exemple réel : section fonctionnalités

<h2>Ce que vous allez apprendre</h2>
<ul>
  <li>Créer des pages HTML propres</li>
  <li>Styliser avec CSS</li>
  <li>Rendre un site responsive</li>
</ul>
  

5) Les citations : mettre en avant une idée ou une phrase

Les citations servent à mettre en avant une phrase importante, une définition ou une réflexion.

Citation courte (inline)

<p>
  Comme on dit souvent, <q>le HTML décrit le contenu, pas le design</q>.
</p>
  

Citation longue (blockquote)

<blockquote>
  <p>
    Un site bien structuré est plus facile à lire, à maintenir
    et à référencer sur les moteurs de recherche.
  </p>
</blockquote>
  

Les citations sont souvent utilisées dans :

• articles de blog
• pages éducatives
• contenu motivationnel

6) Exemple complet réel : section de page

<h1>Formation HTML & CSS</h1>

<p>
  Cette formation est destinée aux débutants souhaitant apprendre
  le développement web depuis zéro.
</p>

<h2>À qui s’adresse cette formation</h2>
<ul>
  <li>Débutants complets</li>
  <li>Autodidactes</li>
  <li>Créateurs de sites</li>
</ul>

<h2>Programme</h2>
<ol>
  <li>Comprendre le Web</li>
  <li>Maîtriser le HTML</li>
  <li>Styliser avec CSS</li>
</ol>

<blockquote>
  <p>
    Apprendre les bases correctement vous fera gagner des années plus tard.
  </p>
</blockquote>
  

7) Erreurs fréquentes à éviter

• Tout mettre dans un seul paragraphe
• Utiliser des <div> à la place des balises de texte
• Ignorer la hiérarchie des titres
• Styliser le texte sans penser au sens

👉 Le HTML sert à structurer le contenu, le CSS s’occupe du visuel.

Vous savez maintenant structurer correctement le texte d’une page web : titres clairs, paragraphes lisibles, listes organisées et citations pertinentes.

Dans la Partie 5, nous allons apprendre à créer des liens et une navigation claire entre les pages : ancres, URLs et menus simples.

✅ Un bon contenu bien structuré est déjà un site de qualité.