Skip to main content

Using Quotes in HTML (Live Playground)

Introduction​

Quotes are an essential part of web content, allowing you to include quotations from external sources or highlight specific text within your content. In this tutorial, you will learn how to use blockquotes and inline quotes in HTML using the <blockquote>, <q>, and <cite> elements, and understand the importance of proper citation and accessibility.

Blockquotes​

To create a blockquote in HTML, use the <blockquote> element. The blockquote element represents a section of content that is quoted from another source. It is typically displayed as an indented block of text, visually distinct from the surrounding content. Here's an example of a simple blockquote:

HTML
<blockquote>The only way to do great work is to love what you do. - Steve Jobs</blockquote>
Live Playground, Try it Yourself

Inline Quotes​

For inline quotations within a paragraph, use the <q> element. The <q> element automatically adds the appropriate quotation marks based on the language of the document. Here's an example of an inline quote:

HTML
<p>Steve Jobs once said, <q>The only way to do great work is to love what you do</q>.</p>
Live Playground, Try it Yourself

Citing Sources​

To properly cite the source of a quote, use the <cite> element. The <cite> element represents the title of a work, such as a book, article, or website, from which the quote is taken. Combine the <cite> element with the cite attribute on the <blockquote> or <q> element to provide the URL of the source. Here's an example of a blockquote with proper citation:

HTML
<blockquote cite="https://example.com/source">
  The only way to do great work is to love what you do. - Steve Jobs
  <footer>
    <cite>
      <a href="https://example.com/source">Source Title</a>
    </cite>
  </footer>
</blockquote>
Live Playground, Try it Yourself

Styling Quotes​

You can use CSS to style your quotes, such as changing the font, text color, and indentation. It's recommended to use an external CSS file for styling. Here's an example of how to style quotes using an external stylesheet:

HTML
<!-- Add a link to the external CSS file in the head section of your HTML document -->
<link rel="stylesheet" href="styles.css" />

In your styles.css file, add the following CSS rules:

CSS
/* Style blockquotes */
blockquote {
  margin: 20px 0;
  padding-left: 30px;
  border-left: 3px solid #ccc;
  font-style: italic;
  color: #666;
}

/* Style inline quotes */
q {
  quotes: '“' '”' '‘' '’';
  color: #666;
}

/* Style cite elements */
cite {
  font-style: normal;
  font-weight: bold;
}
Live Playground, Try it Yourself

Conclusion​

Quotes are an important part of web content, allowing you to include quotations from external sources or highlight specific text within your content. In this tutorial, you learned how to use blockquotes and inline quotes in HTML using the <blockquote>, <q>, and <cite> elements, and understand the importance of proper citation and accessibility.