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.