HTML Quotation and Citation Elements | HTML Tutorial for Beginners
In this lesson, we will go through the <blockquote>,<q>, <abbr>, <address>, <cite>, and <bdo> HTML elements.
The meaning of HTML Quotation is clear here to quote any line or paragraph.
It is used to mark the words spoken by a website or someone so that the user's attention can be drawn towards it.
It can also be used to tell a special comment or profile of a user on your website.
{tocify} $title={Table of Contents}
Quotation and Citation Elements
| Tag | Description |
|---|---|
| <blockquote> | Defines a section that is quoted from another source |
| <q> | Defines a short inline quotation |
| <abbr> | Defines an abbreviation or acronym |
| <address> | Defines contact information for the author/owner of a document |
| <cite> | Defines the title of a work |
| <bdo> | Defines the text direction |
<blockquote> - The Block Quotation element
HTML <blockquote> tag is utilised to determine a block of text which is quoted from another source. The Browser usually shows the content within <blockquote> tag as indented text.
If you like to insert a long quote, then use <blockquote>, and for short or inline quotes, use <q> tag.
Global attributes
The <blockquote> tag supports all the global attributes in HTML.
Event attributes
The <blockquote> tag supports all event attributes in HTML.
Syntax
The <blockquote> tag comes in pairs. The content is documented between the opening(<blockquote>) and closing (</blockquote>) tags.<blockquote> quoted text......</blockquote>{codeBox}
Example of the HTML <blockquote> tag:
<!DOCTYPE html><html><head><title>Blockquote tag</title></head><body><h2>Example of blockquote tag</h2><p>A Great Motivational Quote :</p><blockquote cite="https://www.brainyquote.com/authors/erin_cummings"><p> At the end of the day, your success or failure is all up to you. And the sooner you come to understand that, embrace it, and incorporate that into your work ethic, the sooner you'll start to succeed. You will always be a failure if you continue to put the blame on others for your lack of success. </p></blockquote><cite> Erin Cummings </cite></body></html>{codeBox}
Output:
Erin CummingsAt the end of the day, your success or failure is all up to you. And the sooner you come to understand that, embrace it, and incorporate that into your work ethic, the sooner you'll start to succeed. You will always be a failure if you continue to put the blame on others for your lack of success.
<q> - The Inline Quotation element (for Short Quotations)
The HTML <q> tag defines a short quotation.
HTML q tag is used to put small quotation. To do so, write your text within <q>.............</q> tag.
<p> Awesome quote on love and life.</p><p> Dr. Seuss earlier said : <q>Reality is finally more reasonable than your dreams.</q></p>{codeBox}
Output:
Awesome quote on love and life.
Dr. Seuss earlier said : Reality is finally more reasonable than your dreams.
<abbr> HTML Tag: Here's When To Utilize It With Abbreviations
The HTML <abbr> tag represents an acronym or abbreviation of a longer word or phrase, such as www, HTML, HTTP, etc.
The content documented between <abbr> tags renders with dotted underlines in some browsers.
This tag can be utilized with the "title" attribute (optional), and the value of the title attribute will be pop-up when the mouse hovers over the content written between <abbr> tag.
Global attributes:
The <abbr> tag supports the global attributes.
Event Attributes:
The <abbr> tag supports the event attributes.
Syntax
<abbr title="HyperText Markup language"> HTML </abbr>{codeBox}
Example
With title Attribute:
<!DOCTYPE html><html><head><title>Abbreviation Tag</title></head><body><h2>Abbreviation tag example</h2><p><b>Hover mouse over the content and see the abbreviation</b</p><abbr title="Hyper Text Transfer protocol">HTTP</abbr></body></html>{codeBox}
Output:
Hover mouse over the content and see the abbreviation HTTP
HTML: <address> Tag - The Contact Address element
HTML <address> tag is used to specify the authorship information of the article or webpage. It can contain any needed information, such as URL, physical address, phone number, email, other links, etc.
The <address> tag is useful for various contexts, such as business contact information in the page's header, or author-related contact information, etc.
The contact information written between <address> tags mostly renders in italic form on the browser.
Note: To describe a random address, use <p> tag rather than <address> tag, as it should include the main contact details.
Attributes
The <address> tag does not contain any specific attribute for it.
Global Attribute:
The <address> tag supports the global attributes.
Event attribute:
The <address> tag supports all Events attributes.
Syntax
<address>Contact Author at:<br><a href="mailto:example@gmail.com">Example@gmail.com</a></address>{codeBox}
Suppose you want to specify the information of the author for an article. In that case, you must place the <address> tag inside the <article> element.{alertSuccess}
Example
<!DOCTYPE html><html><head><title>Address Tag</title></head><body><h2>Example of Address tag</h2><address>The article is written by:<b>Harshita</b> <br>Contact Author at:<a href="mailto:example@gmail.com">Example@gmail.com</a><br>You can also visit our blog:<a href="http://akashtimes.blogspot.com/">javaTpoint blog</a></address></body></html>{codeBox}
Output:
The article is written by:Akash
Contact Author at: Example@gmail.com
You can also visit our blog: google
Contact Author at: Example@gmail.com
You can also visit our blog: google
HTML <cite> - The Citation element (for Work Title)
HTML <cite> tag determines a citation; it provides a reference or title to a creative work, quoted content, books, websites, a research paper, a blog spot, a painting, etc.
The major purpose of adding <cite> element is to deliver or determine the source of the quote or any content.
The content written between <cite> tags renders in the italic form on the browser, and it can be overridden using CSS in your HTML document.
Attribute
Tag-specific attribute
HTML <cite> tag does not contain any specific attribute.
Global Attribute
HTML <cite> tag supports all Global attributes in HTML
Event Attribute
HTML <cite> tag supports all Event attributes in HTML.
Syntax
<cite> Cited Content....... </cite>{codeBox}
Example:
<!DOCTYPE html><html><head><title>Cite Tag</title></head><body><h2>Example of cite tag</h2><img src="https://upload.wikimedia.org/wikipedia/commons/8/8b/Katrina_Kaif_promoting_Bharat_in_2019.jpg" height="150" width="120"><p>A famous face: <cite> Katrina Kaif </cite> (pronounced [kəˈʈriːna kɛːf]; born Katrina Turquotte; 16 July 1983) </p></body></html>{codeBox}
Output:
A famous face: Katrina Kaif (pronounced [kəˈʈriːna kɛːf]; born Katrina Turquotte; 16 July 1983)
HTML <bdo> for Bi-Directional Override
HTML <bdo> tag stands for "bidirectional override," which is used to override the current/default text direction.
This tag sets the direction of content within it to render on the browser from left to right or right to left.
The <bdo> tag is useful for languages written from right to left, such as Arabic and Hebrew.
Attributes
Tag-specific attributes
| Attribute | Value | Description |
|---|---|---|
| dir | ||
| ltr | Defines the directionality from left to right. | |
| rtl | Defines the directionality from right to left. |
Global Attributes
The <bdo> tag supports the Global attribute in HTML.
Event Attributes
The <bdo> tag supports the Event attribute in HTML.
Syntax
<bdo dir=" "> Content......</bdo>{codeBox}
Example:
<!DOCTYPE html><html><head><title>Bdo tag</title></head><body><h2>Example of HTML bdo tag</h2><p style="color:#ff4040">This is Normal Content with default directionality</p><p>This is with left to right directionality: <bdo dir="ltr" style="color: #5f9ea0">A beautiful Flower</bdo> </p><p>This is with right to left directionality: <bdo dir="rtl" style="color:#68228b">A beautiful Flower</bdo> </p></body></html>{codeBox}
Output:
This is Normal Content with default directionality
This is with left to right directionality: A beautiful Flower
This is with right to left directionality: A beautiful Flower
Conclusion:
Friends, according to my expertise, I have written complete information to help you on “HTML Quotation and Citation Elements.” If this post is favourable for you or not, please tell me by commenting.
If you liked this post, do not forget to share it with your friends so they can get information about it.
You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.
Please tell us through the comment section if you think we miss anything.
