HtmlHow-ToBeginner · 3 min read

How to Create Blockquote in HTML: Simple Guide

To create a blockquote in HTML, use the <blockquote> tag to enclose the quoted text. This tag visually indents the text to show it is a quotation.

📐

Syntax

The <blockquote> tag is used to define a section that is quoted from another source. It usually indents the text to separate it from the rest of the content.

<blockquote>: Opens the blockquote section.
Quoted text: The content inside the blockquote.
</blockquote>: Closes the blockquote section.

html

<blockquote>
  This is a quoted text.
</blockquote>

Output

This is a quoted text.

💻

Example

This example shows how to use the <blockquote> tag to display a quote with indentation in a webpage.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blockquote Example</title>
</head>
<body>
  <p>Here is a famous quote:</p>
  <blockquote>
    "The only way to do great work is to love what you do."<br>— Steve Jobs
  </blockquote>
</body>
</html>

Output

Here is a famous quote: "The only way to do great work is to love what you do." — Steve Jobs

⚠️

Common Pitfalls

Some common mistakes when using <blockquote> include:

Using it for regular text instead of quotes, which can confuse readers and screen readers.
Not closing the tag properly, which breaks the layout.
Trying to style quotes manually without using semantic tags, losing accessibility benefits.

Correct usage ensures the quote is clearly marked and accessible.

html

<!-- Wrong: Using <p> instead of <blockquote> for quotes -->
<p>"This is a quote."</p>

<!-- Right: Using <blockquote> for quotes -->
<blockquote>"This is a quote."</blockquote>

📊

Quick Reference

Remember these tips when using <blockquote>:

Use <blockquote> for longer quotations.
Use <q> for short inline quotes.
Always close the tag properly.
Consider adding a cite attribute or a footer for the source.

✅

Key Takeaways

Use the

tag to mark quoted sections in HTML.

Blockquotes visually indent text to show it is a quotation.

Always close the

tag properly to avoid layout issues.

Use blockquote for longer quotes and for short inline quotes.

Adding a source with a cite attribute or footer improves clarity.