Quote Element Tutorial

<q>

Introductory Text

The q element is defined as a single quote.

The q element should be used for single-line quotations; long passages should use the blockquote element.

Quotation punctuation (such as quotation marks) must not appear immediately before, after, or inside q elements; they will be inserted into the rendering by the User Agent (UA). However, they don't seem to render quotes. Quotes can be inserted using CSS :before/:after pseudo elements. Language Specific Quoting and Quotation Marks by Jutta Wrage exhaustive in language-specific quotation marks; and, Rendering Quotes With CSS | David’s kitchen for cross-browser methods inserting language-specific quotation marks.

A valid URL must be used when the cite attribute is present. The value of the cite attribute must be resolved relative to the element so as to obtain the corresponding citation link.

Start tag:: <q>
End tag:: </q>

Use Examples

Example [Basic]:

Si le ciel et la mer sont noirs comme de l’encre, Nos cœurs que tu connais sont remplis de rayons!

Code [HTML]:


<p><q lang="fr">Si le ciel et la mer sont noirs comme de l’encre, »
Nos cœurs que tu connais sont remplis de rayons!</q></p>

Example [Basic (Citation Attribute)]:

This line — Si le ciel et la mer sont noirs comme de l’encre, Nos cœurs que tu connais sont remplis de rayons! — from Les Fleurs du mal by Charles Baudelaire would make a lovely Salutations card.

Code [HTML]:


<p>This line — <dfn id="definitionDisplay" title="If the sky and the sea are black as ink, »
Our hearts know that you are filled with rays!"><q lang="fr" cite="http://baudelaire. »
litteratura.com/les_fleurs_du_mal.php?rub=oeuvre&srub=pov&id=137">Si le ciel et »
la mer sont noirs comme de l’encre, Nos cœurs que tu connais sont remplis de rayons! »
</q></dfn> — from <cite lang="fr">Les Fleurs du mal</cite> by Charles Baudelaire »
would make a lovely Salutations card.</p>

Example [Compound (Quote in Quote)]:

It has been rumored that Daffy Duck said:, It was that Valentine’s line by Baudelaire — Si le ciel et la mer sont noirs comme de l’encre, Nos cœurs que tu connais sont remplis de rayons! — that she wrote in my autograph book.

Code [HTML]:


<p>It has been rumored that Daffy Duck said, <q lang="en">It was that Valentine’s line by »
Baudelaire — <q lang="fr">Si le ciel et la mer sont noirs comme de l’encre, Nos cœurs que tu »
connais sont remplis de rayons!</q> — that she wrote in my autograph book.</q></p>

Content Model/Assigned Attributes

Element-Type:

Text-Level [HTML 4.01]

Phrasing Content [HTML 5]

Attributes:

</q>