HTML - Quotations

Quotations in HTML allow you to include and format quoted text within your web content. These are used to quote any sentence or keyword, there are list of tags that are used to create quotation.

These tags help maintain proper formatting and semantics, enhancing the presentation and meaning of quoted content on web pages. Incorporating quotes is essential for conveying information accurately and providing a well-organized reading experience for users.

HTML Quotation Tags List

HTML <q> Tag
HTML <blockquote> Tag
HTML <cite> Tag
HTML <address> Tag
HTML <bdo> Tag
HTML <abbr> Tag

Below we have used each tag for quotation, each tag has it's default styling few of them accepts some attributes but we did not use any attribute to change it's default style.

HTML "<q>" for Quotations

We use <q> tag, to add short quotation marks in HTML. And if we want to quote for multiple lines, use <blockquote> tag. We can also use the cite attribute inside the <blockquote> tag to indicate the source of the quotation in URL form.

Example

<!DOCTYPE html>
<html>
<head>
   <title>HTML Quotation tag</title>
</head>
<body>
   <p>
      DLF stands for <q>Delhi Land and Finance</q>
   </p>
   <p>
      Delhi Land and Finance is one of the largest 
      commercial real estate developer in India.
   </p>
</body>
</html>

Output

DLF stands for Delhi Land and Finance

Delhi Land and Finance is one of the largest commercial real estate developer in India.

HTML "<blockquote>" for Quotations

The <blockquote> tag is to indicate long quotations. It should contain only block-level elements within it and not just plain text. It specifies a section quoted from another source and contains only block-level elements. We can also use the cite attribute inside the <blockquote> tag to indicate the source of the quotation in URL form.

Example 1

<!DOCTYPE html>
<html>

<body>
   <p>
      About Tutorialspoint
   </p>
   <blockquote>
      Tutorialspoint originated from the idea that there exists 
      a class of readers who respond better to online content and
      prefer to learn new skills at their own pace from the comforts 
      of their drawing rooms.
   </blockquote>
</body>

</html>

Output

About Tutorialspoint
Tutorialspoint originated from the idea that there exists a class of readers who respond
better to online content and prefer to learn new skills at their own pace from the comforts 
of their drawing rooms.

Example 2

<!DOCTYPE html>
<html>

<body>
   <h1>Tutorialspoint</h1>
   <p>
      Here is a quotation from Tutorialspoint’s official website
   </p>
   <blockquote cite="https://www.tutorialspoint.com">
      Join our millions of loyal visitors to access our free Text Library. 
      From programming languages and web development to data science and 
      cybersecurity, our masterfully crafted Tutorials will help you master 
      any technology or concept from scratch.
   </blockquote>
</body>

</html>

Output

Here is a quotation from Tutorialspoint’s official website

Join our millions of loyal visitors to access our free Text Library. From programming languages and web development to data science and cybersecurity, our masterfully crafted Tutorials will help you master any technology or concept from scratch.

HTML "<cite>" for Quotations

The <cite> tag in HTML is used to reference the title of a creative work, such as a book, movie, or song, within the content. It provides semantic meaning to the citation. Here's a coding example −

Example

<!DOCTYPE html>
<html>

<body>
   <p>
      The information is sourced from 
      <cite>The Elements of Style</cite> 
      by Strunk and White.
   </p>
</body>

</html>

Output

The information is sourced from The Elements of Style by Strunk and White.

HTML "<address>" for Quotations

The <address> tag in HTML is used to define the contact information for the author or owner of a document. It often includes details such as an email address, physical address, or other relevant contact information. Here's an example −

Example

<!DOCTYPE html>
<html>
<body>
<address>
   Contact us at: <a href="mailto:info@example.com">info@example.com</a><br>
   Visit us at: 123 Main Street, Cityville
</address>
</body>
</html>

Output

Contact us at: info@example.com

Visit us at: 123 Main Street, Cityville

HTML "<bdo>" for Quotations

The <bdo> tag in HTML, bdo stands for Bi-Directional Override, is used to override the current text direction. It is commonly used in situations where the default text direction needs to be changed, such as for displaying text from right to left. Here's an example −

Example

<!DOCTYPE html>
<html>

<body>
   <p>This text will go left to right.</p>
   <p><bdo>
      Welcome to Tutorialspoint.
   </bdo></p>
</body>

</html>

Output

Welcome to Tutorialspoint.

HTML "<abbr>" for Quotations

The <abbr> tag in HTML is used to define abbreviations or acronyms. In this example, <abbr> is used to abbreviate the name "Abhishek" to "Abhy," and the 'title' attribute provides the full description of the abbreviation.

Example

<!DOCTYPE html>
<html>
<head>
   <title>Abbreviation Tag Example</title>
</head>
<body>
   <p>My best friend's name is <abbr title="Abhishek">Abhy</abbr>.</p>
</body>
</html>

Output

My best friend's name is Abhy.

Print Page