Structure du texte

Chapitre 2 • Bases du texte

Le HTML (HyperText Markup Language) sert avant tout à structurer l'information. Contrairement à un document texte brut, un bon site web ne présente pas son contenu en vrac, mais l'organise de manière logique et hiérarchisée.

Avantages d'une bonne structure :

  • Lisibilité améliorée : Une structure claire permet aux visiteurs de mieux comprendre et naviguer dans votre contenu
  • Optimisation SEO : Les moteurs de recherche utilisent la structure HTML pour évaluer et indexer votre contenu
  • Accessibilité : Les technologies d'assistance comme les lecteurs d'écran s'appuient sur la structure pour restituer le contenu
  • Maintenance facilitée : Un code bien structuré est plus facile à modifier et à maintenir

Exemple de structure

<h1>Titre principal de la page</h1>
<p>Introduction au sujet traité sur cette page.</p>

<h2>Première section importante</h2>
<p>Contenu détaillant le premier point clé.</p>

<h2>Deuxième section importante</h2>
<p>Contenu détaillant le deuxième point clé.</p>

Comment fonctionne HTML ?

HTML utilise des balises pour organiser le contenu :

<balise>contenu</balise>

Astuce visuelle

Les balises fonctionnent comme des étiquettes de début et de fin. Pensez à des parenthèses qui s'ouvrent et se ferment.

Les titres : h1 à h6

Chapitre 2 • Bases du texte

Les titres en HTML sont définis par les balises <h1> à <h6>, où <h1> représente le niveau le plus important et <h6> le moins important.

Exemple complet

<h1>Titre principal</h1>
<h2>Sous-titre</h2>
<h3>Sous-section</h3>
<h4>Sous-sous-section</h4>
<h5>Titre mineur</h5>
<h6>Titre le moins important</h6>

Rendu visuel

Titre principal

Sous-titre

Sous-section

Sous-sous-section

Titre mineur
Titre le moins important

Bonnes pratiques pour les titres

  • Commencez toujours par un <h1> : C'est le titre principal de votre page
  • Maintenez une hiérarchie logique : Ne sautez pas de niveaux (pas de <h1> suivi directement par <h3>)
  • Un seul <h1> par page : Réservé au titre principal
  • Soyez concis et descriptif : Les titres doivent résumer clairement le contenu qui suit

Importance pour le SEO

Les moteurs de recherche utilisent les balises de titre pour comprendre la structure et l'importance du contenu. Une bonne hiérarchie de titres peut améliorer votre classement dans les résultats de recherche.

Les paragraphes : p

Chapitre 2 • Bases du texte

La balise <p> est l'élément de base pour organiser le texte en paragraphes distincts.

Exemple d'utilisation

<p>Ceci est un paragraphe de texte. 
En HTML, chaque bloc de texte distinct doit être 
encadré par des balises <p>.</p>

<p>Voici un deuxième paragraphe. 
Notez qu'il est séparé du premier par un espace, 
ce qui améliore la lisibilité.</p>

Erreurs courantes à éviter

  • Oublier de fermer la balise <p>
  • Utiliser des sauts de ligne <br> pour créer des paragraphes au lieu de balises <p> distinctes
  • Imbriquer des balises <p> les unes dans les autres (ce n'est pas valide en HTML)

Espacement entre paragraphes

Par défaut, les navigateurs ajoutent une marge verticale entre les paragraphes. Vous pouvez personnaliser cet espacement avec CSS :

p {
    margin-bottom: 1.5em; /* Ajustez cette valeur selon vos besoins */
}

Les sauts de ligne : br

Chapitre 2 • Bases du texte

La balise auto-fermante <br> permet d'insérer un saut de ligne à l'intérieur d'un paragraphe ou d'un autre élément de texte.

Exemple d'utilisation

<p>Première ligne de texte.<br>
Deuxième ligne dans le même paragraphe.</p>

Quand utiliser <br> ?

Les sauts de ligne sont appropriés pour :

  • Les adresses postales
  • Les poèmes ou les paroles de chansons
  • Les cas où le formatage du texte nécessite des sauts de ligne précis

Attention aux mauvaises pratiques

N'utilisez pas <br> pour :

  • Créer de l'espace entre des paragraphes (utilisez plutôt des balises <p> séparées)
  • Créer une mise en page complexe (utilisez CSS à la place)
  • Ajouter plusieurs sauts de ligne consécutifs (c'est une mauvaise pratique d'accessibilité)

Mise en valeur du texte

Chapitre 2 • Bases du texte

HTML propose plusieurs balises pour mettre en valeur des portions de texte :

Texte important

<strong>Ce texte est important</strong>

Rendu : Ce texte est important

À utiliser pour le texte qui a une forte importance dans le contexte.

Texte accentué

<em>Ce texte est accentué</em>

Rendu : Ce texte est accentué

Utilisé pour mettre l'accent sur un mot ou une phrase.

Texte surligné

<mark>Texte mis en évidence</mark>

Rendu : Texte mis en évidence

Parfait pour souligner l'importance dans un contexte particulier.

Autres balises de mise en forme

Code informatique

<code>console.log('Hello')</code>

Rendu : console.log('Hello')

Citation courte

<q>Citation courte</q>

Rendu : Citation courte

Indice et exposant

H<sub>2</sub>O
E = mc<sup>2</sup>

Rendu : H2O et E = mc2

Ne confondez pas avec les balises obsolètes

Évitez d'utiliser :

  • <b> et <i> qui sont purement visuels
  • <font>, <center>, <big> qui sont dépréciés

Préférez les balises sémantiques comme <strong>, <em> et utilisez CSS pour le style visuel.

Erreurs fréquentes

Chapitre 2 • Bases du texte

Pièges courants à éviter

Hiérarchie de titres incorrecte

<h1>Titre principal</h1>
<h3>Sous-titre</h3> <!-- Oubli du h2 -->

Solution : Toujours suivre l'ordre hiérarchique (h1 → h2 → h3...)

Abus des sauts de ligne

<p>Première ligne<br><br><br>
Deuxième ligne</p>

Solution : Utiliser des balises <p> séparées et CSS pour l'espacement

Balises non fermées

<p>Paragraphe sans fermeture
<p>Autre paragraphe</p>

Solution : Toujours fermer les balises correctement

Bonnes pratiques pour un code propre

  • Indentez votre code : Cela améliore grandement la lisibilité
  • Utilisez des commentaires : Pour expliquer les sections complexes
  • Validez votre HTML : Avec le validateur W3C pour détecter les erreurs
  • Pensez accessibilité : Une bonne structure profite à tous les utilisateurs

En résumé

Chapitre 2 • Conclusion

Titres

De <h1> à <h6> pour structurer votre contenu

Paragraphes

Balise <p> pour chaque bloc de texte

Sauts de ligne

<br> avec modération pour les sauts de ligne internes

Mise en valeur

<strong>, <em>, <mark> pour le texte important

Vous maîtrisez maintenant les bases essentielles de la structuration du texte en HTML. Ces éléments sont les fondations de tout document web bien construit. Dans le prochain chapitre, nous aborderons les listes (ordonnées, non ordonnées et de définition) et leur utilisation pour organiser l'information.