Introduction
In this chapter, you will learn about HTML quotation and citation elements, which are used to display quotations and references in a standardized manner. These elements help in adding context and credibility to your content by clearly indicating quoted or cited material.
Blockquote Element
The <blockquote> element is used for longer quotations that are usually displayed as block elements. This tag indents the quoted text from both the left and right margins.
Syntax
<blockquote cite="URL">
Quoted text goes here.
</blockquote>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blockquote Example</title>
</head>
<body>
<h1>HTML Quotation and Citation Elements</h1>
<blockquote cite="https://www.example.com">
"This is an example of a blockquote. It is used for long quotations that are usually displayed as block elements."
</blockquote>
</body>
</html>
Q Element
The <q> element is used for shorter, inline quotations. It usually does not change the visual layout, but browsers often add quotation marks around the text.
Syntax
<q cite="URL">Quoted text goes here.</q>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Q Element Example</title>
</head>
<body>
<p>He said, <q cite="https://www.example.com">"This is an example of an inline quotation."</q></p>
</body>
</html>
Cite Element
The <cite> element is used to reference the title of a work, such as a book, article, or movie. It is typically rendered in italic by default.
Syntax
<cite>Title of the work</cite>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cite Element Example</title>
</head>
<body>
<p>I recently read <cite>The Great Gatsby</cite> by F. Scott Fitzgerald.</p>
</body>
</html>
Abbr Element
The <abbr> element is used to define an abbreviation or acronym, providing a full description of the term when hovered over by the user.
Syntax
<abbr title="Full Description">Abbreviation</abbr>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Abbr Element Example</title>
</head>
<body>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</body>
</html>
Address Element
The <address> element is used to define contact information for the author or owner of a document. This typically includes an email address, physical address, or other contact details.
Syntax
<address>
Contact information goes here.
</address>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Address Element Example</title>
</head>
<body>
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>
BDO Element
The <bdo> element (Bidirectional Override) is used to override the current text direction. This is useful for displaying text in a different direction than the default.
Syntax
<bdo dir="ltr|rtl">Text</bdo>
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BDO Element Example</title>
</head>
<body>
<p>Normal text direction: <bdo dir="rtl">This text will be displayed right-to-left.</bdo></p>
</body>
</html>
Conclusion
HTML quotation and citation elements provide a standardized way to display quotations and references, enhancing the credibility and readability of your content. By using elements like <blockquote>, <q>, <cite>, <abbr>, <address>, and <bdo>, you can clearly indicate quoted material and references, making your web pages more informative and professional.