The <cite>
tag is used to refer to a source or citation of a creative work, such as a book, article, website, or academic paper. It provides semantic meaning and helps web users and search engines understand that the text is a reference to an external source.
For example, it could be used to reference:
- Books
- Articles
- Research papers
- Websites
- Works of art
✅ Syntax
<cite>To Kill a Mockingbird</cite> is a classic novel by Harper Lee.
📍 Result:
“To Kill a Mockingbird” would be shown as a citation, which is generally styled by browsers in italic.
📚 Example with a URL
You can also use <cite>
to indicate the source of a website or online reference:
<p>Learn more about web development at <cite><a href="https://www.w3schools.com">W3Schools</a></cite>.</p>
📍 Result:
The citation W3Schools will be styled as italic, and it will be a clickable link leading to the website.
🧑💻 When to Use <cite>
- Books:
<cite>Harry Potter and the Sorcerer's Stone</cite>
- Research Papers:
<cite>Smith, J. (2020). Understanding Web Design. Journal of Web Studies.</cite>
- Websites:
<cite><a href="https://www.wikipedia.org">Wikipedia</a></cite>
- Articles:
<cite><a href="https://example.com">The Rise of AI</a></cite>
❌ When Not to Use <cite>
- Do not use
<cite>
for generic references, such as generic titles or proper nouns that don’t indicate a source. For example:htmlКопироватьРедактировать<cite>Web Development</cite> is a popular topic. <!-- Incorrect -->
🎨 Styling the <cite>
Tag
You can style the <cite>
tag using CSS, as it’s typically italicized by default, but you can change that if needed:
<style>
cite {
font-style: normal;
color: #0056b3;
}
</style>
<p>Read more on <cite><a href="https://www.wikipedia.org">Wikipedia</a></cite>.</p>
✅ Summary
Feature | Description |
---|---|
Purpose | Represents a citation or source |
HTML5 Support | ✅ Fully supported |
Use Cases | Books, articles, research papers, websites |
Browser Styling | By default, browsers italicize it |
Should Not Be Used For | Generic references (e.g., just a title) |