3: Organiser le texte

Qu'allez-vous apprendre ?

Apprendre à organiser et formater le texte dans une page HTML pour un contenu clair et structuré.

Suivez ce chapitre à la lettre

Dans ce chapitre, nous allons découvrir comment structurer et organiser le texte dans vos pages HTML. Même si vous codez sur smartphone avec SPCK Editor, ces principes restent essentiels pour créer des sites lisibles et bien structurés.

Chapitre 3: Organiser le texte en HTML

Le texte est l’élément principal de la majorité des sites web. Savoir organiser correctement le texte permet de rendre une page claire, lisible et compréhensible aussi bien pour les utilisateurs que pour les moteurs de recherche comme Google.

Dans ce chapitre, tu vas apprendre à structurer le texte avec les titres, les paragraphes et le formatage simple. Ces balises sont parmi les plus utilisées en HTML et constituent la base de tout contenu web.

  1. Les titres HTML :
    Les balises <h1> à <h6> servent à structurer le contenu par importance. <h1> est le titre principal, <h6> le moins important.
  2. Règle essentielle :
    Une page doit contenir un seul <h1>, représentant le sujet principal de la page.
  3. Les paragraphes :
    La balise <p> permet d’écrire du texte structuré en blocs lisibles.
  4. Le texte en gras :
    La balise <strong> sert à mettre en valeur un mot ou une phrase importante.
  5. Le texte en italique :
    La balise <em> est utilisée pour insister sur un mot ou une idée.
  6. Différence entre <strong> et <b> :
    <strong> a une importance sémantique, <b> est uniquement visuel.
  7. Les sauts de ligne :
    <br> permet de passer à la ligne sans créer un nouveau paragraphe.
  8. Bonne pratique :
    Utilise <p> pour structurer le texte, pas des multiples <br>.
  9. Lisibilité :
    Un texte bien structuré est plus agréable à lire sur mobile.
  10. Accessibilité :
    Les lecteurs d’écran utilisent les titres pour naviguer dans une page.

Exemples pratiques :

<h1>Apprendre le HTML</h1>
      
<h2>Introduction</h2>
      
<p>HTML est le langage de base du Web.</p>
      
<p>Ce texte est <strong>important</strong>.</p>
      
<p>Ce mot est <em>souligné</em> par l’italique.</p>
      
<p>Ligne 1<br>Ligne 2</p>
      
<h3>Sous-partie</h3>
      
<h4>Détail</h4>
      
<p>Texte lisible sur mobile</p>
      
<p>Structure claire et propre</p>

Exercices pratiques :

  1. Crée un titre principal avec <h1>.
  2. Ajoute deux sous-titres avec <h2>.
  3. Écris trois paragraphes avec <p>.
  4. Mets un mot important en <strong>.
  5. Ajoute un mot en <em>.
  6. Teste un saut de ligne avec <br>.
  7. Vérifie la lisibilité sur mobile.
  8. Ajoute un <h3> sous un <h2>.
  9. Supprime les <br> inutiles.
  10. Relis ton texte et améliore sa clarté.

Bien organiser le texte est une compétence essentielle pour tout développeur web. Avant même d’ajouter du style avec le CSS, une page HTML bien structurée doit être compréhensible uniquement avec ses balises.

Passer au chaitre 04-->