HTML Quotations Explained

What are HTML Quotations?

HTML Quotations are special tags used to display quoted text, abbreviations, citations, addresses, or text with special meaning in a webpage. They help structure text semantically so browsers, search engines, and readers understand whether the text is a quotation, a citation, an abbreviation, or formatted in a specific direction. Using these tags also improves accessibility and ensures proper styling by default.

<blockquote> — Block Quotation

Used for long quotations (usually spanning multiple lines).
The browser usually displays it as indented text.
To indicate the source, you can include the cite attribute.

<!DOCTYPE html> <html> <head> <title>Block Quotation Example</title> </head> <body> <blockquote> "The journey of a thousand miles begins with a single step." </blockquote> </body> </html>

<q> — Inline Quotation

Used for short, inline quotations.
Browsers automatically add quotation marks.
Fits inside a sentence.

<!DOCTYPE html> <html> <head> <title>Inline Quotation Example</title> </head> <body> She said, <q>Hard work always pays off.</q> </body> </html>

<cite> tag— Citation

Used to reference the title of a work (book, website, research paper, etc.).
Browsers usually italicize the content.
Not meant for URLs directly — use <a> for clickable links.

<!DOCTYPE html> <html> <head> <title>Citation Example</title> </head> <body> <cite>The Great Gatsby</cite> was written by F. Scott Fitzgerald. </body> </html>

<bbr> tag — Abbreviation or Acronym

The <abbr> tag defines abbreviations or acronyms, and the title attribute shows the full form when hovered over. Users and accessibility tools like screen readers benefit from this increase in clarity.

<!DOCTYPE html> <html> <head> <title>Abbreviation or Acronym Example</title> </head> <body> The <abbr title="World Health Organization">WHO</abbr> was founded in 1948. </body> </html>

<address> tag — Contact Information

The <address> tag is used to display contact details for the author or owner of a webpage. This can include things like an email address, website link, or physical address. By default, most browsers show <address> content in italics.

<!DOCTYPE html> <html> <head> <title>Address Example</title> </head> <body> <address> Written by John Doe. Visit us at example.com 123 Main Street, USA </address> </body> </html>

<bdo> — Bi-Directional Override

The <bdo> tag is used to change the direction of text display, either left-to-right (ltr) or right-to-left (rtl). This is useful for languages that use different writing directions.

<!DOCTYPE html> <html> <head> <title>Address Example</title> </head> <body> Normal: Hello <bdo dir="rtl">Hello</bdo> </body> </html>

HTML Quotations