Previous
Written by: rJTutorial Team | Last Updated:

HTML Quotation

When building content-heavy websites, you often need to reference other sources. While it's tempting to just type quotation marks around your text, HTML provides specific semantic tags <q> and <blockquote> to handle this. Using these tags isn't just about appearance; it tells search engines and screen readers exactly where your original content ends and where someone else's begins.

Best Practice: Always use semantic tags like <blockquote> instead of just indenting text with CSS. This helps screen readers announce to visually impaired users that the text is a quotation.

1. <q> Tag

The <q> element is your go-to for inline quotations. These are short snippets of text that stay within the flow of a paragraph. One of the most helpful features of the <q> tag is that modern browsers will automatically wrap the text in quotation marks for you, often adjusting the style of those marks based on the language of the page.

Syntax:

<q>Quoted text here</q>

Example:

<!DOCTYPE html>
<html>
<head>
  <title>HTML Quotation Example</title>
</head>
<body>
  <p>As Tim Berners-Lee famously said, <q>The Web as I envisaged it, we have not seen it yet.</q> and this remains true today.</p>
</body>
</html>

Output:

As Tim Berners-Lee famously said, "The Web as I envisaged it, we have not seen it yet." and this remains true today.

Common Mistake: Manually typing quotation marks inside a <q> tag. If you do this: <q>"Hello"</q>, the browser might render it as ""Hello"", resulting in double quotation marks.
Developer Tip: Use the cite attribute (e.g., <q cite="URL">) to provide a hidden link to the source. While users won't see it, it’s great for SEO and document metadata.

2. <blockquote> Tag

The <blockquote> element is designed for longer quotations or excerpts that deserve their own space on the page. Unlike the inline <q> tag, a blockquote is a block-level element, meaning it starts on a new line and takes up the full width available. By default, browsers apply a margin to the left and right to make it stand out visually.

Syntax:

<blockquote cite="https://source-url.com">
  Quoted text here
</blockquote>

Example:

In professional web design, blockquotes are frequently used for client testimonials or highlighting key excerpts from articles.

<!DOCTYPE html>
<html>
<head>
  <title>HTML Quotation Example</title>
  <style>
    blockquote {
      font-style: italic;
      color: #555;
      border-left: 5px solid #7f06ff;
      padding: 15px 25px;
      margin: 20px 0;
      background-color: #f9f9f9;
    }
  </style>
</head>
<body>
  <h2>Developer Motivation:</h2>
  <blockquote>
    "Any fool can write code that a computer can understand. Good programmers write code that humans can understand."
    
  Martin Fowler
  </blockquote>
</body>
</html>

Output:

"Any fool can write code that a computer can understand. Good programmers write code that humans can understand."
Martin Fowler
(The text is indented, styled with a distinct purple left border and a light background.)

Watch Out: Avoid using <blockquote> purely for visual indentation of non-quoted text. If you just want to indent a paragraph, use CSS margin-left or padding-left instead to keep your HTML semantically correct.

Comparison: <q> vs <blockquote>

HTML Quotation Example
Feature <q> <blockquote>
Use Case Short, inline phrases within a sentence. Longer sections, excerpts, or testimonials.
Display Style Stays on the same line; adds quotes. Occupies its own block; adds margins.
CSS Customization Limited; mainly used for font styling. Highly customizable (borders, backgrounds, spacing).
Example Context `The manager said <q>it's ready</q>.` <blockquote>"Full paragraph of wisdom..."</blockquote>

Summary

  • <q>: Best for short, inline quotes. It handles quotation marks automatically, keeping your text clean and correctly punctuated.
  • <blockquote>: Best for large chunks of borrowed text. It provides a clear visual and semantic separation from the rest of your content.
  • Attribution: Use the cite attribute on both tags to point to the source URL for better SEO and document structure.
Previous