HTML Citation Generator

Build citation markup using the cite element, an inline quotation and a linked source.

HTMLinline cite
<p><cite><a href="https://example.com/design-of-everyday-things">The Design of Everyday Things</a></cite>, Don Norman, 2013</p>
Runs locally in your browser

About the HTML Citation Generator

HTML has a narrow definition of a citation. The <cite> element holds the title of a creative work: a book, paper, film, album, exhibition or web page. It is not for the author. That distinction trips up a lot of hand written markup, and the specification changed on this point years ago, which is why so many older examples wrap a person name in it. This generator keeps the title inside <cite> and leaves the author and year as ordinary text beside it.

The <q> element is for a short quotation that sits inside a sentence. Browsers add the quotation marks themselves and choose the right glyphs for the page language, so do not type your own or you will end up with doubled marks. Both <q> and <blockquote> accept a cite attribute holding the source URL, which is invisible on the page but readable by tools.

Three arrangements are offered here: a bare citation line, a sentence with an inline quotation and a linked title, and a figure whose caption carries the attribution. Everything is escaped so a title containing an ampersand stays valid. This produces semantic markup, not an academic reference in APA or MLA format, which is a different job with strict punctuation rules. For a standalone passage rather than an inline phrase, the HTML Blockquote Generator is the right tool.

How to use

  1. Enter the title of the work, the author and the year.
  2. Add the source URL to link the title and fill the cite attribute.
  3. Pick cite only, q with cite or the figure form.
  4. Copy the line into your page.

Common questions

Should the author go inside the cite element?
No. Current HTML restricts cite to the title of a work, so the author name sits outside it as plain text.
Do I add quotation marks around the q element?
No. Browsers insert them automatically and pick the correct glyphs for the language, so typing your own gives you two sets.
Does this produce an APA or MLA reference?
It produces semantic HTML markup. The punctuation rules of an academic style guide are a separate concern you would apply to the text itself.
Is a cite URL required?
It is optional. Leave it blank and the title renders as plain text rather than a link.