HTML Citations

HTML citations are used to identify references, sources, quotations, and the titles of creative works on a webpage. HTML provides elements such as <blockquote>, <q>, <cite>, and <abbr> to give different types of content meaningful structure.

Citations are especially useful when creating articles, research pages, educational content, documentation, blogs, and websites that reference information from other sources.

In this tutorial, you will learn what HTML citations are, how to use the <blockquote>, <q>, and <cite> elements, and when each element should be used.

What Are HTML Citations?

HTML citations allow you to identify quoted content and references within an HTML document.

For example, if you want to display a quotation from a person or a book, you can use the appropriate HTML citation element.

A short quotation can be written using the <q> element:

<p>
  <q>Learning never exhausts the mind.</q>
</p>

The <q> element is designed for short inline quotations.

For longer quotations, HTML provides the <blockquote> element.

<blockquote>
  Learning is a continuous process that helps us develop new skills
  and understand the world around us.
</blockquote>

HTML <q> Element

The <q> element is used for a short quotation that appears within a sentence or paragraph.

For example:

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

Browsers generally display quotation marks around the content of a <q> element automatically.

The <q> element is useful when the quotation is short and fits naturally within the surrounding text.

HTML <blockquote> Element

The <blockquote> element is used for longer quotations that are displayed as a separate block of content.

For example:

<blockquote>
  The only way to do great work is to love what you do.
</blockquote>

It is commonly used when quoting:

• Books
• Articles
• Speeches
• Interviews
• Research
• Websites
• Other published sources

You can also use the cite attribute to specify the source of a quotation.

<blockquote cite="https://example.com/article">
  This is an example of a longer quotation.
</blockquote>

The cite attribute identifies the source of the quotation, although the URL is not normally displayed to the visitor.

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 Citations Example

You can combine citation elements when creating an article.

<h1>HTML Citations</h1>

<p>
  A famous quote says:
</p>

<blockquote>
  The journey of a thousand miles begins with a single step.
</blockquote>

<p>
  This quotation is commonly associated with
  <cite>Lao Tzu</cite>.
</p>

This structure separates the quotation from the information identifying its source.

Difference Between <q>, <blockquote>, and <cite>

These elements have different purposes.

Element	Purpose
<q>	Short inline quotation
<blockquote>	Longer or separate quotation
<cite>	Title of a creative work
cite attribute	Identifies the source of quoted content

For example:

<p>
  He said <q>Practice makes perfect.</q>
</p>

For a longer quotation:

<blockquote>
  Practice regularly and continue improving your skills
  through consistent learning.
</blockquote>

For a book title:

<p>
  <cite>HTML and CSS</cite> is a useful reference for beginners.
</p>

HTML Citations and Semantic HTML

Citation elements are semantic HTML elements because they provide meaning to the content.

Instead of simply placing quotation marks around text, using <q> or <blockquote> tells the browser what the content represents.

For example:

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

provides more semantic information than:

<p>"This is a quotation."</p>

Semantic HTML can make your document structure clearer and more meaningful.

If you are learning HTML structure, you can continue with related topics such as HTML Elements and HTML Text Formatting.

HTML Citation Best Practices

Follow these practices when using citations:

• Use <q> for short inline quotations.
• Use <blockquote> for longer quotations.
• Use <cite> for the title of a creative work.
• Use the cite attribute when you want to identify the source of a quotation.
• Do not use <blockquote> simply to indent or style text.
• Use CSS when you want to change the appearance of citations.
• Keep quoted content accurate and properly attributed.

For example:

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