Using the Quotes Element
- Identifying a quotation helps clarify that the content is attributed to another author.
- Quotes can be marked up as inline or as blocks of text.
- Assistive technologies can convey to users where a quote starts and ends, which can avoid misunderstandings.
- Blockquotes in Screen Readers, Adrian Roselli
Using the Blockquote Element
- Use the <blockquote> element for longer and more complex quotes.
- It can contain Paragraphs, Headings, and other text structure elements. Those should reflect the structure of the cited document.
- The <cite> element is used to refer to the source of the quote.
Example
<p>The following is an excerpt from <cite>The Story of my Life</cite> by Helen Keller</p> <blockquote> <p>Even in the days before my teacher came, I used to feel along the square stiff boxwood hedges, and, guided by the sense of smell, would find the first violets and lilies. There, too, after a fit of temper, I went to find comfort and to hide my hot face in the cool leaves and grass.</p> </blockquote>
Output
The following is an excerpt from The Story of my Life by Helen Keller
Even in the days before my teacher came, I used to feel along the square stiff boxwood hedges, and, guided by the sense of smell, would find the first violets and lilies. There, too, after a fit of temper, I went to find comfort and to hide my hot face in the cool leaves and grass.
Using the Inline Quote Element
- For shorter quotes, that are usually embedded in another sentence, use the <q> element.
- Note that the <q> element generates quotation marks.
Example
<p>Helen Keller said, <q>Self-pity is our worst enemy and if we yield to it, we can never do anything good in the world.</q></p>
Output
Helen Keller said, Self-pity is our worst enemy and if we yield to it, we can never do anything good in the world.