HTML quotations are used to display quoted text from another person, source, article, book, website, or other content. HTML provides specific elements for different types of quotations, including <q> for short inline quotations and <blockquote> for longer quotations.

Using the correct quotation element gives your HTML document meaningful structure and helps browsers understand the purpose of the content. Quotations are commonly used in blogs, educational websites, news articles, research pages, interviews, and documentation.

What Are HTML Quotations?

HTML quotations are pieces of text that are taken from another source or person. HTML provides semantic elements that allow developers to mark this content correctly.

For example, a short quotation can be written using the <q> element:

<p>
  <q>Learning never stops.</q>
</p>

A longer quotation can be displayed using the <blockquote> element:

<blockquote>
  Learning is a continuous process that helps people develop
  knowledge and new skills.
</blockquote>

The element you choose depends on the length and purpose of the quotation.

HTML <q> Element

The <q> element is used for short, inline quotations.

For example:

<p>
  Albert Einstein once said,
  <q>Imagination is more important than knowledge.</q>
</p>

The <q> element is useful when the quotation is part of a sentence or paragraph.

Most modern browsers automatically display quotation marks around the text inside the <q> element.

You do not normally need to manually add quotation marks.

HTML <q> Example

Here is a complete example:

<!DOCTYPE html>
<html>
<head>
  <title>HTML Quotations</title>
</head>
<body>

  <h1>HTML Quotations</h1>

  <p>
    A famous saying is:
    <q>Practice makes perfect.</q>
  </p>

</body>
</html>

In this example, the quotation is short enough to appear within the paragraph.

The browser can automatically display quotation marks around the text.

HTML <blockquote> Element

The <blockquote> element is used for longer quotations.

Unlike <q>, which is normally used inside a sentence, <blockquote> represents a separate block of quoted content.

For example:

<blockquote>
  The future belongs to those who believe in the beauty of their dreams.
</blockquote>

The browser usually displays a block quotation separately from the surrounding content.

This element is useful when quoting longer passages from books, articles, speeches, interviews, or other sources.

HTML <blockquote> Example

Here is a simple example:

<p>Here is a famous quotation:</p>

<blockquote>
  The only limit to our realization of tomorrow
  is our doubts of today.
</blockquote>

The <blockquote> element makes it clear that the content is a separate quotation.

You can also use CSS to change its appearance.

<style>
  blockquote {
    border-left: 4px solid #333;
    padding-left: 15px;
  }
</style>

This gives the quotation a visually distinct style.

Difference Between <q> and <blockquote>

The main difference is how the quotation is presented.

Element	Purpose
<q>	Short inline quotation
<blockquote>	Long or separate quotation

For example, use <q> when the quotation is part of a sentence:

<p>
  She said <q>HTML is easy to learn.</q>
</p>

Use <blockquote> when the quotation is longer:

<blockquote>
  HTML provides the basic structure of a webpage,
  allowing developers to organize text, images,
  links, and other content.
</blockquote>

HTML cite Attribute

The cite attribute can be used with <blockquote> to specify the source of the quotation.

For example:

<blockquote cite="https://example.com">
  This is an example of a quotation from another source.
</blockquote>

The cite attribute provides information about where the quotation came from.

The source URL is not normally displayed directly on the webpage.

The cite attribute is different from the <cite> element. The attribute identifies the source, while the <cite> element is used to identify the title of a creative work.

HTML <cite> Element

The <cite> element is used to identify the title of a creative work.

For example:

<p>
  My favorite book is <cite>The Great Gatsby</cite>.
</p>

The <cite> element can be used for titles such as:

• Books
• Movies
• Songs
• Paintings
• Articles
• Research papers
• Other creative works

For example:

<p>
  I recently watched <cite>Interstellar</cite>.
</p>

Here, Interstellar is the title of a movie.

HTML Quotation With a Source

You can combine <blockquote> with the cite attribute when you want to identify the source.

<blockquote cite="https://example.com/article">
  The web continues to evolve as new technologies
  make online experiences more interactive.
</blockquote>

This provides semantic information about the quotation’s source.

You can also identify the source visibly below the quotation:

<blockquote>
  Learning is a lifelong journey.
</blockquote>

<p>
  — <cite>Example Author</cite>
</p>

This makes the attribution visible to website visitors.

HTML Quotations With CSS

You can use CSS to customize the appearance of quotations.

For example:

<style>
  blockquote {
    margin: 20px 0;
    padding: 15px 20px;
    border-left: 4px solid #0073e6;
    background: #f5f5f5;
  }
</style>

The HTML remains responsible for the meaning and structure, while CSS controls the visual appearance.

This separation between HTML and CSS is an important part of creating well-structured webpages.

You can learn more about styling webpages in HTML Styles.

HTML Quotations in Articles

Quotations are commonly used in blog posts and articles.

For example:

<article>

  <h1>Importance of Learning HTML</h1>

  <p>
    HTML is one of the fundamental technologies used to create webpages.
  </p>

  <blockquote>
    The web is for everyone.
  </blockquote>

  <p>
    This idea highlights the importance of creating accessible
    and user-friendly websites.
  </p>

</article>

Using <blockquote> makes the quotation clearly distinguishable from the rest of the article.

HTML Quotations and Semantic HTML

Both <q> and <blockquote> are semantic HTML elements.

Semantic elements describe the meaning of content rather than simply controlling how it looks.

For example:

<blockquote>
  This is a quotation.
</blockquote>

provides more meaning than simply using a <div>:

<div>
  This is a quotation.
</div>

The <div> is a generic container, while <blockquote> specifically identifies quoted content.

Using appropriate semantic elements can make your HTML easier to understand and maintain.

If you are learning the fundamentals of HTML, understanding HTML Elements is useful because HTML elements provide the basic structure of webpages.

HTML Quotation Best Practices

Follow these practices when working with HTML quotations:

• Use <q> for short inline quotations.
• Use <blockquote> for longer quotations.
• Use the cite attribute when you need to identify the source URL.
• Use <cite> for the title of a creative work.
• Do not use <blockquote> only to indent text.
• Use CSS when you want to change the visual appearance.
• Properly attribute quotations to their original sources.
• Keep quotation text accurate when reproducing a source.

For example:

<blockquote cite="https://example.com">
  This is a longer quotation from another source.
</blockquote>

Using the appropriate HTML element keeps the document semantically correct and easier to understand.