HTML - Quotations

Quiz

HTML quotations allow you to include and format quoted text within your web content. HTML provides tags such as <blockquote>, <q>, <cite>, <address>, <bdo>, and <abbr> to structure and style quotes.

These quotation 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 Elements

The following are the quotation elements that are used to insert and display quotations on the webpage:

Tag	Description
<q>	Defines a short inline quotation.
<blockquote>	Defines a block-level indented quotation.
<cite>	Specifies a reference to the title of a creative work, such as books or articles.
<address>	Defines contact information.
<bdo>	Overrides text direction.
<abbr>	Defines an abbreviation or acronym.

Short Quotation (<q>)

The <q> tag is used to define short (or inline) quotation marks in HTML, and the browsers often add quotation marks around it.

Syntax

The syntax to define a short quotation is:

<q>The content to be quoted</q>

Example

Following is an example of displaying a short (or inline) quotation on the webpage:

<!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>

Example

In the example below, we used the <q> tag on a particular text inside the <h1> tag:

<!DOCTYPE html>
<html>
<head>
   <title>HTML u tag</title>
</head>
<body>
   <h1>Welcome to <q> INDIA </q> Kids.</h1>
</body>
</html>

Block-level Quotation (<blockquote>)

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.

Syntax

The syntax to define a block-level quotation is:

<blockquote>The multiple line content to be quoted </blockquote>

Example

Following is an example of displaying a block-level quotation on the webpage:

<!DOCTYPE html>
<html>
<head>
   <title>HTML blockquote tag</title>
</head>
<body>
   <p>DLF stands for Delhi Land and Finance</p>
   <blockquote>Delhi Land and Finance is one of the largest commercial real estate developers in India. It is also engaged in the business of generation of power provision of maintenance services hospitality and recreational activities life insurance and retail chain outlets. Its internal business includes the development business and rental business. The development business of the Company is involved in the sale of residential spaces select commercial offices and commercial complexes. The company has a unique business model with earnings arising from development and rentals. </blockquote>
</body>
</html>

Example

Folloiwng is an example of using the "cite" attribute with the <blockquote> tag:

<!DOCTYPE html>
<html>
<head>
   <title>HTML blockquote tag</title>
</head>
<body>
   <h1>Tutorialspoint</h1>
   <p>Here is a quotation from Tutorialspoints 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>

Styling Quotation (<blockquote>)

You can style the <blockquote> tag using the CSS to give it a better look as per your webpage theme.

In the following example, we are setting some CSS properties such as background color, border, border width, and font color to make it more attractive:

<!DOCTYPE html>
<html>
<head>
   <title>HTML blockquote tag</title>
   <style>
      blockquote {
         background-color: #006969;
         color: #fff;
         border: 1px solid #333;
         border-radius: 8px;
         font-weight: 500;
         padding: 8px;
      }
   </style>
</head>
<body>
   <h1>Tutorialspoint</h1>
   <p>Here is a quotation from Tutorialspoints 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>

Cite a Quote (<cite>)

The <cite> tag 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.

Example

Here's a coding example −

<!DOCTYPE html>
<html>
<head>
   <title>Cite Tag Example</title>
</head>
<body>
   <p>The information is sourced from <cite>The Elements of Style</cite> by Strunk and White.</p>
</body>
</html>

In this example, '<cite>' is used to indicate the title of the referenced book.

Contact Information (<address>)

The <address> tag 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.

Example

Here's an example −

<!DOCTYPE html>
<html>
<head>
   <title>Address Tag Example</title>
</head>
<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>

In this example, the '<address>' tag is used to provide contact information, including an email link and a physical address.

Bi-Directional Override (<bdo>)

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.

Example

Here's an example −

<!DOCTYPE html>
<html>
<head>
   <title>Bi-Directional Override Example</title>
</head>
<body>
   <p>This text will go left to right.</p>
   <p><bdo dir="rtl">This text will go right to left.</bdo></p>
</body>
</html>

In this example, the text within the '<bdo>' tag is displayed from right to left, overriding the default left-to-right direction.

Abbreviations (<abbr>)

The <abbr> tag is used to define abbreviations or acronyms, i.e., you can define an optional title for full form to a specific word or sentence.

Example

Here's an example −

<!DOCTYPE html>
<html>
<head>
   <title>Abbreviation Tag Example</title>
</head>
<body>
   <p>Tim Berners-Lee, a British scientist, invented the <abbr title="World Wide Web">WWW</abbr> in 1989.</p>
</body>
</html>

In this example, <abbr> is used to abbreviate "World Wide Web" to "WWW," and the 'title' attribute provides the full description of the abbreviation.

Print Page