Cite HTML

HTML <cite> Tag

To define a citation the HTML tag is used. For a piece of creative work, quoted content, books, websites, a research paper, a blog spot, painting, etc. we need references or titles. The HTML <cite> tag thus provides the source of a quote or content. It renders its content in the italic form on the browser. Using CSS, it can be overridden.

Syntax:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<cite>Cited Content</cite>
<cite>Cited Content</cite>
<cite>Cited Content</cite>

Example:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<head>
<style>
blockquote{
background-color: crimson;
color: white;
padding: 10px;
margin-right: 25px;}
cite{
color: crimson;}
</style>
</head>
<body>
<h1>Motivational Quotes</h1>
<blockquote
cite="https://www.inc.com/jeff-haden/75-inspiring-motivational-quotes-for-being-happier.html">
If you look to others for fulfillment, you will never be fulfilled. If your happiness depends on money, you will never be happy with yourself. Be content with what you have; rejoice in the way things are. When you realize there is nothing lacking, the world belongs to you.
</blockquote>
<cite>-Lao Tzu</cite>
</body>
</html>
<!DOCTYPE html> <html> <head> <style> blockquote{ background-color: crimson; color: white; padding: 10px; margin-right: 25px;} cite{ color: crimson;} </style> </head> <body> <h1>Motivational Quotes</h1> <blockquote cite="https://www.inc.com/jeff-haden/75-inspiring-motivational-quotes-for-being-happier.html"> If you look to others for fulfillment, you will never be fulfilled. If your happiness depends on money, you will never be happy with yourself. Be content with what you have; rejoice in the way things are. When you realize there is nothing lacking, the world belongs to you. </blockquote> <cite>-Lao Tzu</cite> </body> </html>
<!DOCTYPE html>
<html>
<head>
<style>  
blockquote{   
background-color: crimson; 
color: white;
padding: 10px;  
margin-right: 25px;}  
cite{  
color: crimson;}  
</style>  
</head>
 
<body>
<h1>Motivational Quotes</h1>
<blockquote 
cite="https://www.inc.com/jeff-haden/75-inspiring-motivational-quotes-for-being-happier.html">
If you look to others for fulfillment, you will never be fulfilled. If your happiness depends on money, you will never be happy with yourself. Be content with what you have; rejoice in the way things are. When you realize there is nothing lacking, the world belongs to you.
</blockquote>
<cite>-Lao Tzu</cite>  
</body>
</html>

Explanation:

In the above example, we are using the HTML <cite> tag to provide the source of the quote. CSS is also used for styling.

Tag-specific attributes:

There is no specific attribute for the HTML <cite> tag.

Global Attributes:

All the Global attributes are supported by the HTML <cite> tag.

Event Attributes:

All the Event attributes are supported by the HTML <cite> tag.

Supporting Browsers:

Chrome, IE, Firefox, Opera, and Safari.