HTML `` Element: Correctly Identifying Titles of Creative Works

Learn how to use the HTML `` element to semantically mark up the titles of creative works (books, articles, songs, etc.) in your web pages. This tutorial explains its purpose, usage, and styling options with CSS, improving both the structure and accessibility of your content.



Using the HTML `` Element to Cite Creative Works

Understanding the `` Element

The HTML `<cite>` element is designed to identify the title of a creative work. This adds semantic meaning to your HTML, making it more understandable to both browsers and assistive technologies. The `<cite>` element itself doesn’t change the visual appearance of the text, but browsers typically render it in italics. This helps to visually distinguish the title of a work from other text. You can customize the styling using CSS for more control over its appearance.

Using the `` Element

To mark up the title of a creative work, simply place the title within the opening and closing `<cite>` tags. For example:

Example: Using `<cite>`

<p>My favorite movie is <cite>Casablanca</cite>.</p>

Note that a person's name is not considered the title of a work.

Browser Support for ``

The `<cite>` element is widely supported by all major modern browsers. Here's a quick overview of browser support.

Browser Support
Chrome Yes
Edge Yes
Firefox Yes
Opera Yes
Safari Yes

Default Styling and Customization with CSS

Most browsers render the `<cite>` element with italic styling by default. You can easily customize this using CSS.

Example: Custom CSS for `<cite>`

cite {
  font-style: italic;
  font-weight: bold;
  color: navy;
}

This example styles the `<cite>` element with italics, bold text, and navy blue color.