WebToolsPlanet
Developer Tools

HTML Citation Generator

Mark a title of a creative work with a <cite> element — books, films, songs, websites — optionally linked, and copy the HTML with live preview.

Last updated: May 21, 2026

Client-Side Processing
Input Data Stays on Device
Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is HTML Citation Generator?

The HTML `<cite>` element marks the title of a creative or intellectual work: a book, a film, a song, a painting, a website, a research paper, or similar. By convention browsers render `<cite>` in italic, though this can be overridden with CSS.

Note that `<cite>` is specifically for titles of works — not for general attribution or the name of the person who said something. For inline quotations use `<q>`; for block quotations use `<blockquote>`. Wrapping `<cite>` in an `<a>` tag links the title to the source, which is a common pattern in academic or journalistic writing.

How to Use HTML Citation Generator

1

Enter the title of the work

2

Optionally add a URL to link the citation

3

Optionally add id, class, or title attributes

4

Copy the generated HTML

Common Use Cases

  • Bloggers marking book or article titles in prose.
  • Developers adding semantic citation markup to review or reference pages.
  • Content authors linking cited film or song titles to their source pages.

Example Input and Output

A citation linking a book title to its Wikipedia page.

Configuration
Text: The Great Gatsby
Link URL: https://en.wikipedia.org/wiki/The_Great_Gatsby
HTML output
<a href="https://en.wikipedia.org/wiki/The_Great_Gatsby"><cite>The Great Gatsby</cite></a>

Privacy

All HTML generation runs in your browser. No data is sent to any server.

Frequently Asked Questions

Can I use <cite> for a person's name?
No. The HTML spec explicitly states that <cite> must not be used for the name of a person. Use it only for titles of works. For a person's name in an attribution context, plain text or a <span> is appropriate.
Is <cite> the same as a bibliographic reference?
<cite> marks the title of a work inline in prose. A full bibliographic reference (author, year, publisher) belongs in a <footer> or <details> element, often formatted with CSS. <cite> is just the title portion.