Module 2: Quotations0 Level Beginner

10. Quotations and Abbreviations (<blockquote>, <q>, <abbr>, <bdo>)

Writing quotes, abbreviations and writing text in the reverse direction

Real-life analogy

Reading out a great person's long thought on a stage is a blockquote, and saying a short phrase in conversation is the q tag.

Explanation

Special tags related to quotations and abbreviations:

<blockquote>: A large paragraph taken from another source. The browser shows it slightly indented.
<q>: A short inline quote. The browser automatically puts double quotation marks (" ") on both sides of it.
<abbr>: Abbreviation. You write its full name in the title attribute, and a tooltip appears when the mouse is moved over it.
<bdo dir="rtl">: Bi-Directional Override. Used to reverse the direction of the text (to change Left-to-Right into Right-to-Left).

Golden rules

Always add the title attribute in <abbr> so that the full form is clear to the user.

Common mistake

Typing "..." directly from the keyboard for a short quotation. Using <q> is considered more semantic.

Example code

<!DOCTYPE html>
<html>
<body style="font-family: sans-serif; padding: 20px;">
  <blockquote cite="https://example.com" style="border-left: 4px solid #0284c7; padding-left: 12px; margin: 10px 0; background: #f8fafc; font-style: italic;">
    "Arise, awake, and do not stop until the goal is reached."
  </blockquote>
  <p>Gandhiji's slogan: <q>Do or die</q></p>
  <p><abbr title="World Health Organization" style="text-decoration: underline dotted; cursor: help;">WHO</abbr> looks after health care.</p>
  <p>Reversed text: <bdo dir="rtl" style="color: #dc2626; font-weight: bold;">This is written backwards</bdo></p>
</body>
</html>

Run & edit this in the live editor

Quick quiz

When double quotes (" ") should be automatically added on both sides of a short sentence, which tag is used?

<quote>
<q>
<blockquote>
<cite>

Show answer

Answer: <q>

The <q> tag automatically adds quotes on both sides of inline quotations.