Citations et retraits

Tout débutant (enfin, beaucoup...) en création de page web constate que l'utilisation de la 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". Cette balise doit donc être utilisée pour mettre en relief un "bloc" de citation.

Il y a d'autres méthodes pour faire des retraits que d'utiliser la balise blockquote.

N'hésitez pas à nous faire part de votre avis sur cet article : Commentez Donner une note à l'article (4.5)

Article lu   fois.

Les deux auteurs

Site personnel

Profil Pro

I. Bloc de citation

Image non disponible 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
Sélectionnez

<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>
            

Voir l'exemple.

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

II. Faire des retraits

Fonctionne avec :
  • Tous les navigateurs graphiques.
Attributs utilisés :
  • margin-left ;
  • text-indent.

II-A. Retrait de tout un paragraphe

Pour induire le retrait d'un paragraphe, on peut lui assigner 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.

Code CSS
Sélectionnez

.retrait {
  margin-left:50px;
}
                
Code (X)HTML
Sélectionnez

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

Voir l'exemple.

II-B. Retrait de la première ligne d'un paragraphe

Si on ne veut faire un retrait que sur la première ligne d'un paragraphe, c'est alors le text-indent qu'il faut utiliser.

Code CSS
Sélectionnez

.retrait {
  text-indent:50px;
}
                
Code (X)HTML
Sélectionnez

<p class="retrait">
  La première ligne de ce paragraphe est en retrait de 50 pixels. 
  Le reste du texte est aligné normalement. Lorem ipsum dolor sit amet, 
  consectetur adipiscing elit. Duis eget ligula quis libero mollis dapibus. 
  Suspendisse potenti. Nullam facilisis neque et sem. Proin placerat adipiscing urna.
  Aenean sollicitudin.
</p>
                
Image non disponible

Voir l'exemple.

Liste de mes articles :
Principe des feuilles de style CSS - Commentez Donner une note à l'article (5)
Balises (X)HTML de base - 1 commentaire Donner une note à l'article (4.5)
Feuille de style CSS de base - Commentez Donner une note à l'article (3.5)
Mettre en forme un texte en CSS - Commentez Donner une note à l'article (4)
Gérer les marges en CSS - 5 commentaires Donner une note à l'article (4.5)
Résoudre les problèmes de marges en CSS - Commentez Donner une note à l'article (4)
Sélecteurs class et id - 3 commentaires Donner une note à l'article (5)
Mise en page full CSS - 4 commentaires Donner une note à l'article (4.5)
Bordures en CSS - 2 commentaires Donner une note à l'article (4.5)
Image de fond en CSS - 3 commentaires Donner une note à l'article (4.5)
Effets Rollover à l'aide de :hover - 2 commentaires Donner une note à l'article (4.5)
Aligner une image et du texte à l'aide de la propriété float - 1 commentaire Donner une note à l'article (4)
Listes à puces en image - 2 commentaires Donner une note à l'article (5)
Citations et retraits - Commentez Donner une note à l'article (4.5)
Concevez des boutons graphiques avec du CSS - 11 commentaires Donner une note à l'article (4.5)
Positionnez des images aux quatre coins d'une page web - 16 commentaires Donner une note à l'article (5)
Appliquez un effet de zoom sur une image avec les CSS - 1 commentaire Donner une note à l'article (4.5)
Zoomer une image façon thumbnail en CSS - 3 commentaires Donner une note à l'article (4.5)
Tableaux à bordures fines avec les CSS - 1 commentaire Donner une note à l'article (5)
  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 20/07/2010 Pascale Lambert. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.