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 provides a URL reference that explains why specific content was deleted or inserted. It is commonly used with the <del> and <ins> elements to document the reason for changes made to the content.
Syntax
Following is the syntax for the cite attribute with the <del> element −
<del cite="url">deleted content</del>
Following is the syntax for the cite attribute with the <ins> element −
<ins cite="url">inserted content</ins>
Here, url is the link that points to a document or resource explaining why the text was deleted or inserted.
Using Cite with Del Element
The <del> element marks text that has been deleted from the document. The cite attribute provides a reference to explain the deletion.
Example
Following example demonstrates the cite attribute with the <del> element −
<!DOCTYPE html>
<html>
<head>
<title>HTML Cite Attribute with Del</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Subjects to Learn</h2>
<dl>
<dt>JavaScript</dt>
<dd>A scripting language.</dd>
<dt>Java</dt>
<dd>It is a programming language.</dd>
<dt>jQuery</dt>
<dd>A JavaScript library.</dd>
<dt>C#</dt>
<dd>Object-oriented programming language.</dd>
</dl>
<p><del cite="exams_cancelled.htm">Internal Exams from 3rd May</del></p>
<p>Note: The above exam schedule has been cancelled due to policy changes.</p>
</body>
</html>
The output shows the deleted text with a strikethrough line −
Subjects to Learn JavaScript A scripting language. Java It is a programming language. jQuery A JavaScript library. C# Object-oriented programming language. Internal Exams from 3rd May (strikethrough text) Note: The above exam schedule has been cancelled due to policy changes.
Using Cite with Ins Element
The <ins> element marks text that has been inserted into the document. The cite attribute can reference the source or reason for the insertion.
Example
Following example shows the cite attribute with the <ins> element −
<!DOCTYPE html>
<html>
<head>
<title>HTML Cite Attribute with Ins</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Course Updates</h2>
<p>We offer comprehensive tutorials on:</p>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li><ins cite="new_courses.htm">Python Programming</ins></li>
<li><ins cite="new_courses.htm">React Framework</ins></li>
</ul>
<p>The new courses were added based on student feedback.</p>
</body>
</html>
The inserted content appears with an underline by default −
Course Updates We offer comprehensive tutorials on: ? HTML5 ? CSS3 ? JavaScript ? Python Programming (underlined text) ? React Framework (underlined text) The new courses were added based on student feedback.
Combining Del and Ins Elements
You can combine both <del> and <ins> elements to show content changes with their respective cite references.
Example
Following example demonstrates both deletions and insertions with cite attributes −
<!DOCTYPE html>
<html>
<head>
<title>HTML Cite with Del and Ins</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Meeting Schedule</h2>
<p>Our next team meeting is scheduled for
<del cite="schedule_change.htm">Monday, 15th March</del>
<ins cite="schedule_change.htm">Friday, 19th March</ins>
at 10:00 AM.
</p>
<p>Location:
<del cite="venue_change.htm">Conference Room A</del>
<ins cite="venue_change.htm">Online via Zoom</ins>
</p>
</body>
</html>
The output shows both strikethrough (deleted) and underlined (inserted) text −
Meeting Schedule
Our next team meeting is scheduled for Monday, 15th March Friday, 19th March at 10:00 AM.
(strikethrough) (underlined)
Location: Conference Room A Online via Zoom
(strikethrough) (underlined)
Key Points
Following are important points about the cite attribute −
-
The cite attribute is not displayed in the browser by default. It serves as metadata for documentation purposes.
-
The URL in the cite attribute can be absolute or relative, pointing to any valid web resource.
-
The cite attribute is optional but recommended for maintaining proper documentation of content changes.
-
Screen readers and other assistive technologies may use the cite attribute to provide additional context to users.
-
The cite attribute works with both
<del>and<ins>elements but is most commonly used with<del>.
Conclusion
The HTML cite attribute provides a way to reference external documents or resources that explain why content was deleted or inserted. While not visible to users, it serves as valuable documentation for content changes and can be used by assistive technologies and content management systems to track revisions.
239 Views
