blockquote
A block-level quotation, usually for longer quoted material.
Platform under construction
HTML Quotations
Learn HTML Quotations as a practical HTML text lesson with syntax, examples, common mistakes, accessibility notes and a live code lab.
HTML text basics
Quotation elements mark text that comes from another source.
HTML has elements for quoted text. Use blockquote for longer quoted blocks and q for short inline quotes inside a sentence.
A quote should not be created with styling alone. Italic text can look like a quote, but the browser still sees ordinary text unless you use the correct element.
The cite element can name the creative work, article, book, documentation page or source title connected to the quote.
q
An inline quotation inside a sentence. Browsers usually add quotation marks.
cite
The title of a cited work or source, not usually the quoted person name alone.
cite attribute
An optional URL on blockquote or q that points to the quote source.
Syntax and meaning
Use blockquote for blocks and q for inline quotes.
The markup should show what text is quoted and where the source context belongs.
Good quotation markup
<figure>
<blockquote cite="https://html.spec.whatwg.org/">
<p>HTML describes the structure of documents and applications.</p>
</blockquote>
<figcaption>
Source: <cite>HTML Living Standard</cite>
</figcaption>
</figure>
<p>The developer said <q>structure comes before styling</q>.</p>
Weak quotation markup
<p class="quote"> "HTML describes the structure of documents and applications." </p> <p><i>HTML Living Standard</i></p>
Practical rules
Use the element for meaning first, then polish it with CSS.
These rules are the part that saves time in real projects. If the HTML meaning is clean, CSS, JavaScript, accessibility checks and search optimization become easier to reason about.
Quote only quoted text
Do not wrap your own summary in blockquote unless it is actually quoted.
Use q inline
Short quotes inside sentences belong in q, not blockquote.
Use cite for source titles
The cite element names a work or source, such as a book, article or standard.
Do not rely on italics
Styling cannot replace quotation semantics.
Keep attribution close
A quote should make it easy to understand where the text came from.
Open external sources carefully
If you link to an outside source, use clear labels and avoid throwing users away unexpectedly.
Production thinking
Small text decisions affect accessibility, SEO and maintainability.
Why does this matter?
Text markup matters because browsers and assistive technology do not only see letters. They also read structure, emphasis, quotes, code and relationships between pieces of text.
Accessibility
Semantic quote markup helps assistive technology and user agents communicate that text is quoted, not normal body copy.
Production note
In content systems, store quote text, source title and source URL separately so templates can output consistent quotation markup.
SEO note
Quoted content should support your original explanation. A page made mostly of copied quotes is weak content.
Live code lab
Change the code and run the example.
Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.
Mini assignment
Try this now.
- Change one tag, attribute or text value in the example.
- Run the preview and describe exactly what changed.
- Reset the lab and repeat the same change without looking at the original.
Practice assignment
Do this before moving to the next lesson.
- Change one meaningful part of the HTML, not only the visible text.
- Run the preview and check whether the result still makes semantic sense.
- Explain why the element or attribute you changed belongs in this exact place.
Try it yourself
Create a quote card
Self-check
Before you continue, prove that you own this lesson.
Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.
- Can you explain what problem this lesson solves in a real website?
- Can you identify the most important tag or attribute from this lesson?
- Can you name one accessibility mistake this lesson helps prevent?
- Can you write one good example and one weak example without copying the page?
- Can you explain when you would use this in production and when you would avoid it?