HTML Quotation and Citation Elements

Sometimes you need to quote someone, show where something came from, or display contact information. HTML has special tags for exactly these situations.

HTML Quotation Tags

We will go through these tags in this chapter: <blockquote>, <q>, <abbr>, <address>, <cite>, and <bdo>.

Blockquote for Long Quotations

The <blockquote> tag is used when you want to quote a chunk of text from another source. Browsers usually indent the whole block so it stands out from your own writing.

You can also add a cite attribute with the URL of the source. This does not show on the page, but it is useful for browsers and search engines.

See how the text is indented? That is the browser showing you this is a quote from somewhere else.

Short Quotations with q Tag

For short quotes that go inside a sentence, use the <q> tag. Browsers automatically add quotation marks around the text.

Use <blockquote> for long, standalone quotes. Use <q> for short quotes inside a paragraph.

Abbreviations with abbr Tag

The <abbr> tag is for abbreviations or acronyms like HTML, CSS, Dr., NASA, or ASAP.

You can add a title attribute to explain what the abbreviation means. When someone hovers over it, they will see the full form as a tooltip.

This is very helpful for screen readers, search engines, and people who might not know what the abbreviation stands for.

Hover your mouse over “WHO” or “ASAP” in the preview. See the full text pop up? That is the title attribute at work.

Contact Information with address Tag

The <address> tag is used for contact information about the author or owner of a page. This could be an email address, a physical address, a phone number, or a social media handle.

Browsers usually display the text in italic and add line breaks before and after the address block.

Some websites put their address in the footer of every page. That is a good place for the <address> tag.

Work Titles with cite Tag

The <cite> tag is used for the title of a creative work. This could be a book, a movie, a song, a painting, a poem, or a sculpture.

Important: A person’s name is NOT a title. So do not use <cite> for the name of an author or artist. Use it for the work itself.

Browsers usually display <cite> text in italic.

See how the book title, painting title, and movie title are in italic? That is the browser showing you these are titles of creative works.

Text Direction with bdo Tag

BDO stands for Bi-Directional Override. It forces text to go in a specific direction, either left to right or right to left.

This is rarely used in English websites, but it is helpful for languages like Arabic or Hebrew that are written right to left.

You need to add the dir attribute. dir="rtl" means right to left. dir="ltr" means left to right.

Try it. The second sentence reads backwards. That is the <bdo> tag doing its job.

Try It Yourself (Combine Multiple Tags)

You can use these tags together in a real webpage. Here is an example that combines several of them:

Quick Summary

• <blockquote> – Long quote from another source. Usually indented.
• <q> – Short quote inside a sentence. Adds quotation marks.
• <abbr> – Abbreviation or acronym. Use title to explain it.
• <address> – Contact information. Usually italic with line breaks.
• <cite> – Title of a creative work (book, movie, song, painting).
• <bdo> – Override text direction. Use dir="rtl" or dir="ltr".

What Just Happened? Let Me Explain

• Quoting someone? Use <blockquote> for big quotes. Use <q> for small quotes inside a sentence.
• Got an abbreviation? Wrap it in <abbr> and add a title attribute with the full meaning.
• Need to show contact info? Use <address>. It tells browsers and search engines this is how to reach you.
• Mentioning a book or movie title? Use <cite>. It marks it as a creative work.
• Working with different languages? <bdo> lets you force text direction when needed.

HTML Quotation Reference

Here are all the tags we covered in this chapter: