The cite Element – Reference to Creative Work

Technical Deep Dive & Specifications

WHATWG HTML Living Standard Specification

According to the official WHATWG specification:

"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 television 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."

Exhaustive List of Valid Creative Works for <cite>

                                  +---------------------------+
                                  |     VALID <cite> WORKS    |
                                  +---------------------------+
                                                |
        +------------------+--------------------+-------------------+------------------+
        |                  |                    |                   |                  |
        v                  v                    v                   v                  v
  [ LITERATURE ]      [ MEDIA ]            [ SOFTWARE ]       [ SCIENTIFIC ]     [ FINE ART ]
  Books, Essays,      Films, Albums,       OS, Libraries,     Whitepapers,       Paintings,
  Plays, Poems        Podcasts, Songs      Game Engines       Case Studies       Sculptures

<cite> Element vs. cite Attribute

Do not confuse the inline <cite> element with the cite="" attribute:

<!-- The 'cite' attribute accepts a URL pointing to the online source -->
<blockquote cite="https://www.w3.org/TR/html52/">
  <p>HTML is the standard markup language for documents designed to be displayed in a web browser.</p>
</blockquote>

<!-- The <cite> element encloses the human-readable TITLE of that work -->
<p>
  Source: <cite>W3C HTML 5.2 Recommendation</cite> by the W3C Web Platform Working Group.
</p>

Architectural Best Practice: <figure> + <blockquote> + <figcaption>

The semantic gold standard for presenting quotations with their full attribution is wrapping them in a <figure>:

<figure>
  <blockquote cite="https://archive.org/details/designofeveryday00norm">
    <p>Good design is actually a lot harder to notice than poor design, in part because good designs fit our needs so well that the design is invisible.</p>
  </blockquote>
  <figcaption>
    &mdash; Don Norman, in <cite>The Design of Everyday Things</cite>
  </figcaption>
</figure>

💻 Interactive Code Playground

Starter Code

Line-by-Line Code Breakdown

• Line 43: <figure> — Groups the quotation and its attribution caption into a self-contained unit.
• Line 44: <blockquote cite="https://dl.acm.org/..."> — The cite attribute supplies the machine-readable URL.
• Line 50: <span class="author-name">Donald E. Knuth</span> — The author is wrapped in a <span>, not a <cite>.
• Line 51: <cite>Structured Programming with go to Statements</cite> — Encloses the exact title of the published paper.
• Line 60–61: <cite>The UNIX Time-Sharing System</cite> and <cite>The C Programming Language</cite> — Semantic citations for book/paper titles inside regular text flow.

Expected Browser Render Output

• The quote renders with an indigo border and subtle background tint.
• The paper and book titles appear in clean italicized typography (<cite> defaults to font-style: italic), highlighted in indigo.
• The author names render in upright bold text.