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.
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. |
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.
Did you like this article? If Yes, please give DataFlair 5 Stars on Google
