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 display a URL which explains the quote/deleted/inserted text in HTML?
The cite attribute in HTML is used to specify a URL that explains the reason for quoting, deleting, or inserting text. This attribute provides additional context and reference information for the content, making it more accessible and informative for both users and search engines.
Syntax
Following is the syntax for the cite attribute −
<q cite="URL">quoted text</q> <blockquote cite="URL">quoted content</blockquote> <del cite="URL">deleted text</del> <ins cite="URL">inserted text</ins>
The cite attribute accepts a valid URL that points to a source document explaining the quote, deletion, or insertion.
Elements That Support the Cite Attribute
The cite attribute can be used with the following HTML elements −
<q>− For inline quotations<blockquote>− For block-level quotations<del>− For deleted text<ins>− For inserted text
Using Cite with Quote Elements
Example − Inline Quote with Cite
Following example demonstrates the cite attribute with the <q> element −
<!DOCTYPE html> <html> <head> <title>Cite Attribute with Quote</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h3>Define WordPress</h3> <p>According to the official website: <q cite="https://wordpress.org/">WordPress is open source software you can use to create a beautiful website, blog, or app.</q></p> </body> </html>
The output displays the quoted text with default quotation marks −
Define WordPress According to the official website: "WordPress is open source software you can use to create a beautiful website, blog, or app."
Example − Block Quote with Cite
Following example shows the cite attribute with <blockquote> −
<!DOCTYPE html>
<html>
<head>
<title>Blockquote with Cite</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>HTML5 Specification</h3>
<blockquote cite="https://html.spec.whatwg.org/">
<p>HTML is the World Wide Web's core markup language. Originally, HTML was primarily designed as a language for semantically describing scientific documents.</p>
</blockquote>
<p><em>Source: WHATWG HTML Specification</em></p>
</body>
</html>
The blockquote is indented by default, creating a visually distinct quoted section −
HTML5 Specification
HTML is the World Wide Web's core markup language. Originally,
HTML was primarily designed as a language for semantically
describing scientific documents.
Source: WHATWG HTML Specification
Using Cite with Deletion and Insertion Elements
Example − Deleted Text with Cite
Following example demonstrates the cite attribute with <del> element −
<!DOCTYPE html> <html> <head> <title>Deleted Text with Cite</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h3>Product Price Update</h3> <p>Original Price: <del cite="https://example.com/price-change-log">$99.99</del></p> <p>New Price: <ins cite="https://example.com/price-change-log">$79.99</ins></p> </body> </html>
The deleted text appears with strikethrough formatting, while inserted text is underlined −
Product Price Update Original Price: $99.99 (strikethrough) New Price: $79.99 (underlined)
Example − Document Revision with Cite
Following example shows how cite attribute documents changes in content −
<!DOCTYPE html> <html> <head> <title>Document Revision</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h3>Meeting Minutes - Revision</h3> <p>The meeting will be held on <del cite="https://company.com/schedule-change" datetime="2024-01-15">January 15th</del> <ins cite="https://company.com/schedule-change" datetime="2024-01-20">January 20th</ins> at 2:00 PM.</p> <p><small>Changes documented in schedule-change log.</small></p> </body> </html>
Both the deletion and insertion reference the same URL explaining the schedule change −
Meeting Minutes - Revision The meeting will be held on January 15th (strikethrough) January 20th (underlined) at 2:00 PM. Changes documented in schedule-change log.
Accessing Cite Attribute with JavaScript
The cite attribute value can be accessed and modified using JavaScript for dynamic content management.
Example
<!DOCTYPE html>
<html>
<head>
<title>Accessing Cite Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<blockquote id="myQuote" cite="https://www.w3.org/">
<p>The World Wide Web Consortium (W3C) is an international community that develops open standards.</p>
</blockquote>
<button onclick="showCite()">Show Citation URL</button>
<p id="output"></p>
<script>
function showCite() {
var quote = document.getElementById("myQuote");
var citeUrl = quote.getAttribute("cite");
document.getElementById("output").innerHTML = "Citation URL: " + citeUrl;
}
</script>
</body>
</html>
Clicking the button displays the URL stored in the cite attribute −
The World Wide Web Consortium (W3C) is an international community
that develops open standards.
[Show Citation URL]
Citation URL: https://www.w3.org/
Key Points
The cite attribute is not visible to users by default but provides valuable metadata for accessibility tools and search engines.
The URL should be a valid absolute or relative link to a document that explains the reason for the quote, deletion, or insertion.
Screen readers and other assistive technologies may use the cite information to provide additional context to users.
The attribute can be accessed via JavaScript for dynamic content management and citation display.
Conclusion
The cite attribute provides a standardized way to reference sources and explanations for quoted, deleted, or inserted text in HTML. While not visually apparent to users, it enhances document semantics and accessibility, making content more informative and properly attributed.
155 Views
