Previous

HTML Quotation

The HTML <q> and <blockquote> tags are used for handling quotations in HTML. They are semantically meaningful elements that help organize quoted content on a webpage.

1. <q> Tag

The <q> element is used to represent inline quotations. It is meant for short quotes that are part of a sentence and should be displayed inline with quotation marks automatically added by the browser.

Syntax:

<q>Quoted text here</q>

Example:

<!DOCTYPE html>
<html>
<head>
  <title>HTML Quotation Example</title>
</head>
<body>
  <p>He said, <q>HTML is a markup language</q> during the presentation.</p>
</body>
</html>

Output:

He said, "HTML is a markup language" during the presentation.

2. <blockquote> Tag

The <blockquote> element is used to represent longer quotations that are usually displayed as a block, separated from other content. It adds semantic meaning to quoted content and typically indents the quoted text.

Syntax:

<blockquote>
  Quoted text here
</blockquote>

Example:

<!DOCTYPE html>
<html>
<head>
  <title>HTML Quotation Example</title>
  <style>
    blockquote {
      font-style: italic;
      color: #555;
      border-left: 4px solid #7f06ff;
      padding: 10px;
      margin: 20px 0;
    }
  </style>
</head>
<body>
  <h2>Famous Quote:</h2>
  <blockquote>
    "The journey of a thousand miles begins with a single step."
    —Lao Tzu
  </blockquote>
</body>
</html>

Output:

"The journey of a thousand miles begins with a single step."
—Lao Tzu
(The text will be indented, styled with a left border, and italicized.)

Comparison: <q> vs <blockquote>

HTML Quotation Example

HTML Quotation

Feature <q> <blockquote>
Use Case For short inline quotations. For longer block-style quotations.
Display Style Inline with surrounding text. Indented as a separate block.
CSS Customization Less prominent custom styling options. Can be styled heavily with CSS.
Example Context `He said, <q>we should start now</q> and left.` <blockquote>"The end of the road is just the beginning."</blockquote>

 

Summary

  • <q>: Used for short inline quotations. The browser automatically adds quotation marks.
  • <blockquote>: Used for long block-style quotations that are displayed as a distinct visual block.
Previous