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
HTML cite Attribute
The cite attribute in HTML specifies a URL that points to a document or source explaining the reason for a modification. It is commonly used with elements like <ins>, <del>, <q>, and <blockquote> to provide context or justification for content changes and citations.
Syntax
Following is the syntax for the cite attribute −
<ins cite="URL">inserted text</ins> <del cite="URL">deleted text</del> <q cite="URL">quoted text</q> <blockquote cite="URL">quoted content</blockquote>
Where URL is the web address of the document that explains the reason for the insertion, deletion, or the source of the quotation.
Using Cite with the INS Element
The <ins> element represents text that has been inserted into a document. The cite attribute provides a reference to explain why the insertion was made.
Example
Following example demonstrates the cite attribute with the <ins> element −
<!DOCTYPE html> <html> <head> <title>INS Element with Cite</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h1>Article Update</h1> <p>HTML5 is a markup language used for structuring web content. <ins cite="https://www.w3.org/TR/html52/">It includes new semantic elements like <article>, <section>, and <nav>.</ins></p> </body> </html>
The output shows the inserted text with default underline styling −
Article Update HTML5 is a markup language used for structuring web content. It includes new semantic elements like <article>, <section>, and <nav>. (underlined)
Using Cite with the DEL Element
The <del> element represents deleted text. The cite attribute can reference a document explaining the reason for deletion.
Example
<!DOCTYPE html> <html> <head> <title>DEL Element with Cite</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Price Update</h2> <p>The course fee is <del cite="price-update.html">$50</del> <ins>$40</ins> for this month.</p> </body> </html>
The output shows crossed-out deleted text and underlined inserted text −
Price Update The course fee is $50 (crossed out) $40 (underlined) for this month.
Using Cite with Quotation Elements
The cite attribute is also used with <q> and <blockquote> elements to specify the source of a quotation.
Example − Inline Quotation
<!DOCTYPE html> <html> <head> <title>Quote with Cite</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <p>As Tim Berners-Lee said, <q cite="https://www.w3.org/People/Berners-Lee/">The Web is designed to be decentralized.</q></p> </body> </html>
The output displays the quoted text with quotation marks −
As Tim Berners-Lee said, "The Web is designed to be decentralized."
Example − Block Quotation
<!DOCTYPE html>
<html>
<head>
<title>Blockquote with Cite</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Famous Quote</h2>
<blockquote cite="https://www.brainyquote.com/quotes/albert_einstein_121993">
<p>Imagination is more important than knowledge.</p>
<footer>— Albert Einstein</footer>
</blockquote>
</body>
</html>
The output shows the blockquote with indented styling −
Famous Quote
Imagination is more important than knowledge.
? Albert Einstein
Accessing Cite Attribute with JavaScript
The cite attribute value can be retrieved using JavaScript for dynamic content management or validation.
Example
<!DOCTYPE html>
<html>
<head>
<title>Accessing Cite Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<p>This text has been <ins id="myInsert" cite="update-log.html">recently updated</ins> for accuracy.</p>
<button onclick="showCite()">Show Citation</button>
<p id="result"></p>
<script>
function showCite() {
var element = document.getElementById("myInsert");
var cite = element.getAttribute("cite");
document.getElementById("result").innerHTML = "Citation: " + cite;
}
</script>
</body>
</html>
Clicking the button displays the cite attribute value −
This text has been recently updated (underlined) for accuracy. [Show Citation] (After clicking: Citation: update-log.html)
Key Points
-
The cite attribute accepts any valid URL − absolute URLs (https://example.com), relative URLs (../doc.html), or local files (reference.html).
-
While the cite attribute is not displayed by browsers, it provides important metadata for accessibility tools, search engines, and content management systems.
-
For
<ins>and<del>elements, the cite attribute explains the reason for the change, often pointing to change logs or documentation. -
For quotation elements (
<q>and<blockquote>), the cite attribute identifies the source of the quoted content.
Conclusion
The cite attribute provides valuable metadata by linking to documents that explain content changes or quote sources. While not visually displayed, it enhances document semantics for accessibility tools and content management systems. Use it with <ins>, <del>, <q>, and <blockquote> elements to create more meaningful and well-documented HTML content.
252 Views
