HTML Quotations
Adding quotes and citations to your content
💬 What are HTML Quotations?
HTML provides several elements for displaying quotations, citations, and referenced text. These elements help structure quoted content properly.
<blockquote>This is a long quotation.</blockquote>
<p>He said <q>Hello World</q> to everyone.</p>
<p><cite>The Great Gatsby</cite> is a famous book.</p>
Output:
This is a long quotation.
He said
"Hello World"
to everyone.
The Great Gatsby is a famous book.
Quotation Elements
<blockquote>
Long quotations (block level)
<blockquote>Long quote</blockquote><q>
Short inline quotations
<q>Short quote</q><cite>
Citations and references
<cite>Book Title</cite><abbr>
Abbreviations with definitions
<abbr title="HyperText Markup Language">HTML</abbr>🔹 Block Quotations
Use <blockquote> for longer quotations that should be displayed as separate blocks:
<blockquote style="margin: 15px 0; padding: 15px; border-left: 4px solid #007acc; background: #f8f9fa; font-style: italic; color: #007acc;">
"The only way to do great work is to love what you do.
If you haven't found it yet, keep looking. Don't settle."
</blockquote>
<blockquote cite="https://example.com" style="margin: 15px 0; padding: 15px; border-left: 4px solid #007acc; background: #f8f9fa; font-style: italic; color: #007acc;">
"Innovation distinguishes between a leader and a follower."
</blockquote>Output:
"The only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle."
"Innovation distinguishes between a leader and a follower."
🔹 Inline Quotations
Use <q> for short quotations within paragraphs:
<p>Albert Einstein once said <q>Imagination is more important than knowledge.</q></p>
<p>The teacher asked <q>What is the capital of France?</q> during the quiz.</p>
<p>My motto is <q>Never give up!</q> and it has served me well.</p>Output:
Albert Einstein once said
"Imagination is more important than knowledge."
The teacher asked
"What is the capital of France?"
during the quiz.
My motto is
"Never give up!"
and it has served me well.
🔹 Citations
Use <cite> to reference works, books, movies, or other sources:
<p>I just finished reading <cite>To Kill a Mockingbird</cite> by Harper Lee.</p>
<p>The movie <cite>The Shawshank Redemption</cite> is highly rated.</p>
<p>According to <cite>National Geographic</cite>, climate change is accelerating.</p>Output:
I just finished reading To Kill a Mockingbird by Harper Lee.
The movie The Shawshank Redemption is highly rated.
According to National Geographic , climate change is accelerating.
🔹 Abbreviations
Use <abbr> to define abbreviations and acronyms:
<p><abbr title="HyperText Markup Language">HTML</abbr> is easy to learn.</p>
<p><abbr title="Cascading Style Sheets">CSS</abbr> controls the styling.</p>
<p>The <abbr title="World Wide Web">WWW</abbr> changed everything.</p>Output (hover over abbreviations for definitions):
HTML is easy to learn.
CSS controls the styling.
The WWW changed everything.