HTML <cite> Tag

HTML <cite> Tag

The <cite> tag indicates the title of a work; this title may be a book, movie, article, play, or song and may also refer to the source of a quote or a piece of information. Markup language standards typically display the title in italics to emphasize its importance.

Purpose of the <cite> Tag

The <cite> tag gives credit to a title or source; it allows you to acknowledge where a particular piece of creative work came from. This makes it easier for users to read, provides better semantics to your HTML content, and structures the markup correctly.

Example:

<p>One of the most celebrated books in history is <cite>The Catcher in the Rye</cite>.</p>

This makes The Catcher in the Rye itself prominent by showing it in italics, helping it stand out as a work being referred to.

When to Use the <cite> Tag

You will need to use the <cite> tag to show where thoughts or works originate, such as:

• Book titles
• Movie titles
• Article titles
• Plays or songs
• Sources of quotes or information

Example:

<p>The quote "To be or not to be" is from <cite>Hamlet</cite> by William Shakespeare.</p>

This example cites the title of the play from which the quote originated, highlighting its significance.

What the <cite> Tag is NOT For

The <cite> tag is intended to mark the title of a work but not the name of the author or creator.

Example:

• Incorrect: <cite>William Shakespeare</cite>
• Correct: <cite>Hamlet</cite>

If you want to reference the author, you should do so outside of the <cite> tag.

Example:

<p>Written by William Shakespeare, <cite>Hamlet</cite> is one of the great works of English literature.</p>

Styling the <cite> Tag

The <cite> element is usually displayed in italics by default. However, you can style it using CSS to match your design preferences.

Example: Custom Styling

<style>
  cite {
    font-style: normal;
    color: navy;
    font-weight: bold;
  }
</style>

<p>One of my favorite movies is <cite>Inception</cite>.</p>

In this example, the <cite> tag is styled with bold navy text instead of the default italics.

Browser Support

The <cite> tag is supported by all modern browsers, ensuring consistent behavior across different platforms.

Recap

• The <cite> tag marks the title of a creative work or the source of a quote.
• It’s usually displayed in italics for better emphasis, but you can customize it with CSS.
• Avoid using it for names of authors or creators; it’s meant strictly for titles or sources.
• It improves semantics, readability, and accessibility of your web content.