The <cite> tag in HTML is used to define the title of a creative work, such as a book, article, song, or movie. It is typically used to provide a citation for a source of information or to give credit to the original creator of the work.
Note: The content inside the <cite> tag is usually displayed in italics by default in most browsers.
- The <cite> tag should not be used for general references or citations of authors or creators; it is specifically for titles of works.
- Using the <cite> tag helps improve the semantic structure of your HTML document, making it clearer to both users and search engines what the cited content represents.
- The <cite> tag also supports the Global Attributes and Event Attributes in HTML.
<!DOCTYPE html>
<html>
<body>
<p>This is normal paragraph text</p>
<cite>This is cite tag text</cite>
</body>
</html>
Output:
This is normal paragraph text
This is cite tag text
- The <cite> tag is used to denote the title of a creative work, such as a book, article, or song.
- By default, browsers render content within the <cite> tag in italics to indicate a citation.
Syntax:
<cite> Title of Work </cite>More Example of <cite> Tag
Citing a Book Title
<!DOCTYPE html>
<html>
<body>
<div class="content">
<p>One of the most influential books in the field of computer science is
<cite>Introduction to Algorithms</cite>
by Thomas H. Cormen, Charles E. Leiserson, Ronald L. Rivest, and Clifford Stein.
</p>
</div>
</body>
</html>
- The <cite> tag is used to enclose the title of the book "Introduction to Algorithms," indicating that it is a reference to a specific work.
- The text within the <cite> tag is typically displayed in italics by default, distinguishing it as a title.
Styling the <cite> Tag
<!DOCTYPE html>
<html>
<head>
<style>
.content {
font-family: Arial, sans-serif;
margin: 20px;
}
cite {
font-style: normal;
color: #2a9d8f;
background-color: #e9f5f3;
padding: 2px 4px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="content">
<p>For comprehensive tutorials on web development, visit
<cite>GeeksforGeeks</cite>
, a platform offering a wide range of programming resources.
</p>
</div>
</body>
</html>
- In this example, the <cite> tag is styled to have a normal font style (removing the default italics), a custom text color (#2a9d8f), and a light background color (#e9f5f3).
- Additional styling includes padding and rounded corners to enhance the visual presentation of the citation.
Why Use HTML Cite Tag?
- Provides semantic meaning to titles of works, improving the clarity of content.
- Enhances accessibility and SEO by properly marking up citations.
- Automatically applies italics for better readability and visual distinction.
- Easy to style with CSS for custom visual presentation.
Interesting Facts about HTML Cite Tag
- The <cite> tag is primarily used for titles of creative works such as books, articles, and websites.
- It is not meant for general references or citations of authors or creators.
- Supports global and event attributes, making it flexible for interactive designs.
- Default browser styling usually italicizes the content for better differentiation.