Observe after running:

• <cite> text usually appears italic.

• <q> automatically adds double quotation marks around its content (may vary slightly between browsers).

• <blockquote> is indented from both sides; you can nest <footer> and <cite> inside to indicate the source.

• <dfn> and <abbr> have similar default styling (italic in most browsers), but <abbr> shows the title attribute value on hover.

• <address> is displayed as a block element, usually italic, often placed at the bottom of the page.

• <bdo dir="rtl"> forces right‑to‑left display – note that the order of “Hello HTML” is reversed.

Detailed descriptions and use cases

1. <blockquote> – Block‑level quote

• Use case: Quoting a long passage from a blog post, a book, a news summary, etc.

• Best practice: Include a cite attribute pointing to the source URL. If the quote comes from a book, you can also use <footer> or <cite> inside to give credit.

• Note: Do not use <blockquote> just for indentation – use CSS margin for that.

2. <q> – Inline quote

• Use case: A quoted phrase inside a sentence, e.g., He said, <q>Learning HTML is fun</q>.

• Feature: Browsers automatically add appropriate quotation marks (usually double quotes).

• Note: Do not nest <q> too deeply, as quotation marks may become confusing. For multi‑level or long quotes, use <blockquote> instead.

3. <cite> – Citation title

• Use case: Citing the title of a book, movie, song, paper, or web page.

• Correct usage: <cite> should only wrap the work title, not the author or source URL. For example: My favourite novel is <cite>Three‑Body Problem</cite>.

• Default style: Usually italic, but you can change it with CSS.

• Common mistake: Do not use <cite> to mark a person’s name or the source attribution text (e.g., the words “— Excerpt from” should not be inside <cite>).

4. <dfn> – Definition instance

• Use case: Use when defining a term for the first time in an article. Example: <dfn>HTML</dfn> is the abbreviation for HyperText Markup Language.

• Best practice: The term wrapped in <dfn> should be immediately followed by its definition. You can use the title attribute or rely on the surrounding context.

• Accessibility: Browsers and screen readers can identify this as the definition point of the term, useful for building glossaries.

5. <abbr> – Abbreviation

• Use case: Mark abbreviations like HTML, CSS, JS, FAQ, etc.

• Attribute: Typically used with the title attribute to provide the full expansion. Example: <abbr title="HyperText Markup Language">HTML</abbr>.

• Visual effect: Most browsers show a dotted underline or border; the title content appears on hover.

• Accessibility: Screen readers can optionally read the full form, which is very helpful for users with visual impairments.

6. <address> – Contact information

• Use case: Provide contact information for the author or document, such as email, GitHub account, physical address, phone number, etc.

• Proper placement: Usually placed inside a <footer> or at the bottom of the page/article.

• Note: Do not use <address> for ordinary postal addresses (e.g., a company headquarters) unless it is the official contact information of the document author. For ordinary addresses, use <p> with microdata or aria-label.

• Default style: Usually italic and displayed as a block element.

7. <bdo> and <bdi> – Handling text direction

• <bdo> (BiDi Override): Forces a specific direction for text. Use the dir="rtl" or dir="ltr" attribute. Useful for languages like Arabic or Hebrew.

• <bdi> (BiDi Isolation): Isolates a span of text so its direction does not affect the surrounding text. Very useful when mixing different languages in user‑generated content.

• Use cases: Multilingual websites, internationalised applications, handling Arabic/Hebrew content.

Combined usage idea (text description)

Suppose you are writing an article introducing HTML, and you quote from the W3C specification:

• Use <blockquote> to quote a passage from the W3C about semantics.

• At the end of the quote, use <cite> to indicate the source: “HTML Living Standard”.

• When you introduce a new term like “semantic element”, wrap the first occurrence with <dfn> and explain it.

• For acronyms, use <abbr title="World Wide Web Consortium">W3C</abbr>.

• At the end of the article, use <address> to provide the author’s email and GitHub link.

Common mistakes to avoid

• ❌ Using <blockquote> only for indentation (use CSS margin instead).

• ❌ Wrapping multiple paragraphs inside <q> (<q> is an inline element; use <blockquote> for long quotes).

• ❌ Using <cite> to wrap an author’s name or a source URL – <cite> is only for the work title. The URL can go in the cite attribute of <blockquote> or as a regular <a> link.

• ❌ Forgetting to add a title attribute to <abbr> (losing the semantic value of the abbreviation).

• ❌ Using <address> for non‑contact information (e.g., an ordinary address inside the article body).

• ✅ Correct approach: Choose the appropriate tag based on content semantics, ensuring every quotation or definition has clear context.

Summary

HTML quotation and definition elements add rich semantic layers to your web pages. Using <blockquote>, <q>, <cite>, <dfn>, <abbr>, <address> and related tags correctly not only makes your document structure more robust but also greatly improves accessibility and SEO. Copy the code example above into your code runner, experiment with it, and observe how the different tags behave.