Blockquotes & Quotations
Quote Wrappers
Organize citations and inline quotes:Imagine writing a book review. When you quote a long paragraph from the author, you indent the text and place it in a separate block so the reader knows it's direct dialogue from another source.
In HTML, the <blockquote> element represents a section of text that is quoted from another source. To link to the source website, you use the cite attribute. For short, inline quotes inside a paragraph, we use the <q> tag instead, which automatically wraps the text in quotation marks.
Why does it matter?
Using<blockquote> and <q> tags is semantically correct. It tells search engines and screen readers that the text is a quotation, and attribute links like cite help maintain proper source attribution across the web.
How to write it
Wrap long quotes in a<blockquote> and place paragraphs inside it:
<blockquote cite="https://lhtml.com">
<p>To code is to build.</p>
</blockquote>
"To code is to build." — lhtml.com
Common Mistakes
cite attribute: The cite attribute must contain a URL pointing to the source website (e.g., cite="https://site.com"). If you want to write the name of the source in text, write it inside a <cite> tag inside the quote content.<blockquote> just for indenting text: If you want to indent your own text, use CSS padding or margin. Don't use <blockquote> unless you are quoting someone.Quick Reference
<blockquote> — Block element for long quotes.cite="URL" — Attribute to specify the source link.<q> — Inline tag for short quotes (adds quotation marks).Your Task
Create a `blockquote` element with a `cite` attribute set to 'https://quote.org'. Inside it, place a paragraph `<p>` containing 'To code is to build.'.
index.html
Type code above to start the lesson.
Live Preview