alainericgauthier.com

construire une présence sur le web

Apprendre HTML5 : les blocs de texte

Web

Depuis le début de cette série, nous avons vu la structure de base d'un document HTML5. Nous avons ensuite vu les éléments qui permettent de créer des sections à l'intérieur du corps d'une page web.

Dans cet article, nous verrons un liste partielle des éléments de niveau bloc de texte qui ont une valeur sémantique.

Qu'est-ce qu'une valeur sémantique? Pour simplifier, disons que chaque partie d'un texte a une fonction. Par exemple, un paragraphe regroupe des phrases qui expriment une idée. Dans un texte bien structuré, un paragraphe contient une idée.

Le même concept s'appliquent aux listes. Bien qu'il soit possible d'énumérer des items à même un phrase, la liste permet de distinguer les différents items d'une énumération et parfois même, dans le cas de la liste numérotée, de les ordonner.

Suivant cette idée, nous verrons ici les éléments les plus fréquemment utilisés pour baliser les blocs de texte dans des pages HTML5.

À la fin de cet article, nous verrons un exemple concret.

Les éléments

Paragraphe

<p>

Cet élément est un paragraphe de texte. Tous les paragraphes d'un texte sont séparés par un espace vertical appelé alinéa. Parfois, le premier mot de la première ligne est en retrait pour renforcer la séparation des paragraphes.

Ligne horizontale

<hr>

Dans les anciennes versions d'HTML, l'élément <hr> plaçait une linge horizontale dans la page. Dans HTML5, bien que les navigateurs peuvent afficher un ligne horizontale, l'élément <hr> a une fonction particulière, il représente un changement de thème entre 2 paragraphes.

Les listes

Dans HTML5 il existe trois types de liste. Certaines peuvent prendre des apparences nombreuses grâce au CSS. Dans cet article, nous nous limiterons à l'affichage le plus fréquemment utilisé.

  • <ol> : liste numérotée
  • <ul> : liste à puce
  • <dl> : liste de définition

Le contenu des listes

Chaque liste contient une série d'items. Selon le type de liste, un élément servira à baliser ces items.

  • <li> : pour les listes numérotées et les liste à puce
  • <dt> : pour un terme dans une liste de définitions
  • <dd> : pour une définition dans une liste définitions.

Exemple de blocs de texte

Disons que nous avons un court texte à propos des fruits et des légumes et que nous voulons le mettre en HTML5. Voici une des solutions possible.

<p>Il existe deux sous-catégories des produits de culture végétale :</p>
<ol>
  <li>Les fruits</li>
  <li>et les légumes.</li>
</ol>
<p>À titre d'exemple, les végétaux suivants font partie des fruits :</p>
<ul>
  <li>les pommes,</li>
  <li>les bananes</li>
  <li>et les oranges.</li>
</ul>
<p>Dans la catégorie des légumes, nous retrouverons les végétaux suivants :</p>
<ul>
  <li>les patates douces,</li>
  <li>les asperges</li>
  <li>et le brocoli.</li>
</ul>
<hr>
<p>D'une manière générale, nous pouvons, dans la langage courant, définir les fruits et les légumes comme suit :</p>
<dl>
  <dt>Fruit :</dt><dd> un aliment végétal, à la saveur sucrée, généralement consommé cru au dessert</dd>
  <dt>Légume :</dt><dd> partie comestible d'une plante potagère</dd>
</dl>
<p>Source : fr.wikipedia.org</p>

Notez bien qu'il s'agit d'une solution parmi tant d'autres. Par exemple, l'usage de liste à puce n'est pas nécessaire. Il s'agit d'un choix.

Dans le prochain article nous verrons les éléments de niveau textuel.