{"id":78648,"date":"2020-06-26T09:00:20","date_gmt":"2020-06-26T03:30:20","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=78648"},"modified":"2024-07-26T13:30:10","modified_gmt":"2024-07-26T08:00:10","slug":"quotations-in-html","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/quotations-in-html\/","title":{"rendered":"Quotation in HTML – Citation and BlockQuotes"},"content":{"rendered":"

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.<\/p>\n

\"Quotations<\/a><\/p>\n

Quotation in HTML<\/h2>\n

Let us see HTML quotations with examples:<\/p>\n

Syntax of HTML Quotations:
\n<q>Content<\/q><\/strong><\/p>\n

For example,
\nCode-<\/strong><\/p>\n

<!DOCTYPE html>\r\n<html lang=\"en-US\">\r\n<head>\r\n<\/head>\r\n <body>\r\n<p>Welcome to DataFlair<\/p>\r\n<p><q>Brick by brick, DataFlair helped me build a future!<\/q><\/p>\r\n<\/html>\r\n\r\n<\/pre>\n
Output<\/strong><\/p>\n
\"HTML<\/a><\/p>\n
To distinguish these quotes from the HTML document, the following quotation elements are useful-<\/p>\n
1. Short Quotations(<q>)<\/h3>\n
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.
\nSyntax-<\/strong>
\n<q>Content<\/q><\/strong>
\nFor example,<\/p>\n
Code-<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en-US\">\r\n<head>\r\n<\/head>\r\n <body>\r\n<p>Welcome to DataFlair<\/p>\r\n<p><q>Welcome to DataFlair<\/q><\/p>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
 <\/p>\n
<q> is usually used along with the <cite> element.
\nCSS styling used for short quotes-<\/strong><\/p>\n
a.<\/strong> q{
\ndisplay: inline;
\n}<\/p>\n
b.<\/strong> q:before{
\ncontent: open-quote;
\n}<\/p>\n
c.<\/strong> q:after{
\ncontent: close-quote;
\n}<\/p>\n
These attributes can be manipulated as per the developer\u2019s preferences.<\/p>\n
2. <blockquote> element<\/h3>\n
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.
\nSyntax-<\/strong>
\n<blockquote>Content<\/blockquote><\/strong><\/p>\n
For example,
\nCode-<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en-US\">\r\n<head>\r\n<\/head>\r\n <body>\r\n<p>Welcome to DataFlair<\/p>\r\n<p><blockquote>Welcome to DataFlair<\/blockquote><\/p>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
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.<\/p>\n
3. <address> element<\/h3>\n
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.
\nSyntax-<\/strong>
\n<address>Content<\/address><\/strong><\/p>\n
For example,
\nCode-<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en-US\">\r\n<head>\r\n<\/head>\r\n <body>\r\n<p>Welcome to DataFlair<\/p>\r\n<p><address>Welcome to DataFlair<\/address><\/p>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
4. <abbr> element<\/h3>\n
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.
\nSyntax-<\/strong>
\n<abbr>Content<\/abbr><\/strong><\/p>\n
For example,
\nCode-<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en-US\">\r\n<head>\r\n<\/head>\r\n <body>\r\n<p>Welcome to DataFlair<\/p>\r\n<p><abbr title=\"DataFlair E-Learning\">DataFlair<\/abbr><\/p>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
5. <cite> element<\/h3>\n
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.
\nSyntax-<\/strong>
\n<cite>Content<\/cite><\/strong><\/p>\n
For example,
\nCode-<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en-US\">\r\n<head>\r\n<\/head>\r\n <body>\r\n<p>Welcome to DataFlair<\/p>\r\n<p><cite>DataFlair E-Learning\"<\/cite><\/p>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n
6. <bdo> element<\/h3>\n
<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 (\u2018dir\u2019 attribute) as \u2018rtl\u2019 to display the text from right to left.
\nSyntax-<\/strong>
\n<bdo dir=\u201d\u201d>Content<\/bdo><\/strong><\/p>\n
For example,
\nCode-<\/strong><\/p>\n
<!DOCTYPE html>\r\n<html lang=\"en-US\">\r\n<head>\r\n<\/head>\r\n <body>\r\n<p>Welcome to DataFlair<\/p>\r\n<p><bdo dir=\"rtl\">Welcome to DataFlair<\/bdo><\/p>\r\n<\/html>\r\n<\/pre>\n
Output-<\/strong><\/p>\n
\"html<\/a><\/p>\n\n\n\n\n\n\n\n\n\n
Tag<\/b><\/td>\nFunction<\/b><\/td>\n<\/tr>\n
<abbr><\/span><\/td>\nIt\u00a0 defines an acronym or abbreviation.<\/span><\/td>\n<\/tr>\n
<address><\/span><\/td>\nThis is to define the address or contact information of the owner or the organization.<\/span><\/td>\n<\/tr>\n
<bdo><\/span><\/td>\nIt’s for defining the direction of the text.<\/span><\/td>\n<\/tr>\n
<blockquote><\/span><\/td>\nIt defines a particular section that has been taken from another source.<\/span><\/td>\n<\/tr>\n
<cite><\/span><\/td>\nThis is to define the work\u2019s title.<\/span><\/td>\n<\/tr>\n
<q><\/span><\/td>\nIt defines and displays a short quotation.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
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.<\/p>\n
Summary<\/h2>\n
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.<\/p>\n","protected":false},"excerpt":{"rendered":"
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>...<\/p>\n","protected":false},"author":10,"featured_media":78710,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22400],"tags":[32745,22457],"class_list":["post-78648","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","tag-html-blockquote-tag","tag-quotation-in-html"],"yoast_head":"\nQuotation in HTML - Citation and BlockQuotes - DataFlair<\/title>\n<meta name=\"description\" content=\"Learn about quotations in HTML - Their syntax and major quotation elements such as for short quotations, for large quotations, for acronyms etc\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/quotations-in-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Quotation in HTML - Citation and BlockQuotes - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Learn about quotations in HTML - Their syntax and major quotation elements such as for short quotations, for large quotations, for acronyms etc\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/quotations-in-html\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-06-26T03:30:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-26T08:00:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Quotations-in-HTML.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Quotation in HTML - Citation and BlockQuotes - DataFlair","description":"Learn about quotations in HTML - Their syntax and major quotation elements such as for short quotations, for large quotations, for acronyms etc","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/quotations-in-html\/","og_locale":"en_US","og_type":"article","og_title":"Quotation in HTML - Citation and BlockQuotes - DataFlair","og_description":"Learn about quotations in HTML - Their syntax and major quotation elements such as for short quotations, for large quotations, for acronyms etc","og_url":"https:\/\/data-flair.training\/blogs\/quotations-in-html\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2020-06-26T03:30:20+00:00","article_modified_time":"2024-07-26T08:00:10+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Quotations-in-HTML.jpg","type":"image\/jpeg"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/quotations-in-html\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/quotations-in-html\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/a90b082e16aa38d207212d22b0581f33"},"headline":"Quotation in HTML – Citation and BlockQuotes","datePublished":"2020-06-26T03:30:20+00:00","dateModified":"2024-07-26T08:00:10+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/quotations-in-html\/"},"wordCount":750,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/quotations-in-html\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Quotations-in-HTML.jpg","keywords":["HTML blockquote tag","Quotation in HTML"],"articleSection":["HTML Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/quotations-in-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/quotations-in-html\/","url":"https:\/\/data-flair.training\/blogs\/quotations-in-html\/","name":"Quotation in HTML - Citation and BlockQuotes - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/quotations-in-html\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/quotations-in-html\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Quotations-in-HTML.jpg","datePublished":"2020-06-26T03:30:20+00:00","dateModified":"2024-07-26T08:00:10+00:00","description":"Learn about quotations in HTML - Their syntax and major quotation elements such as for short quotations, for large quotations, for acronyms etc","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/quotations-in-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/quotations-in-html\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/quotations-in-html\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Quotations-in-HTML.jpg","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2020\/06\/Quotations-in-HTML.jpg","width":1200,"height":628,"caption":"Quotations in HTML"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/quotations-in-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"HTML Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/html\/"},{"@type":"ListItem","position":3,"name":"Quotation in HTML – Citation and BlockQuotes"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/a90b082e16aa38d207212d22b0581f33","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/dd6de0d647a0185cd6faf264e4ba860b0d85d08d7070766f9cd41bea5bb0b227?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"The DataFlair Team is passionate about delivering top-notch tutorials and resources on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. With expertise in the tech industry, we simplify complex topics to help learners excel. Stay updated with our latest insights.","url":"https:\/\/data-flair.training\/blogs\/author\/dfadteam1\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/78648","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=78648"}],"version-history":[{"count":4,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/78648\/revisions"}],"predecessor-version":[{"id":142945,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/78648\/revisions\/142945"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/78710"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=78648"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=78648"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=78648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}