HTML — Quotations

Introduction – Why quotations matter in HTML

When you write web pages, you often need to show someone’s words.
Using the right HTML tags tells browsers and assistive technologies that the text is a quote.
It also helps search engines understand the structure of your content.
In this lesson we will explore the family of quotation tags, how they differ, and when to use each.

The basic <blockquote> element

<blockquote> is meant for longer, block‑level quotations.
It creates a visual indentation by default in most browsers.
The element can also hold a cite attribute that points to the source URL.

<blockquote cite="https://www.example.com/article">
  The only limit to our realization of tomorrow is our doubts today.
  — Franklin D. Roosevelt
</blockquote>

What the browser displays

The text appears as a separate paragraph, indented from the surrounding content, with a small citation link (if the browser shows it).

Inline quotations with <q>

For short quotes that sit inside a paragraph, use <q>.
Browsers automatically add quotation marks around the content.
The marks can be changed with CSS if you need a different style.

<p>Albert Einstein once said, <q>Life is like riding a bicycle.</q> Keep moving.</p>

What the browser displays

The sentence shows “Life is like riding a bicycle.” surrounded by standard double‑quote marks.

Adding a source with <cite>

The <cite> element marks the title of a work, not the author’s name.
It is typically used inside a <blockquote> or alongside a <q>.

<blockquote>
  <p>“The only way to do great work is to love what you do.”</p>
  <footer>— <cite>Steve Jobs</cite>, 2005 Stanford Commencement Speech</footer>
</blockquote>

What the browser displays

The quote is indented, and the citation appears in a smaller, italic‑style line below the quote.

The <abbr> tag for quoted abbreviations

Sometimes a quote includes an abbreviation that needs explanation.
Wrap the abbreviation in <abbr> and provide a title attribute.

<p>She said, <q>We need to finish the <abbr title="Project Management Office">PMO</abbr> report today.</q></p>

What the browser displays

The abbreviation shows as “PMO”. Hovering over it reveals the full phrase “Project Management Office”.

Using the cite attribute vs. <cite> element

The cite attribute belongs to <blockquote> and <q> and stores a URL.
The <cite> element stores the title of a work.
Both can appear together.

Element	Attribute	Purpose
<blockquote>	cite	URL of the source document
<q>	cite	URL of the source for the short quote
<cite>	—	Title or name of the source

Good to know: The cite attribute does not create a visible link; it is metadata for browsers and search engines.

Styling quotations with CSS

You can change the look of quotes without altering the HTML.
Below is a simple style that adds a left border and changes the font.

<style>
  blockquote {
    border-left: 4px solid #ccc;
    margin: 1.5em 0;
    padding-left: 1em;
    color: #555;
  }
  q::before { content: "«"; }
  q::after  { content: "»"; }
</style>

<blockquote>
  <p>“Design is not just what it looks like and feels like. Design is how it works.”</p>
  <footer>— <cite>Steve Jobs</cite></footer>
</blockquote>

<p>He whispered, <q>Trust the process.</q></p>

What the browser displays

The blockquote now has a gray left border, and the inline quote uses « and » instead of normal double quotes.

Nesting quotations

When a quote contains another quote, you can nest <q> inside a <blockquote> or another <q>.

<blockquote>
  <p>She replied, <q>He told me, <q>Never give up.</q> and I believed him.</q></p>
</blockquote>

What the browser displays

The outer quote gets the default double quotes, while the inner quote gets single quotes automatically.

Accessibility considerations

Screen readers announce <blockquote> as a quotation block.
They also read the cite attribute if it is present.
Adding a <cite> element helps users who rely on text to understand the source.

Common mistake: Forgetting to provide a cite URL or a <cite> element, leaving users guessing where the quote came from.

When not to use quotation tags

If the text is not a direct quote, use normal paragraph tags.
Do not use <blockquote> for decorative indentation only.
Use CSS for visual effects that are not semantic.

Recap of key points

• <blockquote> – block‑level, for long quotes, optional cite URL.
• <q> – inline, short quotes, automatic quotation marks.
• <cite> – title of a work, usually inside a footer.
• <abbr> – for abbreviations inside quotes, with title.
• Use CSS to adjust appearance without changing meaning.

Common mistakes checklist

• Missing cite attribute when the source URL is known.
• Using <blockquote> for a single sentence that should be <q>.
• Forgetting to wrap the source in <cite> or <footer>.
• Not providing a title for <abbr> inside a quote.
• Relying only on visual indentation for meaning.

Mini Practice

1. Write a blockquote that quotes a famous line and include a cite URL to the original article.
2. Inside a paragraph, insert an inline quote using <q> and add a cite attribute pointing to a source page.
3. Add a <cite> element to the previous blockquote to show the author’s name.
4. Create a nested quote where a character says something and then quotes another character inside it.
5. Style all blockquotes with a left border and a different background color using a <style> block.

Looking ahead

In the next lesson we will learn how to write comments in HTML.
Comments let you leave notes for yourself or other developers without showing anything to the user.
They are useful for organizing code, disabling parts temporarily, and documenting decisions.
Keep practicing the quotation tags, then move on to comments to keep your markup clean.
Happy coding!