The cite Element for Titles of Works

Technical Deep Dive & Specifications

2.1 Element Metadata & WHATWG Specification Rules

The WHATWG specification states:

"The <cite> element represents the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, a computer program, etc.). A person's name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people's names."

2.2 Valid vs Invalid <cite> Usage Matrix

2.3 Comparison: <cite> vs <i> vs <em>

While all three elements render in italics by default in standard browser stylesheets, their semantic meanings are fundamentally distinct:

┌─────────────┬───────────────────────────────────────┬───────────────────────────────┐
│ Element     │ Semantic Purpose                      │ Typical Example               │
├─────────────┼───────────────────────────────────────┼───────────────────────────────┤
│ <cite>      │ Title of a creative work / artifact   │ <cite>Hamlet</cite>           │
│ <i>         │ Idiomatic voice, taxonomy, technical  │ <i>Homo sapiens</i>           │
│ <em>        │ Stress emphasis altering meaning      │ I <em>really</em> want this!  │
└─────────────┴───────────────────────────────────────┴───────────────────────────────┘

2.4 Proper Attribution Architecture

When quoting someone or referencing literature, follow this standard structural pattern:

<!-- Correct Pattern: Author outside <cite>, Title inside <cite> -->
<p>
  As Robert C. Martin noted in <cite>Clean Code: A Handbook of Agile Software Craftsmanship</cite>, leaving the campsite cleaner than you found it is paramount.
</p>

<!-- Inside a Blockquote Footer -->
<blockquote>
  <p>Truth is ever to be found in simplicity, and not in the multiplicity and confusion of things.</p>
  <footer>
    — Sir Isaac Newton, <cite>Philosophiae Naturalis Principia Mathematica</cite> (1687)
  </footer>
</blockquote>

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Lines 61–63 (<cite>The Myth of Sisyphus</cite>): Uses <cite> strictly for the book title, while author Albert Camus is placed in normal prose text with a styling class.
• Lines 69–71 (<cite>Spirited Away</cite>): Applies <cite> to the anime film title, leaving director Hayao Miyazaki outside <cite>.
• Lines 77–79 (<cite>Linux Kernel</cite>): The computer operating system kernel is an intellectual creative work, making it a valid candidate for <cite>.
• Lines 85–87 (<cite>Marbury v. Madison</cite>): Legal case titles and law reports are explicitly cited using <cite> under WHATWG specifications.

Expected Browser Render Output

+-----------------------------------------------------------------------+
| Creative Media & Bibliographic Index                                  |
| ───────────────────────────────────────────────────────────────────── |
| [LITERATURE]                                                          |
| In The Myth of Sisyphus, author Albert Camus explores the            |
| philosophy of the absurd and human resilience.                        |
|                                                                       |
| [CINEMA]                                                              |
| Directed by Hayao Miyazaki, Spirited Away remains one of the most     |
| celebrated animated feature films of all time.                        |
|                                                                       |
| [OPEN SOURCE SOFTWARE]                                                |
| Created by Linus Torvalds and contributors, the Linux Kernel powers   |
| over 90% of cloud infrastructure.                                     |
|                                                                       |
| [JURISPRUDENCE]                                                       |
| The Supreme Court ruling in Marbury v. Madison established the       |
| principle of judicial review...                                       |
+-----------------------------------------------------------------------+