Quotation in HTML – Citation and BlockQuotes
Free Web development courses with real-time projects Start Now!!
Many times, there is a need to add quotation in HTML. These might include popular sayings, important references, or even addresses. Mostly, the <q> tag is used to define short quotations and the <blockquote> tag is used to define a large quotation. These quotations are displayed as a different text altogether, with different alignment, quotation marks, italicized, etc.
Quotation in HTML
Let us see HTML quotations with examples:
Syntax of HTML Quotations:
<q>Content</q>
For example,
Code-
<!DOCTYPE html> <html lang="en-US"> <head> </head> <body> <p>Welcome to DataFlair</p> <p><q>Brick by brick, DataFlair helped me build a future!</q></p> </html>
Output
To distinguish these quotes from the HTML document, the following quotation elements are useful-
1. Short Quotations(<q>)
To insert short quotations onto the HTML web page,the <q> element is used. It is a container element, and the text is displayed with quotation marks.
Syntax-
<q>Content</q>
For example,
Code-
<!DOCTYPE html> <html lang="en-US"> <head> </head> <body> <p>Welcome to DataFlair</p> <p><q>Welcome to DataFlair</q></p> </html>
Output-
<q> is usually used along with the <cite> element.
CSS styling used for short quotes-
a. q{
display: inline;
}
b. q:before{
content: open-quote;
}
c. q:after{
content: close-quote;
}
These attributes can be manipulated as per the developer’s preferences.
2. <blockquote> element
It is to represent some content that has been referenced from some other web-page. It is usually indented by the browser and is used to represent a large quotation, usually.
Syntax-
<blockquote>Content</blockquote>
For example,
Code-
<!DOCTYPE html> <html lang="en-US"> <head> </head> <body> <p>Welcome to DataFlair</p> <p><blockquote>Welcome to DataFlair</blockquote></p> </html>
Output-
Blockquotes are essential in dividing the web-page into sections. The <blockquote> tag not only gives a clear visibility that the presented text is a quotation but also serves to enhance the semantic mark-up of the html document. It also positively affects readability where using blockquotes can assist in subgrouping the quotes to ensure users can easily follow the flow of the content.
3. <address> element
In order to display an address on the HTML web-page, we use the <address> element. The address could be anything i.e., physical address, e-mail address, social media handle, etc. It is a container element and the text within it is emphasized.
Syntax-
<address>Content</address>
For example,
Code-
<!DOCTYPE html> <html lang="en-US"> <head> </head> <body> <p>Welcome to DataFlair</p> <p><address>Welcome to DataFlair</address></p> </html>
Output-
4. <abbr> element
This element specifies the usage of an abbreviation within the HTML document. In order to show the real word of the acronym/abbreviation, the title attribute can be used.
Syntax-
<abbr>Content</abbr>
For example,
Code-
<!DOCTYPE html> <html lang="en-US"> <head> </head> <body> <p>Welcome to DataFlair</p> <p><abbr title="DataFlair E-Learning">DataFlair</abbr></p> </html>
Output-
5. <cite> element
This element specifies the title of some work that has been taken as a reference. It must include the title of the work and is represented as italics, or as emphasized text.
Syntax-
<cite>Content</cite>
For example,
Code-
<!DOCTYPE html> <html lang="en-US"> <head> </head> <body> <p>Welcome to DataFlair</p> <p><cite>DataFlair E-Learning"</cite></p> </html>
Output-
6. <bdo> element
<bdo> stands for bi-directional text override, and it overrides the current directionality of the text within its tags. It is a container element. We will use the direction (‘dir’ attribute) as ‘rtl’ to display the text from right to left.
Syntax-
<bdo dir=””>Content</bdo>
For example,
Code-
<!DOCTYPE html> <html lang="en-US"> <head> </head> <body> <p>Welcome to DataFlair</p> <p><bdo dir="rtl">Welcome to DataFlair</bdo></p> </html>
Output-
| Tag | Function |
| <abbr> | It defines an acronym or abbreviation. |
| <address> | This is to define the address or contact information of the owner or the organization. |
| <bdo> | It’s for defining the direction of the text. |
| <blockquote> | It defines a particular section that has been taken from another source. |
| <cite> | This is to define the work’s title. |
| <q> | It defines and displays a short quotation. |
These elements are not only useful in formatting text or its parts but also contribute to the semantic significance of the content presented. In this way, developers can avoid the improper use of such tags with these considerations to make their web pages more accessible to users. It also helps to enhance the SEO of the web page since the appropriate use of tags helps the search engines to put the content in the right context easier.
Summary
In this article, we have learned how to display quotations in HTML. HTML quotation elements are useful to add quotations on an HTML web-page. We have studied the major quotation elements such as <q> for short quotations, <blockquote> for large quotations, <abbr> for acronyms,<address> for contact details and house addresses,<cite> for designation or work title and <bdo> for bidirectional override.
We work very hard to provide you quality material
Could you take 15 seconds and share your happy experience on Google
