The cite element

Michael Gearon Published on October 9, 2023

A citation is a quotation from or reference to a book, paper, or author, we can use the <cite> HTML element to define title of a cited creative work. The element doesn’t have any unique attributes. It supports the Global Attributes in HTML.

How to use the cite element

The cite element tends to reference the title of the work, it can also contain the author of the work but this is optional and depending on who to speak to is not recommended. You tend to see a combination of using both the cite element and the blockquote element as the blockquote is used to quote a reference or a source and the cite element then defines where that source came from. You may also use the <a> element to link to that source.

By the default the cite element has little to no styling from the browser, when applying styling to the cite element you may bold or italicise the content to make the source stand out against the rest of the content. The element is supported by all major browsers.

<figure>
  <blockquote>
    <p>In the 90s, the web was full of 15-page specifications, all in a single file. You scrolled through those massive documents just like you paged through an encyclopedia</p>
  </blockquote>
  <figcaption>
    <cite><a href="https://www.oreilly.com/library/view/what-is-html5/9781449315009/">What is HTML5?</a></cite> by Brett McLaughlin (Part 1, Chapter 1).
  </figcaption>
</figure>

In this example we have contained the blockquote and the citation in a figure element, as it’s a self-contained piece of content. We then have a blockquote that is taken from the book “What is HTML5?” and using the figcaption HTML element we then have defined the caption. The citation contains a link to the book, the title of the book, and outside of the citation we have the author and location of the quote.

More HTML guides

• The aside element
• The address element
• The article element

First published on October 9, 2023