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 source URL of a quotation or referenced content. It is commonly used with the <blockquote> and <q> elements to provide a machine-readable reference to the original source, though it is not visually displayed by browsers.
Syntax
Following is the syntax for the cite attribute with the <blockquote> element −
<blockquote cite="URL"> Quoted content here </blockquote>
Following is the syntax for the cite attribute with the <q> element −
<q cite="URL">Inline quoted content</q>
Here, URL is the web address or reference to the source of the quotation.
Using Cite with Blockquote
The cite attribute provides metadata about the source of a block quotation. While not visible to users, it can be accessed by screen readers, search engines, and JavaScript for additional context.
Example
Following example demonstrates the cite attribute with a blockquote element −
<!DOCTYPE html>
<html>
<head>
<title>HTML cite Attribute Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Magento Commerce</h2>
<p>According to the official Magento website:</p>
<blockquote cite="https://magento.com/products" style="border-left: 4px solid #ccc; padding-left: 16px; margin: 20px 0; color: #666;">
Magento Commerce, part of Adobe Commerce Cloud, offers a one-of-a-kind eCommerce solution with enterprise power,
unlimited scalability, and open-source flexibility for B2C and B2B experiences.
Magento allows you to create unique, full-lifecycle customer experiences proven to generate more sales.
</blockquote>
<p><em>Source: Magento Official Website</em></p>
</body>
</html>
The output displays the blockquote with styling, while the cite attribute remains hidden but accessible to assistive technologies −
Magento Commerce
According to the official Magento website:
Magento Commerce, part of Adobe Commerce Cloud, offers a one-of-a-kind eCommerce solution with enterprise power,
unlimited scalability, and open-source flexibility for B2C and B2B experiences.
Magento allows you to create unique, full-lifecycle customer experiences proven to generate more sales.
Source: Magento Official Website
Using Cite with Inline Quotes
The cite attribute can also be used with the <q> element for inline quotations. Browsers automatically add quotation marks around <q> content.
Example
Following example shows the cite attribute with inline quotes −
<!DOCTYPE html> <html> <head> <title>Inline Quote with Cite</title> </head> <body style="font-family: Arial, sans-serif; padding: 20px;"> <h2>Famous Quotes</h2> <p>Albert Einstein once said, <q cite="https://www.brainyquote.com/quotes/albert_einstein_100015">Imagination is more important than knowledge.</q></p> <p>Steve Jobs famously stated, <q cite="https://www.brainyquote.com/quotes/steve_jobs_416857">Innovation distinguishes between a leader and a follower.</q></p> </body> </html>
The browser automatically adds quotation marks around the <q> elements −
Famous Quotes Albert Einstein once said, "Imagination is more important than knowledge." Steve Jobs famously stated, "Innovation distinguishes between a leader and a follower."
Accessing Cite Attribute with JavaScript
The cite attribute value can be retrieved and manipulated using JavaScript, which is useful for creating dynamic citation displays or validation.
Example
<!DOCTYPE html>
<html>
<head>
<title>Accessing Cite Attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Quote with Source</h2>
<blockquote id="quote1" cite="https://www.w3.org/standards/webdesign/accessibility" style="border-left: 4px solid #007acc; padding-left: 16px; margin: 20px 0;">
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
</blockquote>
<button onclick="showSource()">Show Citation Source</button>
<p id="result"></p>
<script>
function showSource() {
var quote = document.getElementById("quote1");
var citeUrl = quote.getAttribute("cite");
document.getElementById("result").innerHTML = "Source URL: " + citeUrl;
}
</script>
</body>
</html>
Clicking the button displays the cite attribute value −
Quote with Source
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
[Show Citation Source]
(After clicking: Source URL: https://www.w3.org/standards/webdesign/accessibility)
Multiple Citations Example
Following example demonstrates multiple blockquotes with different cite sources −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Citations</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Technology Quotes</h2>
<h3>About HTML</h3>
<blockquote cite="https://www.w3.org/html/" style="border-left: 4px solid #e74c3c; padding-left: 16px; margin: 20px 0; font-style: italic;">
HTML is the standard markup language for creating web pages and web applications.
</blockquote>
<h3>About CSS</h3>
<blockquote cite="https://www.w3.org/Style/CSS/" style="border-left: 4px solid #3498db; padding-left: 16px; margin: 20px 0; font-style: italic;">
CSS is a stylesheet language used to describe the presentation of a document written in HTML.
</blockquote>
<h3>About JavaScript</h3>
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/JavaScript" style="border-left: 4px solid #f39c12; padding-left: 16px; margin: 20px 0; font-style: italic;">
JavaScript is a programming language that conforms to the ECMAScript specification.
</blockquote>
</body>
</html>
Each blockquote has its own cite attribute pointing to the respective official documentation −
Technology Quotes
About HTML
HTML is the standard markup language for creating web pages and web applications.
About CSS
CSS is a stylesheet language used to describe the presentation of a document written in HTML.
About JavaScript
JavaScript is a programming language that conforms to the ECMAScript specification.
Key Points
-
The
citeattribute is not displayed visually by browsers but provides metadata for accessibility tools and search engines. -
It should contain a valid URL pointing to the source of the quotation.
-
The attribute works with both
<blockquote>for block quotations and<q>for inline quotations. -
JavaScript can access and manipulate the cite attribute value using
getAttribute("cite"). -
For user-visible citation information, combine the cite attribute with additional HTML content like links or text references.
Conclusion
The HTML cite attribute provides a standardized way to reference the source of quotations in web documents. While not visually displayed, it enhances accessibility, SEO, and provides semantic meaning to quoted content. Use it with <blockquote> for block quotes and <q> for inline quotes to create well-structured, accessible web content.
300 Views
