|

HTML 7 💻 blockquote, q, abbr, address, cite, dbo elements

Bykronos

These elements add semantic meaning to specific types of content like quotations, abbreviations, addresses, and text direction.

The Blockquote Element <blockquote>

The <blockquote> element represents a section of text that is quoted from another source. It creates a block-level quotation.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</blockquote>

Browser Display:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Key Points:

  • Used for longer, block-level quotations
  • Can contain one or more paragraphs
  • May include other inline elements like <em>, <strong>, or <code>
  • Often indented by default
  • Can include a cite attribute with the source URL

Example with Multiple Paragraphs:

<blockquote cite="https://example.com/source">
  <p>This is the first paragraph of the quote.</p>
  <p>This is the second paragraph of the same quote.</p>
  <p><em>This paragraph contains emphasis</em> within the quote.</p>
</blockquote>

The Inline Quote Element <q>

The <q> element represents a short, inline quotation within a larger block of text.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <q>In hac habitasse platea dictumst!</q></p>

Browser Display:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. “In hac habitasse platea dictumst!”

Key Points:

  • Used for short, inline quotations
  • Contains one or more words or sentences
  • Browsers automatically add quotation marks
  • More semantic than manually adding quote marks

Example:

<p>She said, <q>I'll be there in five minutes</q> before hanging up.</p>

The Abbreviation Element <abbr>

The <abbr> element defines an abbreviation or acronym, with the full form provided in the title attribute.

<p>The <abbr title="Academy Awards">Oscars</abbr> are presented annually by the Academy of Motion Picture Arts and Sciences.</p>

Browser Display:
The Oscars are presented annually…

Key Points:

  • Defines abbreviations and acronyms
  • The title attribute provides the full explanation
  • Helps with accessibility and SEO
  • Often displayed with a dotted underline

Examples:

<p>
  The <abbr title="World Health Organization">WHO</abbr> recommends regular exercise.
  HTML stands for <abbr title="Hyper Text Markup Language">HTML</abbr>.
  Please send your <abbr title="Resume">CV</abbr> by Friday.
</p>

The Address Element <address>

The <address> element defines contact information for the nearest parent <article> or <body> element.

<p>The company's headquarters are located at:</p>
<address>
  Somewhere in Europe
</address>

Browser Display:
Somewhere in Europe

Key Points:

  • Defines contact information or an address
  • Can contain address, email address, phone number, and other contact details
  • Usually rendered in italic by default
  • Used for the author or organization of the document

Better Examples:

<address>
  <strong>John Doe</strong><br>
  123 Main Street<br>
  New York, NY 10001<br>
  Email: <a href="mailto:john@example.com">john@example.com</a><br>
  Phone: <a href="tel:+1234567890">(123) 456-7890</a>
</address>

The Citation Element <cite>

The <cite> element identifies the source of a quotation, reference, or block of text.

<p>According to <cite>Kronos</cite>, "Lorem ipsum dolor sit amet."</p>

Browser Display:
According to Kronos, “Lorem ipsum dolor sit amet.”

Key Points:

  • Identifies the source of a quotation or reference
  • Can contain a URL, book title, article title, page number, etc.
  • Usually rendered in italic by default
  • Provides attribution and credibility

Examples:

<p>
  The concept of gravity was first described by <cite>Isaac Newton</cite>.
  As <cite>The New York Times</cite> reported, the event was historic.
  For more information, see <cite>Chapter 4, Page 78</cite>.
</p>

The BDO Element <bdo>

The <bdo> (Bi-Directional Override) element specifies the direction in which text should be displayed, overriding normal bidirectional formatting.

<bdo dir="rtl">
  This text should be displayed in the right-to-left direction
</bdo>

Browser Display:
This text should be displayed in the right-to-left direction (reversed)

Key Points:

  • Used for texts in languages written right-to-left (Arabic, Hebrew)
  • Overrides the normal bidirectional formatting rules
  • Useful for documents with mixed text directions
  • The dir attribute specifies the direction: ltr (left-to-right) or rtl (right-to-left)

Examples:

<!-- Normal English text (left-to-right) -->
<p>Hello, this is English text.</p>

<!-- Right-to-left text -->
<bdo dir="rtl">Hello, this is reversed English text.</bdo>

