La balise <blockquote> définit une citation. Des exemples en Markdown et en Html.

En Markdown 

Citation courte 

>une citation courte

une citation courte

Citation plus longue avec des retours à la ligne 

>Une citation plus longue :    
Paroles, ou phrase, passage, texte empruntés à un auteur et que l'on reproduit textuellement, 
de vive voix ou par écrit, pour illustrer, éclairer ou appuyer ce que l'on veut dire.     
Faire des citations ; recueil, choix, rapprochement de citations ; le goût des citations ; 
une citation exacte, tronquée.   
Synon. emprunt, extrait.    
Je prépare longuement le discours où j'intercale à propos quelques citations latines.

Une citation plus longue :
Paroles, ou phrase, passage, texte empruntés à un auteur et que l’on reproduit textuellement, de vive voix ou par écrit, pour illustrer, éclairer ou appuyer ce que l’on veut dire.
Faire des citations ; recueil, choix, rapprochement de citations ; le goût des citations ; une citation exacte, tronquée.
Synon. emprunt, extrait.
Je prépare longuement le discours où j’intercale à propos quelques citations latines.

Grâce au CSS, il est possible d’améliorer l’affichage de ces citations.
Il faudra alors quitter le Markdown pour retrouver le Html.

Le Html 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="quote">
  <blockquote>
   <p>
	Non mais t'as déjà vu ça ?  <br />
	En pleine paix !  <br />
	Il chante et puis crac, un bourre-pif !  <br />
	Il est complètement fou ce mec.  <br />
	Mais moi, les dingues, je les soigne.  <br />
	Je vais lui faire une ordonnance, et une sévère…  <br />
	Je vais lui montrer qui c'est Raoul.  <br />
	Aux quatre coins de Paris qu'on va le retrouver, 
	éparpillé par petits bouts, façon puzzle.  <br />
	Moi, quand on m'en fait trop, je correctionne plus : 
	je dynamite, je disperse, je ventile !      
   </p>
  </blockquote>
</div>
   <p class="credit">
	Bernard <span class="auteur">Blier</span>, <strong>
	Les Tontons flingueurs</strong> (1963), 
	écrit par Michel <span class="auteur">Audiard</span>
  </p>

Le CSS 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.quote {
  position:relative;
  width:90%;
  padding:10px  20px;
  margin:10px auto;
  font:italic 16px/1.4 Georgia, serif;
  color:#61581B;
  background:#F2E16E;
  margin-bottom:40px;
  border-radius: 10px;
   }
.quote:after {
  content:"";
  position:absolute;    
  top:100%;
  left:25px;
  border-width:30px 30px 0 0;
  border-style:solid;
  border-color:#F2E16E transparent;
  -webkit-transform:skewX(-15deg);
  -moz-transform:skewX(-15deg);-ms-transform:skewX(-15deg);
  -o-transform:skewX(-15deg);	         
  transform:skewX(-15deg);
 }
 .credit {
  margin:1em 0 0;
  font:14px/1.2 Arial, sans-serif;
 }
 .credit:before {
  content:"— ";
}	 
blockquote, p {
  padding:0; 
  margin:0;
}

Résultat 

Non mais t’as déjà vu ça ?
En pleine paix !
Il chante et puis crac, un bourre-pif !
Il est complètement fou ce mec.
Mais moi, les dingues, je les soigne.
Je vais lui faire une ordonnance, et une sévère…
Je vais lui montrer qui c’est Raoul.
Aux quatre coins de Paris qu’on va le retrouver, éparpillé par petits bouts, façon puzzle.
Moi, quand on m’en fait trop, je correctionne plus : je dynamite, je disperse, je ventile !

Bernard Blier, Les Tontons flingueurs (1963), écrit par Michel Audiard

Les « small caps » 

J’écris les noms propres avec des petites capitales (small caps) ; pour les afficher, je crée une classe « auteur » que j’ajoute dans le CSS.

1
2
3
.auteur { 
  font-variant: small-caps; 
}