The cite Attribute on Quotations

Technical Deep Dive & Specifications

2.1 Supported Elements & WHATWG Specification Rules

The cite attribute is not a global attribute; it is valid only on four specific HTML elements:

According to the WHATWG HTML Living Standard:

"The cite attribute, if present, must be a valid URL potentially surrounded by spaces."

Writing plain text like cite="Albert Einstein" or cite="Page 42 of The Great Gatsby" is invalid HTML. It must always be a parseable URL (e.g., cite="https://doi.org/10.1000/182" or cite="/archives/doc-104.html").

2.2 The Browser Visibility Gap

A common point of confusion for beginner web developers is expecting the browser to create an automatic link when cite="..." is written:

<!-- The browser renders the text below, but DOES NOT display or link the URL! -->
<blockquote cite="https://developer.mozilla.org">
  <p>MDN Web Docs is an open-source documentation resource.</p>
</blockquote>

DOM Node Inspection:
HTMLQuoteElement {
  cite: "https://developer.mozilla.org",
  innerText: "MDN Web Docs is an open-source documentation resource."
}

Since the browser UI ignores the cite attribute during standard visual rendering, assistive technologies and standard users cannot click it unless you provide an explicit <a> element.

2.3 Comparison: cite Attribute vs <cite> Element vs <a> Element

2.4 Programmatic Access via JavaScript & CSS

You can read and manipulate the cite attribute programmatically via the HTMLQuoteElement.cite DOM property:

// Accessing cite attribute on all blockquotes
const quotes = document.querySelectorAll('blockquote[cite]');
quotes.forEach(quote => {
  console.log(`Source URL: ${quote.cite}`);
});

CSS Print Stylesheet Integration

In academic publishing, print stylesheets often use the CSS attr() function to automatically append the citation URL when printing a web page:

@media print {
  blockquote[cite]::after {
    content: " [Source: " attr(cite) "]";
    font-size: 0.85em;
    color: #555555;
    display: block;
    margin-top: 0.5rem;
  }
}

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 60 (<blockquote cite="...">): Attaches the machine-readable canonical CERN URI to the blockquote. Bots and search indexing parsers extract this URL directly.
• Lines 64–66 (<footer> ... <cite><a href="...">): Provides the human-facing interactive hyperlink. The user can see the title of the work formatted with <cite> and click the <a> tag to visit the source.
• Lines 73–74 (<del cite="..."> <ins cite="...">): Demonstrates the cite attribute on <del> and <ins> tags, linking revisions directly to an internal tracking ticket (MEET-402).
• Lines 82–90 (script): Uses JavaScript to demonstrate that HTMLQuoteElement.cite resolves to a fully-qualified URL string in the DOM API.

Expected Browser Render Output

+-----------------------------------------------------------------------+
| Machine & Human Citations                                             |
|                                                                       |
| Tim Berners-Lee described his original vision for the World Wide Web: |
|                                                                       |
| ▌ The Web is more a social creation than a technical one. I designed  |
| ▌ it for a social effect—to help people work together...              |
| ▌                                                                     |
| ▌ — Sir Tim Berners-Lee, Information Management: A Proposal [Link]    |
|                                                                       |
| The meeting will take place on Tuesday Thursday at 3:00 PM.           |
|                                                                       |
| [ DOM Inspection via JavaScript: ]                                    |
| bq.tagName: "BLOCKQUOTE"                                              |
| bq.cite (Machine URL): "https://www.w3.org/History/1989/proposal.html"|
+-----------------------------------------------------------------------+