CSS Débutants

Vous êtes ici > Index | Cours | CSS débutants | <blockquote> et retraits

Blockquote et retraits

Tout débutant (enfin, beaucoup...) en création de page web constate que l'utilisation balise blockquote induit un retrait du texte. Déduction : la balise blockquote est faite pour mettre un texte en retrait...

Et bien non ! Elle n'est pas du tout faite pour cela. "Quote" en anglais veut dire "citer". La balise blockquote doit donc être utilisée pour mettre en relief un "bloc" de citation.
Exemple :

L'élément BLOCKQUOTE indique une citation longue (avec un contenu de type bloc) et l'élément Q est censé être utilisé pour des citations courtes (avec un contenu de type en-ligne) ne nécessitant pas un saut de paragraphe.

L'utilisation de l'élément BLOCKQUOTE pour obtenir le retrait d'un texte est déconseillée en faveur de l'utilisation de feuilles de style.

Source (x)html

  
<blockquote cite="http://www.la-grange.net/w3c/html4.01/struct/text.html#h-9.2.2">
<p>
L'élément BLOCKQUOTE indique une citation longue 
(avec un contenu de type bloc) et l'élément Q 
est censé être utilisé pour des citations courtes 
(avec un contenu de type en-ligne) ne nécessitant 
pas un saut de paragraphe.
</p>
<p>L'utilisation de l'élément BLOCKQUOTE 
pour obtenir le retrait d'un texte est déconseillée 
en faveur de l'utilisation de feuilles de style.
</p>
</blockquote>

Tout est dit dans cet extrait des spécifications du html 4.01. Pour obtenir un retrait, il faut donc utiliser les CSS.

Pour induire le retrait d'un paragraphe, on lui assignera une marge gauche (margin-left) d'autant de pixels que souhaités.
Si l'on désire répeter plusieurs fois cette mise en forme dans la page, il sera évidemment préférable d'utiliser le sélecteur class.

Source CSS

.retrait {
margin-left:50px;
}

Source (x)html

<p class="retrait">
Ce paragraphe est en retrait de 50 pixels 
du bord gauche.
</p>

Résultat

Ce paragraphe est en retrait de 50 pixels du bord gauche.

Haut de page