HTML <cite> Tag: How to Reference Sources

HTML cite Tag

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:

Feature<blockquote><cite>
PurposeHolds a long quote or excerptShows the title of a source
Default StylingIndented blockItalic text
ContentFull sentence or paragraphOnly the work title
Common UseDisplaying quoted textCiting where the text came from

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

What does the HTML cite tag do?

The HTML cite tag shows the title of a work, like a book or website. It helps users know where an idea came from. Browsers often italicize the text.

How do you use the cite tag in HTML?

You wrap the title of the source in the tag. Here is an example:
<p>This idea came from The Web Guide.</p>

Is the cite tag only for books?

No, the cite tag is for any work title. You can use it for articles, songs, movies, or websites.

What is the difference between cite and blockquote?

The cite tag shows a title. The blockquote tag holds a full quote. Example:
<p>This is a quoted paragraph.</p>

<p>From The Web Guide</p>

Can I style the cite tag with CSS?

Yes, you can change how it looks. Example:
cite {
  font-style: normal;
  color: blue;
}

Similar Reads

HTML autocomplete Attribute: How to Use it with form and input

The form autocomplete attribute in HTML helps users fill out forms faster because it shows them saved input for common…

HTML embed Tag: How to Embed External Media in Web Pages

The HTML embed tag is used to display media content, such as videos or audio. It can also display PDFs…

HTML Boolean Attributes with Examples

HTML Boolean attributes control the behavior of elements and do not need a value. These attributes simplify logic and reduce…

HTML Form Validation Attributes

HTML form validation attributes help you check the form data before it reaches the server. What Are HTML Form Validation…

HTML strong Tag: How to Give Text Strong Importance

The HTML <strong> tag shows strong importance. This tag gives semantic meaning to text. Screen readers and search engines recognize…

HTML bdi Tag: Control Text Direction in HTML

The HTML bdi tag marks text that has an unknown or mixed direction. It makes sure that this part does…

HTML dialog Tag: How to Create Dialog Boxes

The <dialog> tag is used to build modal popups in HTML. It shows alerts and messages without third-party scripts. Understand…

HTML meter Tag: Measurements with Examples

Purpose and use cases: The HTML meter tag shows a scalar value within a known range. You can use it…

HTML Article Tag: How to Create Semantic Content

Semantic article tag in HTML uses clear tags that show the role of each part. These tags tell browsers and…

HTML Data Attributes with Examples

data-* attributes store extra values on elements without an extra DOM nodes or backend requests. What are data-* attributes in…

Previous Article

How to Delete a Remote Branch in Git

Next Article

HTML Mark Tag: How to Highlight Text

Write a Comment

Leave a Comment

Your email address will not be published. Required fields are marked *


Subscribe to Get Updates

Get the latest updates on Coding, Database, and Algorithms straight to your inbox.
No spam. Unsubscribe anytime.