View Categories

HTML – Quotations

Table of Contents

Quotations in HTML allow you to format quoted text effectively within your web content. These tags help maintain proper formatting and enhance the semantic meaning of quoted content on your web pages. By incorporating quotes, you can structure information accurately, improving both the presentation and the reading experience for users.

HTML Quotation Tags List #

  • <q> Tag: For inline quotations.
  • <blockquote> Tag: For long block-level quotations.
  • <cite> Tag: For citing the source of a quote.
  • <address> Tag: For providing contact details.
  • <bdo> Tag: For overriding text direction.
  • <abbr> Tag: For abbreviations and acronyms.

Below are examples of each tag, along with their respective outputs.

1. HTML <q> Tag for Short Quotations #

The <q> tag is used for short, inline quotations in HTML. For longer quotations, the <blockquote> tag is preferable.

Example:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Quotations Example</title>
</head>
<body>
   <p>
      HTML stands for <q>Hypertext Markup Language</q>.
   </p>
   <p>
      It is the standard language for creating web pages and web applications.
   </p>
</body>
</html>

Output:

HTML stands for “Hypertext Markup Language.”

It is the standard language for creating web pages and web applications.

2. HTML <blockquote> Tag for Block Quotations #

The <blockquote> tag is used to quote a longer section of text. This tag is a block-level element, meaning it will display the quotation as a block.

Example:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Blockquote Example</title>
</head>
<body>
   <h2>Quote Example</h2>
   <blockquote>
      "HTML is not a programming language; it’s a markup language that defines the structure of your content."
   </blockquote>
</body>
</html>

Output:

HTML is not a programming language; it’s a markup language that defines the structure of your content.

3. HTML <cite> Tag for Citations #

The <cite> tag is used to reference the source of a quote, book, or other creative works.

Example:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Cite Example</title>
</head>
<body>
   <p>
      The information was sourced from <cite>Introduction to Web Development</cite>.
   </p>
</body>
</html>

Output:

The information was sourced from Introduction to Web Development.

4. HTML <address> Tag for Contact Information #

The <address> tag is used to define contact details for the author or owner of a document. This tag typically contains an email or physical address.

Example:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Address Example</title>
</head>
<body>
<address>
   Contact us at: <a href="mailto:info@coachingwallah.com">info@coachingwallah.com</a><br>
   Visit us at: 456 Knowledge Park, EduCity
</address>
</body>
</html>

Output:

Contact us at: info@coachingwallah.com
Visit us at: 456 Knowledge Park, EduCity

5. HTML <bdo> Tag for Text Direction #

The <bdo> tag (Bi-Directional Override) is used to override the default text direction. This is useful when displaying text in languages that are read from right to left.

Example:

<!DOCTYPE html>
<html>
<head>
   <title>HTML BDO Example</title>
</head>
<body>
   <p>This text is in the default direction (left to right).</p>
   <p><bdo dir="rtl">This text will be displayed right to left.</bdo></p>
</body>
</html>

Output:

This text is in the default direction (left to right).
This text will be displayed right to left.

6. HTML <abbr> Tag for Abbreviations #

The <abbr> tag is used to define abbreviations or acronyms. A title attribute is used to explain the abbreviation in detail when hovered over.

Example:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Abbreviation Example</title>
</head>
<body>
   <p>The abbreviation <abbr title="Hypertext Markup Language">HTML</abbr> is widely used in web development.</p>
</body>
</html>

Output:

The abbreviation HTML is widely used in web development.

By using these HTML quotation tags, you can provide a well-structured and visually appealing way of presenting quotes and cited sources on your web pages. Explore more on how you can improve the readability of your website with proper formatting techniques.

Want to learn HTML with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!

What are your Feelings

Leave your comment