HTML Quotation and Citation Elements
HTML provides special elements to handle quotations and citations, making it easier to present quoted or referenced content correctly and semantically on a web page.
Common Quotation & Citation Elements
There is a list of some important formatting tags.
| Tag | Purpose | Example | OutPut |
| <blockquote> | For long, block-level quotations | <blockquote>Quote here...</blockquote> | Quote here... |
| <q> | For short, inline quotations | <q>Short quote</q> | Short quote |
| <cite> | For citing a creative work (e.g., book, movie, article) | <cite>Hamlet</cite> | Hamlet |
| <u> | Underlined text | <u>Underlined</u> | Underlined |
| <abbr> | For abbreviations, with explanation | <abbr title="World Health Organization">WHO</abbr> | WHO |
| <address> | For contact information | <address>Email: info@example.com</address> | Email: info@example.com |
| <bdo> | For changing text direction | <bdo>Right to Left</bdo> | Right to Left |
Example:
1. Blockquote (for long quotations):
<!DOCTYPE html>
<html>
<head>
<title> Page Title </title>
</head>
<body>
<blockquote> "The only limit to our realization of tomorrow is our doubts of today." </blockquote>
</body>
</html>
Output
2. Inline quote:
<!DOCTYPE html>
<html>
<head>
<title> Page Title </title>
</head>
<body>
<p>He said, <q>Learning never exhausts the mind. </q> </p>
</body>
</html>
Output
3. Citing a source:
<!DOCTYPE html>
<html>
<head>
<title> Page Title </title>
</head>
<body>
<p> <cite>The Great Gatsby </cite> by F. Scott Fitzgerald </p>
</body>
</html>
Output
4. Abbreviation:
<!DOCTYPE html>
<html>
<head>
<title> Page Title </title>
</head>
<body>
<b> <abbr title="HyperText Markup Language" HTML </abbr> is a markup language. </p>
</body>
</html>
Output
