6# Les blocs usuels

Sur cette page :

Les blocs usuels

Nous avons déjà vu la balise <div>,qui permet de marquer une division dans la page. Nous allons maintenant découvrir les blocs les plus courants, que vous préférerez tant que possible à un <div>.

6.1# Le paragraphe `<p>`

La balise paragraphe permet de décrire un paragraphe. Généralement, les marges extérieures inférieures et supérieures sont définies, ainsi, la séparation entre deux paragraphes est visible.

Décrire des paragraphes se fait tout simplement comme ceci :

<p>Ceci est un paragraphe.</p>
<p>Voici un second paragraphe</p>

6.2# Le texte pré-formaté `<pre>`

Le texte pré-formaté permet d’afficher du texte tel qu’il est écrit dans le code source : en respectant les espaces, tabulations et affiché avec une police à largeur fixe (généralement la police utilisée dans un éditeur de texte). C’est cette balise qui est utilisée pour afficher des exemples de code sur plusieurs lignes.

<pre>
  Vous lisez actuellement un exemple
  de texte pré-formaté !
</pre>

6.3# Les listes ordonnées, désordonnées

Les listes ordonnées et désordonnées ont un fonctionnement assez similaire : une liste est déclarée par une balise qui contient un fils par élément de la liste.

Les listes ordonnées sont déclarées avec <ol>, tandis que les listes désordonnées le sont avec <ul>. Un élément de la liste est encadré par la balise <li>.

Voici un exemple :

<ul>
 <li>Un élément</li>
 <li>dans une liste</li>
 <li>désordonnée</li>
</ul>
 
<ol>
 <li>Une liste ordonnée commence par :</li>
 <li>&lt;ol&gt;</li>
 <li>contient des éléments de liste &lt;li&gt;</li>
 <li>et se termine par la balise fermante &lt;/ol&gt;</li>
</ol>

Ces listes vont apparaître ainsi :

Un élément
dans une liste
désordonnée

Une liste ordonnée commence par :
<ol>
contient des éléments de liste <li>
et se termine par la balise fermante </ol>

6.4# Les listes de définitions

Les listes de définitions permettent d’insérer un glossaire dans une page. On déclare un glossaire avec la balise <dl>, un terme à définir est encadré de la balise <dt> et sera suivi de sa définition : <dd>.

<dl>
 <dt>XHTML :</dt>
 <dd>Acronyme pour eXtensible HyperText Markup Langage.
     Ce langage permet de concevoir des pages web.</dd>
 <dt>CSS :</dt>
 <dd>Acronyme pour Cascading Style Sheet. Les feuilles
     de styles CSS permettent de définir l'aspect
     visuel d'une page HTML.</dd>
</dl>

Le résultat à l’écran sera :

XHTML :: Acronyme pour eXtensible HyperText Markup Langage. Ce langage permet de concevoir des pages web.
CSS :: Acronyme pour Cascading Style Sheet. Les feuilles de styles CSS permettent de définir l’aspect visuel d’une page HTML.

6.5# La citation `<blockquote>`

La balise <blockquote> correspond à un bloc de citation, qui selon la norme sera décalé vers la droite par rapport à un paragraphe. Il admet l’attribut cite, optionnel, qui permet d’indiquer l’adresse du document d’origine de la citation.

Attention, l’élément <blockquote> doit obligatoirement contenir un sous élément (un paragraphe par exemple).

<blockquote cite="http://www.w3.org/TR/html401/struct/text.html#h-9.2.2" lang="en">
  <p>Visual user agents generally render BLOCKQUOTE as an indented block.</p>
</blockquote>

Vous aurez probablement remarqué que l’attribut lang a également été utilisé, c’est un attribut qui peut être placé sur la plupart des balises, et qui permet de préciser la langue du contenu de la balise. Par soucis d’accessibilité, il est intéressant de l’utiliser pour marquer un changement de langue par rapport au reste de la page.

6.6# Les titres (headings)

Il existe six niveaux de titres en XHTML, correspondant aux balises allant de <h1> à <h6>. Le titre principal est indiqué dans la balise <h1>, les sous titres permettent une hiérarchie (<h2> étant le premier sous titre, <h6> le plus petit sous titre de section).

<h1>Titre principal</h1>
<h2>Première section</h2>
<p>Voici une section</p>
<h3>Sous-section</h3>
<p>...</p>
<h2>une seconde section section</h2>
<p>Voici une section</p>
<h3>Sous-section</h3>
<p>...</p>
<h4>sous-sous section</h4>
<h5>Encore une !</h6>
<h6>Et la dernière !</h6>

6.7# La ligne horizontale `<hr />`

La ligne horizontale permet de marquer une séparation dans la page. C’est une balise indépendante.

<h2>Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
malesuada feugiat justo. Vivamus ac purus sit amet mi aliquet commodo.
Nam sem libero, sollicitudin et, congue et, condimentum ut, augue ut tempus.
</p>
<hr />
<h2>Section 2</h2>
<p>Etiam adipiscing metus a orci. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Donec posuere. Mauris risus. Aliquam tincidunt
consectetur ligula. Vestibulum non nisi. Cras augue risus, mattis non,
eleifend at, convallis ac, sem. Ut sed dui sed arcu fringilla iaculis.</p>

Voici le résultat à l’écran :

6.1# Le paragraphe <p>

6.2# Le texte pré-formaté <pre>