HTML <cite> Tag

The HTML <cite> tag is used to define the title of a creative work (e.g., a book, a song, a movie, a painting). This tag helps to semantically mark up citations and references within your content, making it clear what the source of a quotation or statement is. It is a crucial element for proper referencing and enhancing the accessibility of your web pages.

Syntax

<cite>Title of the creative work</cite>

Attributes

Example

<p>According to <cite>The Hitchhiker's Guide to the Galaxy</cite>, the answer is 42.</p>

More Examples

Basic Citation

The most common use of the <cite> tag is to reference the title of a book or other creative work within a paragraph.

<p>My favorite book is <cite>Pride and Prejudice</cite> by Jane Austen.</p>

Citing a Movie

You can also use it for citing movies, TV shows, or other audiovisual works.

<p>The classic movie <cite>Casablanca</cite> features a timeless love story.</p>

Referencing a Song

The <cite> tag can be used to refer to a song, album, or any music-related title.

<p>The song <cite>Bohemian Rhapsody</cite> by Queen is still an absolute masterpiece.</p>

Using with Quotes

While <cite> is not directly a quote tag, it often accompanies blockquotes or inline quotes to provide the source.

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

Citing a Webpage

Although less typical, you can use <cite> to refer to online works. It's more common for formal references though. Use it if it fits.

<p>Further details are found on <cite>The Example Website</cite>.</p>

Nested Citations

You can also use nested cite tags for complex references where one creative work is part of another.

<p>An in-depth analysis of the <cite><cite>Star Wars Episode IV: A New Hope</cite></cite> can be found in the book "The Making of Star Wars"</p>

Browser Support

The <cite> tag is supported by all modern browsers, ensuring consistent rendering across platforms:

• Chrome: Yes
• Edge: Yes
• Firefox: Yes
• Safari: Yes
• Opera: Yes

Notes and Tips

• Semantic Meaning: Use the <cite> tag to give a semantic meaning to your citations, it enhances the readability by clearly indicating cited work titles.
• Accessibility: Screen readers will often announce that the cited text is a reference enhancing accessibility for visually impaired users.
• Styling: While the default display is often italic, you can use CSS to style the <cite> element further as needed (e.g. bold).
• Avoid Misuse: Do not use <cite> to mark up the author of a quote, use the appropriate <figcaption> within <figure> tags or just simple <p> tags instead. <cite> is strictly for the title of a creative work.
• Consistency: Be consistent in how you mark up citations, it will improve the structure and the quality of your HTML code.
• SEO Benefits: Semantic tags such as <cite> can help search engines understand the context of your content better.
• Real World Use: Always cite sources of knowledge properly using a combination of blockquotes or inline quotes and then the cite tag.
• When Not to Use: If you are referring to the source of the quote or a person, use the <figcaption> or other generic element like a <p> tag as <cite> is only for the title.