How to add quote in html

HtmlHow-ToBeginner · 3 min read

How to Add Quotes in HTML: Syntax and Examples

To add a quote in HTML, use the <blockquote> tag for longer quotes or the <q> tag for short inline quotes. These tags help browsers and screen readers understand the content is a quotation.

📐

Syntax

The <blockquote> tag is used for longer, block-level quotes and usually displays with indentation. The <q> tag is for short, inline quotes and typically adds quotation marks automatically.

<blockquote>...</blockquote>: For block quotes.
<q>...</q>: For inline quotes.

html

<blockquote>This is a block quote example.</blockquote>
<p>Here is an inline quote: <q>This is a short quote.</q></p>

Output

This is a block quote example. Here is an inline quote: “This is a short quote.”

💻

Example

This example shows how to use both <blockquote> and <q> tags in a simple HTML page. The blockquote is shown as a separate indented block, and the q tag adds quotation marks inline.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quote Example</title>
</head>
<body>
  <h2>Block Quote Example</h2>
  <blockquote cite="https://www.example.com">
    The only limit to our realization of tomorrow is our doubts of today.
  </blockquote>
  <p>Here is an inline quote: <q cite="https://www.example.com">Stay hungry, stay foolish.</q></p>
</body>
</html>

Output

Block Quote Example The only limit to our realization of tomorrow is our doubts of today. Here is an inline quote: “Stay hungry, stay foolish.”

⚠️

Common Pitfalls

Common mistakes when adding quotes in HTML include:

Using quotation marks manually instead of the <q> tag for inline quotes, which can cause inconsistent styling.
Not using <blockquote> for longer quotes, losing semantic meaning and default indentation.
Forgetting to add the cite attribute to provide the source URL, which helps accessibility and SEO.

html

<!-- Wrong way: manually adding quotes -->
<p>He said, "This is a quote."</p>

<!-- Right way: using q tag -->
<p>He said, <q>This is a quote.</q></p>

Output

He said, "This is a quote." He said, “This is a quote.”

📊

Quick Reference

Tag	Use	Description
	Block quote	For longer quotes, displayed as a separate indented block.
	Inline quote	For short quotes inside a paragraph, adds quotation marks automatically.
cite attribute	Source URL	Optional attribute to specify the source of the quote.

✅

Key Takeaways

Use

for longer, block-level quotes to get indentation and semantic meaning.

Use for short, inline quotes to automatically add quotation marks.

Add the cite attribute to provide the source of the quote for better accessibility.

Avoid manually typing quotation marks for inline quotes to keep consistent styling.

Quotes improve readability and help screen readers understand the content.