Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to specify citation in HTML?
The <cite> tag in HTML is used to specify citations or references to creative works such as books, articles, movies, songs, or research papers. The content within the <cite> tag typically appears in italics by default in most browsers, indicating that it represents the title of a referenced work.
Syntax
Following is the syntax for the <cite> tag −
<cite>Title of the work</cite>
The <cite> tag is an inline element that should contain only the title of the work being referenced, not the author's name or additional descriptive text.
Basic Citation Example
Following example demonstrates how to use the <cite> tag to reference a book −
<!DOCTYPE html> <html> <head> <title>HTML cite Tag</title> </head> <body style="font-family: Arial, sans-serif; padding: 10px;"> <p>The learning content can be referred from <cite>Data Structures & Algorithms in Java</cite>.</p> </body> </html>
The output shows the cited book title in italics −
The learning content can be referred from Data Structures & Algorithms in Java. (Book title appears in italics)
Multiple Citations Example
Following example shows how to cite different types of creative works −
<!DOCTYPE html> <html> <head> <title>Multiple Citations</title> </head> <body style="font-family: Arial, sans-serif; padding: 10px; line-height: 1.6;"> <h2>References</h2> <p>For web development, refer to <cite>Eloquent JavaScript</cite> by Marijn Haverbeke.</p> <p>The movie <cite>The Social Network</cite> depicts the founding of Facebook.</p> <p>The research paper <cite>A Mathematical Theory of Communication</cite> laid the foundation for information theory.</p> <p>The song <cite>Bohemian Rhapsody</cite> was performed by Queen.</p> </body> </html>
The output displays all cited works in italics −
References For web development, refer to Eloquent JavaScript by Marijn Haverbeke. The movie The Social Network depicts the founding of Facebook. The research paper A Mathematical Theory of Communication laid the foundation for information theory. The song Bohemian Rhapsody was performed by Queen. (All titles in italics)
Styling Citations with CSS
You can customize the appearance of citations using CSS. Following example shows how to style the <cite> tag −
<!DOCTYPE html>
<html>
<head>
<title>Styled Citations</title>
<style>
cite {
color: #0066cc;
font-weight: bold;
font-style: normal;
text-decoration: underline;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px; line-height: 1.8;">
<p>The comprehensive guide <cite>HTML and CSS: Design and Build Websites</cite> is excellent for beginners.</p>
<p>Advanced concepts are covered in <cite>JavaScript: The Definitive Guide</cite>.</p>
</body>
</html>
The output shows custom-styled citations in blue, bold, and underlined −
The comprehensive guide HTML and CSS: Design and Build Websites is excellent for beginners. Advanced concepts are covered in JavaScript: The Definitive Guide. (Titles appear in blue, bold, and underlined)
Common Use Cases
The <cite> tag is commonly used in the following scenarios −
-
Academic writing − Referencing books, research papers, and scholarly articles in educational content.
-
Blog posts − Citing sources of information, books, or articles that support your content.
-
Reviews − Mentioning titles of movies, books, songs, or other creative works being reviewed.
-
Bibliography − Creating reference lists with properly marked work titles.
Example − Academic Reference
Following example shows how to use citations in an academic context −
<!DOCTYPE html>
<html>
<head>
<title>Academic Citation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px; line-height: 1.6;">
<h2>Machine Learning Overview</h2>
<p>According to the seminal work <cite>Pattern Recognition and Machine Learning</cite>, supervised learning algorithms require labeled training data.</p>
<p>The concept of neural networks was first introduced in <cite>A Logical Calculus of the Ideas Immanent in Nervous Activity</cite>.</p>
<h3>References</h3>
<ul>
<li><cite>Pattern Recognition and Machine Learning</cite> by Christopher M. Bishop</li>
<li><cite>A Logical Calculus of the Ideas Immanent in Nervous Activity</cite> by McCulloch and Pitts</li>
</ul>
</body>
</html>
The citations properly distinguish work titles from author names and provide clear references.
Accessibility and SEO Benefits
Using the <cite> tag provides semantic meaning to your content, helping search engines understand that the enclosed text represents a reference to another work. Screen readers also recognize cited content, improving accessibility for users with visual impairments.
Conclusion
The <cite> tag is a semantic HTML element specifically designed for marking up titles of creative works such as books, movies, songs, and research papers. It provides both visual styling (italics by default) and semantic meaning that benefits SEO and accessibility. Use it exclusively for work titles, not for author names or general quotations.
270 Views
