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 is used to specify the URL or source of a quoted text, citation, or reference. It provides metadata about the source of the content, making it valuable for accessibility tools like screen readers and search engines, even though the URL itself is not visually displayed on the webpage.
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>
Where URL is the web address or document reference that serves as the source of the quoted, deleted, or inserted content.
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 with source explaining the change
<ins> − For inserted text with source explaining the addition
Using Cite Attribute with <q> Element
The <q> element represents inline quotations, and the cite attribute provides the source URL for the quoted content.
Example
<!DOCTYPE html> <html> <head> <title>Cite Attribute with Q Element</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px; line-height: 1.6;"> <h2>What we want?</h2> <p>PETA states, <q cite="https://legacy.peta.org/why-give/">We are the largest animal rights organization in the world, with more than 6.5 million members and supporters worldwide. We need your continued support in order to stop cruelty to animals wherever it occurs.</q> </p> </body> </html>
The output shows the quoted text with quotation marks, while the cite attribute remains invisible but accessible to screen readers −
What we want? PETA states, "We are the largest animal rights organization in the world, with more than 6.5 million members and supporters worldwide. We need your continued support in order to stop cruelty to animals wherever it occurs."
Using Cite Attribute with <blockquote> Element
The <blockquote> element is used for longer quotations that are displayed as separate blocks of text.
Example
<!DOCTYPE html>
<html>
<head>
<title>Cite Attribute with Blockquote</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; line-height: 1.6;">
<h2>Famous Quote</h2>
<p>Albert Einstein once said:</p>
<blockquote cite="https://www.brainyquote.com/quotes/albert_einstein_100015"
style="margin: 20px 0; padding: 15px; border-left: 4px solid #ccc; background: #f9f9f9;">
Imagination is more important than knowledge. For knowledge is limited,
whereas imagination embraces the entire world, stimulating progress, giving birth to evolution.
</blockquote>
<p>This quote highlights the importance of creativity in scientific discovery.</p>
</body>
</html>
The blockquote appears as an indented block with visual styling, while the cite attribute provides source information −
Famous Quote
Albert Einstein once said:
Imagination is more important than knowledge. For knowledge is limited,
whereas imagination embraces the entire world, stimulating progress, giving birth to evolution.
This quote highlights the importance of creativity in scientific discovery.
Using Cite Attribute with <del> and <ins> Elements
The cite attribute can also be used with <del> and <ins> elements to reference the source or reason for text deletion or insertion.
Example
<!DOCTYPE html> <html> <head> <title>Cite with Del and Ins Elements</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px; line-height: 1.6;"> <h2>Document Revision</h2> <p>The meeting will be held on <del cite="https://company.com/schedule-change.html">Monday</del> <ins cite="https://company.com/schedule-change.html">Wednesday</ins> at 3 PM in the conference room.</p> <p>Registration fee is <del cite="https://company.com/pricing-update.html">$50</del> <ins cite="https://company.com/pricing-update.html">$75</ins> per participant.</p> </body> </html>
The deleted text appears with strikethrough formatting, while inserted text may be underlined, showing document changes −
Document Revision
The meeting will be held on Monday Wednesday at 3 PM in the conference room.
~~~~~~ _________
Registration fee is $50 $75 per participant.
~~~ ___
Accessing Cite Attribute with JavaScript
The cite attribute can be accessed and manipulated 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; line-height: 1.6;">
<h2>Quote Source Information</h2>
<p>Here's a famous quote:
<q id="myQuote" cite="https://www.goodreads.com/quotes">The only way to do great work is to love what you do.</q>
</p>
<button onclick="showCite()">Show Source</button>
<p id="result"></p>
<script>
function showCite() {
var quote = document.getElementById("myQuote");
var citeValue = quote.getAttribute("cite");
document.getElementById("result").innerHTML = "Source: " + citeValue;
}
</script>
</body>
</html>
When the button is clicked, JavaScript retrieves and displays the cite attribute value −
Quote Source Information Here's a famous quote: "The only way to do great work is to love what you do." [Show Source] (After clicking: Source: https://www.goodreads.com/quotes)
Benefits of Using the Cite Attribute
The cite attribute provides several advantages −
Accessibility − Screen readers can access source information to provide context to users with visual impairments.
SEO Benefits − Search engines can use citation information to understand content sources and authority.
Documentation − Helps maintain proper attribution and source tracking for content management.
Legal Compliance − Assists in meeting copyright and fair use requirements by providing source attribution.
Conclusion
The cite attribute is a valuable HTML feature that provides source attribution for quoted, deleted, or inserted content. While not visually displayed, it enhances accessibility, SEO, and content documentation by linking text to its original source. Use it with <q>, <blockquote>, <del>, and <ins> elements for proper content attribution.
213 Views
