Les conteneurs de texte

Bien utiliser les conteneurs de texte

Après avoir vu les conteneurs de structure, attelons-nous aux conteneurs de texte. À nouveau, nous devons utiliser des conteneurs sémantiques pour insérer des types de textes précis dans nos pages web.

Notez que tous ces éléments sont de type block. Cela implique qu’ils s’affichent sur toute la largeur disponible dans leur conteneur parent, qui peut être l’élément <body> ou tout autre conteneur de type block. Donc le conteneur suivant, quel qu’il soit, s’affichera sur une nouvelle ligne, dans un nouveau bloc.

Sachez aussi que pour ces éléments en bloc, les navigateurs insèrent un espace avant et après. Vous pourrez modifier ces espaces avec des règles CSS.

Les attributs de langue et de direction du texte

Dans toute page web, vous pouvez parfaitement spécifier la langue utilisée dans un conteneur de texte avec l’attribut lang. Nous avons vu son utilisation dans l’élément <html> pour indiquer la langue utilisée dans l’ensemble de la page. Mais vous pouvez parfaitement faire une exception pour un conteneur de texte précis.

Nous pourrions parfaitement avoir cette syntaxe dans une partie spécifique d’un paragraphe rédigé en français, où la langue est de l’italien :

<p>Il m'a dit <span lang="it">Ciao a tutti! Come state ?</span> 
quand nous nous sommes vus.</p>

En plus de la langue, vous pouvez spécifier la direction d’écriture avec l’attribut dir. Cet attribut utilise ces trois valeurs :

ltr : qui signifie left to right, écriture de gauche à droite, comme le français ou l’italien par exemple.
rtl : qui signifie right to left, écriture de droite à gauche, comme l’arabe par exemple.
auto : dans ce cas, c’est l’agent utilisateur qui détecte lui-même la direction de l’écriture.

Voici un exemple avec un paragraphe en arabe :

Les titres

Les éléments de titrage permettent d’insérer six niveaux de titre hiérarchique aux pages. Les éléments à utiliser sont <h1> à <h6>. Ces titres ont une très forte valeur sémantique. Le niveau de titre <h1> est le plus important dans la page et le niveau <h6> est le moins important.

Le W3C conseille fortement de les utiliser dans l’ordre descendant : vous devez d’abord utiliser un titre de niveau 1, puis un titre de niveau 2 et ainsi de suite. Il est déconseillé d’omettre un niveau, comme passer de <h1> à <h3>, en omettant le <h2>.

Notez bien que vous pouvez parfaitement utiliser plusieurs fois le même niveau de titre dans des conteneurs différents. Nous pouvons parfaitement imaginer avoir l’élément <section> avec un titre <h1> qui contient plusieurs éléments <article> ayant chacun un titre <h2>. Puis ailleurs, dans un élément <aside> par exemple, nous pouvons utiliser d’autres éléments <h1> et <h2>.

Les titres <hx> possèdent aussi une forte utilité pour l’indexation naturelle de vos pages web : SEO (Search Engine Optimization). Vous devez donc penser à utiliser des mots susceptibles d’être utilisés par les internautes lors...

Les paragraphes

L’élément <p> permet d’insérer du texte courant dans des paragraphes. Comme pour tous les écrits, chaque paragraphe pourra contenir une idée, un concept. Dans chaque paragraphe, vous pouvez mettre en évidence un ou des mots avec des éléments de mise en forme sémantique.

Voici les propriétés d’affichage par défaut des paragraphes :

p { 
  display: block; 
  margin-top: 1em; 
  margin-bottom: 1em; 
  margin-left: 0; 
  margin-right: 0; 
}

Voici un exemple simple :

<!doctype html> 
<html lang="fr"> 
   <head> 
       <meta charset="UTF-8"> 
       <title>Ma page web</title> 
   </head> 
   <body> 
       <p>Morbi leo risus, porta ac consectetur...</p> 
       <p>Nullam quis risus eget urna mollis ornare...</p> 
   </body> 
</html>

Voici l’affichage obtenu :

Les citations

Les blocs de citation permettent d’afficher un texte extrait d’une source externe. C’est l’élément <blockquote> qui est utilisé. L’élément <blockquote> sert de conteneur à d’autres éléments qui peuvent être de tout type : titre, paragraphe, image…

Voici les propriétés d’affichage par défaut des citations :

blockquote { 
   display : block ; 
   margin-top: 1em; 
   margin-bottom: 1em; 
   margin-left: 40px; 
   margin-right: 40px; 
}

Voici un exemple simple :

<!doctype html> 
<html lang="fr"> 
   <head> 
       <meta charset="UTF-8"> 
       <title>Ma page web</title> 
   </head> 
   <body> 
       <h1>Inceptos Consectetur Tristique Bibendum</h1> 
       <p>Morbi leo risus, porta ac consectetur...</p> 
       <blockquote> 
           <h2>Fusce Mattis Ligula Etiam</h2> 
           <p>Nullam id dolor id nibh...</p> 
           <img...

Les listes

1. Les différents types de liste

