iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

HTML Quotations

HTML has dedicated elements for short quotes, block quotes, abbreviations, citations, and addresses — each adds meaning beyond what plain text could carry.

Quotation and citation elements

ElementPurposeNotes
<q>Short inline quotation.Browser auto-adds curly quotes.
<blockquote>Block-level quotation from another source.Use cite attribute for the source URL.
<abbr>Abbreviation or acronym.Use title for the full form: <abbr title="HyperText Markup Language">HTML</abbr>
<cite>Title of a work being referenced.Renders italic by default.
<address>Contact information for the author or owner.Typically goes in the footer.
<bdo>Bi-directional override — force text direction.Requires dir="rtl" or "ltr".
Note: Don't use <blockquote> just for indentation. Use it only when you're quoting another source — otherwise use CSS margin or padding.

Example

Example
<!DOCTYPE html>
<html>
<head>
    <title>HTML Quotations</title>
</head>
<body>

<h1>HTML Quotations</h1>
<p>This is a demo page for the "HTML Quotations" lesson.</p>

</body>
</html>
Try it Yourself »

Exercise

Wrap this long quote in the element designed for multi-line citations.

< cite="https://example.com">A long passage…</ >

Test yourself

Q1. A short inline quote uses…
Q2. A long block-level quote uses…
Q3. The source/title of a work uses…

Discussion

Loading…