HTML <cite> Tag: How to Reference Sources

The HTML <cite> tag is a small but important tool for marking up the title of a creative work. You can use it to show where an idea or quote came from.

Whether you build blogs, learning platforms, or news sites, knowing how to use <cite> helps you create accessible content.

Understand the <cite> Tag in HTML

The <cite> tag highlights the title of a source. This can be a book, an article, a website, a movie, or any work. Most browsers display the text in italics by default to show it’s a title.

The syntax is simple. Wrap the title of the work inside the tag:

<cite>Title of the Work</cite>

Example in a sentence:

<p>Based on ideas from <cite>Designing for the Web</cite>.</p>

When you cite an article or book, write the title inside <cite> and place it near the related text. Example:

<p>Learned from <cite>Flatcoding HTML</cite>.</p>

If you mention the author, you can include the name as plain text before or after the <cite> tag.

For online resources, put the website or page title inside <cite>. You can also link it using <a>.

Here is an example:

<p>
  Details are in <a href="https://www.example.com">
  <cite>HTML Best Practices</cite></a>.
</p>

This helps readers find the original source.

How to Style the <cite> Tag with CSS

You can change how <cite> looks to fit your design.

Here’s a simple example:

cite {
  font-style: normal; 
  color: #2a7ae2; 
  font-weight: bold;
}

This removes italics and adds blue color. Also, it makes the text bold.

Use the <cite> Tag in Academic or Educational Websites in HTML

The <cite> in educational sites helps students and readers track sources. It also adds clarity to your references.

Here is an example for academic reference:

<p>Based on <cite>Modern Web Standards</cite>.</p>

This shows the source without extra links or formatting, which is clear for beginners.

Another example of a linked educational resource:

<p>
  See <a href="https://www.flatcoding.com">
  <cite>Digital Learning Guide</cite></a> 
  for details.
</p>

This example links to the resource so readers can verify and explore more.

What’s the Difference Between <blockquote> and <cite> Tag?

The <blockquote> element shows a long quote from another source. It often includes indentation and extra spacing. The <cite> tag only marks the title of the work you are quoting or referencing.

For example, if you quote a paragraph, you wrap it in <blockquote>. Then, you can add <cite> nearby to name the source. This makes your markup clear and semantic.

Here is a table that shows you key differences:

Here is a list that shows you the use case:

• Use <blockquote> when you want to include a longer quotation.
• Use <cite> when you need to mention the title of the work.
• Combine them if you quote and cite the source together.

Examples of <cite>Tag in HTML

Basic Citation:

<p>Inspired by <cite>Web Design 101</cite>.</p>

This example shows a simple citation without links or extra styling.

Quotation with Citation:

<blockquote> <p>Good design is simple and clear.</p> </blockquote> <p>From <cite>Design Basics</cite>.</p>

Use <blockquote> for the quote and <cite> to name the source.

Styled Citation:

<style>
  .highlight {
    color: #d6336c; 
    font-style: normal; 
    text-transform: uppercase;
  }
</style>

<p>
  Check out <cite class="highlight">Modern Coding Techniques</cite>.
</p>

This example applies a custom style to the citation. It changes color and makes text uppercase.

Wrapping Up

In this section, you learned what the HTML <cite> tag does and how it works. Here is a quick recap:

• The <cite> tag shows the title of a work.
• It helps readers see where ideas came from.
• You can style it with CSS.
• Use it with <blockquote> for full quotes.
• It makes content clear and accessible.

FAQs

<p>This idea came from The Web Guide.</p>

<p>This is a quoted paragraph.</p>

<p>From The Web Guide</p>

cite {
  font-style: normal;
  color: blue;
}

Similar Reads