html

HTML Quotations

HTML quotation elements are utilized to add the quoted text to a web page/site. The appearance of quoted text will differ from the normal text. In HTML multiple quotation elements are available and among them most commonly used elements are listed below:

  • <q>
  • <blockquote>
  • <bdo>
  • <address>
  • <cite>

This write-up will deliver a step-by-step guide for the HTML quotation elements. Let’s start with the <q> element.

HTML Short-Quotation

To add short quotations (usually one line quotations) in a paragraph, HTML provides <q> element. The output of <q> will be enclosed in the double quotation mark (“”).

Syntax of <q> element will be as follows:

<q>insert short quotation </q>

How to use <q> element in HTML

To figure out how <q> element work, you can follow the code stated below:

<p> <q>This is a Short Quotation</q></p>

The above snippet will provide the following output:

HTML Quotations

The <blockquote> element is mostly used for the extended (more than one line) quotes. It determines that “this part is cited from some other source”. The <blockquote> element accepts one attribute “cite” to determine the source of the quoted content.

The syntax is described below:

<blockquote cite="URL"></blockquote>

How to use <blockquote> element in HTML

Consider the below given example to quote the content from any other website:

<blockquote cite="https://linuxhint.com">

Welcome to linuxhint. Here you can read articles for Linux, Java, JavaScript, HTML, CSS, and many more.

</blockquote>

The above script utilized the <blockquote> element to cite a para from linuxhint.com. The citation of the quoted paragraph is provided in the starting element.

HTML Bi-Directional Override

The <bdo> tag is used to reverse the direction of content. It takes an attribute “dir” to set the content’s direction. It takes one attribute “dir” which will take either “ltr” to direct the content from left to the right direction or “rtl” to direct the content from right to left.

Example Let’s consider the below given example to find out how <bdo> tag works:

<p><bdo dir="rtl">You can read the best articles at linuxhint.com</bdo></p>

The above code will provide the following output:

HTML Address

The <address> element is used for specifying the contact details about the author. These details can be related to his email address, contact number, social media accounts, etc. The contact specified within the <address> element will be depicted in the italic font style.

Example

The below-given piece of code will show the working of <address> element

<address>

Name of the Author Danial <br>

Come Visit Us<br>

[email protected]

</address>

The above mentioned code will produce the following output:

HTML Citations

The cite tag determines the title of creative work e.g. a book, research article, etc. Basically, the HTML <cite> element determines the source of any content and it is utilized to highlight any work profile, work title, etc. Anything specified within the <cite> element will be depicted on the browser in the “italic” style.

Following will be the syntax for the <cite> tag:

<cite> citation</cite>

How to use <cite> element in HTML

The below-given piece of code will write a citation of the website

<p>You can read the best articles at <cite>linuxhint.com</cite></p>

The above snippet will declare the following output:

Conclusion

HTML provides multiple quotation elements like <q> element for short quotations, <blockquote> for quoted section, <bdo> to reverse the direction of content, <address> for author’s details, and so on. HTML quotation elements specify the quoted content within the quotations and this write-up considered some frequently used quotation elements and explained these elements with the help of examples.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.