<!-- Arabic text example -->
<p>Arabic is written <bdo dir="rtl">مرحبا بكم</bdo> in the opposite direction.</p>

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quotations, Abbreviations, Addresses, Citations & BDO</title>
</head>
<body>

    <h1>Quotations, Abbreviations, Addresses, Citations & BDO</h1>

    <h2>1. Blockquote & Inline Quote</h2>

    <h3>Blockquote:</h3>
    <blockquote cite="https://example.com/philosophy">
        <p>The unexamined life is not worth living.</p>
        <p>This famous quote emphasizes the importance of self-reflection and philosophical inquiry.</p>
    </blockquote>

    <h3>Inline Quote:</h3>
    <p>
        As Socrates famously said, <q>I know that I know nothing</q>. 
        This paradox reminds us to remain humble in our pursuit of knowledge.
    </p>

    <hr>

    <h2>2. Abbreviations</h2>

    <p>
        The <abbr title="National Aeronautics and Space Administration">NASA</abbr> was established in 1958.
        The <abbr title="European Union">EU</abbr> has 27 member states.
        Please submit your <abbr title="Frequently Asked Questions">FAQ</abbr> before the meeting.
    </p>
    <p>
        HTML stands for <abbr title="Hyper Text Markup Language">HTML</abbr>, 
        while CSS stands for <abbr title="Cascading Style Sheets">CSS</abbr>.
    </p>

    <hr>

    <h2>3. Address</h2>

    <h3>Contact Information:</h3>
    <address>
        <strong>Tech Solutions Inc.</strong><br>
        123 Innovation Drive<br>
        Silicon Valley, CA 94043<br>
        Email: <a href="mailto:info@techsolutions.com">info@techsolutions.com</a><br>
        Phone: <a href="tel:+15551234567">(555) 123-4567</a>
    </address>

    <hr>

    <h2>4. Citations</h2>

    <p>
        In <cite>To Kill a Mockingbird</cite>, Harper Lee writes about justice and morality.
        According to <cite>Wikipedia</cite>, the first computer was invented in the 19th century.
        For more details, see <cite>Chapter 3, Pages 45-50</cite>.
    </p>

    <blockquote cite="https://www.brainyquote.com/quotes/albert_einstein_100835">
        <p>Imagination is more important than knowledge.</p>
        <footer>— <cite>Albert Einstein</cite></footer>
    </blockquote>

    <hr>

    <h2>5. BDO - Text Direction</h2>

    <h3>Left-to-Right (ltr):</h3>
    <bdo dir="ltr">This text is displayed from left to right.</bdo>

    <h3>Right-to-Left (rtl):</h3>
    <bdo dir="rtl">This text is displayed from right to left.</bdo>

    <h3>Practical Example:</h3>
    <p>
        English text mixed with Arabic:
        <bdo dir="rtl">مرحبا بكم</bdo> (Welcome in Arabic).
    </p>

    <hr>

    <h2>6. Combined Example</h2>

    <blockquote cite="https://example.com/interview">
        <p>
            The director explained, <q>This project represents a new direction for our company</q>, 
            as noted in <cite>Tech Weekly Magazine</cite>.
        </p>
        <footer>
            — <abbr title="Chief Executive Officer">CEO</abbr> at 
            <address>TechCorp, 500 Main St, New York, NY</address>
        </footer>
    </blockquote>

</body>
</html>

Quick Reference

ElementPurposeVisual StyleCommon Uses
<blockquote>Block-level quoteIndentedLong quotations, testimonials
<q>Inline quoteQuotation marksShort quotes within text
<abbr>AbbreviationDotted underlineAcronyms, shortened terms
<address>Contact informationItalicBusiness addresses, author info
<cite>Citation sourceItalicBook titles, article references
<bdo>Text direction overrideNormal textRight-to-left languages

Best Practices

✅ Do This:

<!-- Use cite attribute with blockquote -->
<blockquote cite="https://source.com">
  <p>Quoted text here.</p>
</blockquote>

<!-- Always provide title for abbreviations -->
<abbr title="World Wide Web">WWW</abbr>

<!-- Use address for actual contact info -->
<address>
  Email: <a href="mailto:me@example.com">me@example.com</a>
</address>

❌ Don’t Do This:

<!-- Don't use blockquote for indentation -->
<blockquote>This is just indented text</blockquote>
<!-- Use CSS margin or padding instead -->

<!-- Don't use cite for the author's name -->
<p>The author is <cite>John Smith</cite></p>
<!-- Use <span> or <strong> with CSS -->

<!-- Don't use address for fake or unrelated addresses -->
<address>Some random text that's not an address</address>

Pro Tip: Use blockquote and q together with the cite attribute to provide proper attribution. The <abbr> element is especially important for accessibility, as screen readers can announce the full meaning of abbreviations to users.

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!