Les listes permettent d’insérer des énumérations sémantiques dans vos pages web. Vous avez trois types de liste à votre disposition : les listes non ordonnées (plus communément appelées listes à puces), les listes ordonnées (listes numérotées) et les listes de définitions.

Notez l’usage très répandu des listes pour créer des barres de navigation. C’est une utilisation parfaitement valide puisque ces barres sont des énumérations, des listes de liens.

2. Les listes non ordonnées

Les listes non ordonnées (unordered list en anglais) permettent de lister, d’énumérer des données qui s’afficheront avec une puce devant chaque élément de la liste. C’est l’élément <ul> qui est utilisé pour définir la liste. Ensuite, chaque élément, chaque item de la liste, sera placé dans un élément <li>.

Voici les propriétés d’affichage par défaut des listes non ordonnées :

ul { 
  display: block; 
  list-style-type: disc; 
  margin-top: 1em; 
  margin-bottom: 1em; 
  margin-left: 0; 
  margin-right: 0; 
  padding-left: 40px; 
}

Voici un exemple simple :

<!doctype html> 
<html lang="fr"> 
   <head> 
       <meta charset="UTF-8"> 
       <title>Ma page web</title> 
   </head> 
   <body> 
       <ul> 
           <li>Pommes</li> ...

Les adresses

Il n’est pas rare d’avoir besoin d’insérer des adresses en tout genre dans vos pages web. Pour cela, vous devez utiliser l’élément <address> qui est dédié à cet usage. Vous pourrez y placer des adresses postales, des adresses mail, etc. Dans cet élément, vous pouvez imbriquer les autres conteneurs que vous souhaitez.

Voici les propriétés d’affichage par défaut des adresses :

address { 
  display: block; 
  font-style: italic; 
}

Voici un exemple simple :

<!doctype html> 
<html lang="fr"> 
   <head> 
       <meta charset="UTF-8"> 
       <title>Ma page web</title> 
   </head> 
   <body> 
       <p>Voici nos coordonnées :</p> 
       <address> 
           <p>Agence Be Web</br> 
           12 rue Tim Berners Lee<br> 
           44000 NANTES</p> 
           <p>Sur LinkedIn : <a href="https://linkedin.com/beweb/"> 
Be Web</a>.</p> 
       </address> ...

Le texte préformaté

Le texte préformaté, inséré avec l’élément <pre>, permet d’insérer du texte qui sera mis en forme avec les conventions typographiques usuelles et non pas avec des éléments HTML. Cela veut dire que les espaces seront conservés, comme les marques de tabulation, et le texte sera usuellement affiché avec une police de caractères à espace constant, de type Courier.

Voici les propriétés d’affichage par défaut du texte préformaté :

pre { 
  display: block; 
  font-family: monospace; 
  white-space: pre; 
  margin: 1em 0; 
}

Voici un exemple simple :

<!doctype html> 
<html lang="fr"> 
   <head> 
       <meta charset="UTF-8"> 
       <title>Ma page web</title> 
   </head> 
   <body> 
       <p>Voici nos données :</p> 
       <pre> 
       Janvier    Février    Mars 
       123    134    154 
       245    276    287 ...

Les données numériques

Dans votre page web, vous pouvez être amené à afficher des données textuelles provenant d’un système externe à votre site qui doivent être reliées à des valeurs numériques. Pour bien gérer cela, vous pouvez utiliser l’élément <data>.

Voici un exemple très simple qui affiche des nouveaux produits qui possèdent un code dans le système externe de gestion des produits.

<p>Les nouveaux produits :</p>  
<ul>  
  <li><data value="123XA">Chaussures de marche</data></li>  
  <li><data value="47BZ32"></data>Short kaki</li>  
  <li><data value="V147P">Tente 1 personne</data></li>  
</ul>

Voici l’affichage obtenu avec Google Chrome :

Dans la page HTML, l’attribut value pourra être utilisé dans un script.

Les lignes horizontales

Cet élément <hr> ne contient pas de texte et n’affiche qu’une ligne horizontale qui permet de séparer différentes parties d’un contenu.

Voici les propriétés d’affichage par défaut des lignes horizontales :

hr { 
  display: block; 
  margin-top: 0.5em; 
  margin-bottom: 0.5em; 
  margin-left: auto; 
  margin-right: auto; 
  border-style: inset; 
  border-width: 1px; 
}

Voici un exemple simple :

<!doctype html> 
<html lang="fr"> 
   <head> 
       <meta charset="UTF-8"> 
       <title>Ma page web</title> 
   </head> 
   <body> 
       <h1>Magna Etiam Parturient Inceptos</h1> 
       <p>Maecenas faucibus mollis interdum. Aenean eu leo quam. 
Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum  
sociis natoque penatibus et magnis dis parturient montes, nascetur 
ridiculus mus. Duis mollis, est non commodo luctus, nisi erat  
porttitor ligula, eget lacinia odio sem nec elit. Cum sociis  
natoque penatibus et magnis dis parturient montes, nascetur  
ridiculus mus.</p> 
 ...