HTML cite Tag

Introduction to the HTML cite Tag

The HTML <cite> tag is used to define the title of a creative work. This can refer to a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, an opera, a musical, an exhibition, a legal case report, a computer program, a website, a web page, a blog post or comment, a forum post or comment, etc. By default, browsers usually render the content of a <cite> tag in italics, but this can be changed with CSS.

Basic Syntax

html

<p>My favorite book is <cite>The Hitchhiker's Guide to the Galaxy</cite> by Douglas Adams.</p>

<p>As mentioned in <cite>A Brief History of Time</cite>, black holes are fascinating.</p>

<figure>
  <blockquote>
    <p>To be, or not to be, that is the question.</p>
  </blockquote>
  <figcaption>—Hamlet, from <cite>Hamlet</cite> by William Shakespeare</figcaption>
</figure>

Key Characteristics

- Semantic Meaning: It specifically indicates that the enclosed text is the title of a creative work. - Inline Element: It flows with the surrounding text and does not start on a new line. - Not for People's Names: A common misuse is to wrap a person's name in <cite>. The <cite> tag is for the title of the work, not the author or creator. Author names are just plain text or can be marked up with other elements if appropriate (e.g., <a> if linking to an author page).

When to Use `<cite>`

- When mentioning the title of a book, movie, song, artwork, play, TV show, research paper, website, etc. - In bibliographies or reference lists to mark up the titles of cited works. - Within a <figcaption> or <blockquote> to cite the source work.

Example in a Reference List

html

<h3>References</h3>
<ul>
  <li>Doe, J. (2023). <cite>The Principles of Modern Web Design</cite>. Web Publishers Inc.</li>
  <li>Smith, A. (2022). An Analysis of User Engagement. <cite>Journal of Web Studies</cite>, 15(2), 45-60.</li>
</ul>

Styling with CSS

While the default is often italics, you might want to customize it or ensure consistency.

css

cite {
  font-style: italic; /* Default, but can be explicitly set or changed */
  color: #555; /* Example: a slightly different color for cited titles */
}

/* If you don't want italics for cite elements */
cite.no-italics {
  font-style: normal;
}

Distinguishing from `<blockquote>` and `<q>`

- <blockquote>: For quoting a block of text from another source. - <q>: For short, inline quotations. - <cite>: For the title of the work being quoted or referenced. Often, <cite> is used in conjunction with <blockquote> (e.g., in a <figcaption> that names the source of the blockquote).

Accessibility

Using <cite> correctly helps assistive technologies understand that a piece of text is a title of a work, which can provide better context to users. For instance, a screen reader might slightly change its intonation or announce it as a title.

Conclusion

The <cite> tag is a simple but important semantic element for marking up titles of creative works. Using it correctly enhances the meaning and structure of your content, benefiting accessibility and machine readability. Remember, it's for the work's title, not for quoting the work itself or naming people.