HTML Elements for Quotation and Citation

The HTML elements <blockquote>, <q>, <abbr>,
<address>, <cite>, and <bdo> will all be covered in this
chapter.

<blockquote> for Quotations in HTML

A passage that is quoted from another source is designated by the HTML
<blockquote> element.

<blockquote> elements are typically indented by browsers.

Example:

<!DOCTYPE html>
<html>
<head>
	<meta charset=“utf-8”>
	<meta name=“viewport” content=“width=device-width, initial-scale=1”>
	<title>HTML Elements for Quotation and Citation</title>
</head>
<body>
	<p>Browsers usually indent blockquote elements.</p>
	<blockquote cite=“https://www.blogger.com/”>
		Blogger is an American online content management system founded in 1999 which enables multi-user blogs with time-stamped entries. Pyra Labs developed it before being acquired by Google in 2003. Google hosts the blogs, which can be accessed through a subdomain of blogspot.com.
	</blockquote>
</body>
</html>



HTML <q> for Quick Quotes

A brief quotation is defined by the HTML “q” tag.

Normally, browsers enclose quotation marks around the text.

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>HTML Elements for Quotation and Citation</title>
</head>
<body>
    <p>Normally, browsers enclose quotation marks around the text</p>

    <p>Blogger goal is to: <q>Publish your passions your way. Whether you’d like to share your knowledge, experiences or the latest news, create a unique and beautiful blog</q></p>
</body>
</html>



HTML abbreviations <abbr>

The HTML <abbr> tag defines an acronym or abbreviation, such as
“HTML,” “CSS,” “Mr.,” “Dr.,” “ASAP,” or “ATM.”

Search engines, translation services, and browsers can all benefit from
abbreviation marking.

Use the global title attribute to make the abbreviation or acronym’s
description visible when you hover your cursor over the element.


Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>HTML Elements for Quotation and Citation</title>
</head>
<body>
    <p>The <abbr title=“Blogger”>Blogger</abbr> was founded in 1999.</p>

    <p>Marking up abbreviations can provide browsers, translation services, and search engines with vital information.</p>
</body>
</html>



HTML <address> for Contact Information

The contact information for the creator/owner of a page or article is
specified in the HTML <address> tag.

Contact information can include a phone number, email address, website,
physical address, and social media handles, among other things.

Italic text often appears in the <address> element, and browsers
always insert a line break before and after the <address>
element.

Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>HTML Elements for Quotation and Citation</title>
</head>
<body>
    <p>Contact information (author/owner) for a document or article is defined using the HTML address element.</p>

    <address>
    Written by John Doe.<br> 
    Visit us at:<br>
    examples.com<br>
    Box 4545, Disneyland<br>
    USA
    </address>
</body>
</html>




HTML <cite> for Work Title

The title of a creative work is specified via the HTML <cite> tag
(e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).
The title of a work is not always the name of the author.
Italic text normally appears where the citation element is present.


Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>HTML Elements for Quotation and Citation</title>
</head>
<body>
    <p>The title of a work is specified using the HTML city element.</p>
    <p>Browsers usually display cite elements in italic.</p>
    
    <img src=“scream.jpg” width=“220” height=“277” alt=“The Scream”>
    <p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
</address>
</body>
</html>

HTML <bdo> for Bi-Directional Override

Bi-Directional Override is referred to as BDO.
The current text direction can be overridden using the HTML <bdo>
tag:


Exaple:

<!DOCTYPE html>
<html>
<head>
    <meta charset=“utf-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1”>
    <title>HTML Elements for Quotation and Citation</title>
</head>
<body>

    <p>The following line will be written from right to left (rtl) if your browser allows bi-directional override (bdo):</p>
    <bdo dir=“rtl”>From right to left, write this line.</bdo>
	
</address>
</body>
</html>

Rate this post

Categorized in: