HTML <cite> Tag for Quote Source

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

The <cite> Tag in HTML 5

The <cite> tag identifies the title of a creative work. The cite element is one of the phrase elements in HTML. It can be used by itself, or along with one of the quote tags:

<q> for a short quote, inline with other content
<blockquote> for a long quote

<cite> for a paraphrased quote

When a source is not being quoted directly, the <cite> tag would be used without a quote tag (<blockquote> or <q> tag). For example:

According to Authoring HTML, the <cite> tag should be used for the title of a creative work, not the cited content.

<cite> with <q> tag for a short quote

When a source is being quoted directly, the <cite> tag along with the <q> tag can be used for a short quote:

Per HTML Color Picker, In a browser that does not yet support the HTML <input type="range"/> for a slider bar control, [HTML slider bar] controls will appear as text input fields.

The content inside the q element appears inline with the surrounding content. Note the use of square brackets in this example.

<cite> with <blockquote> tag for a long quote

The <cite> tag can be used with the <blockquote> tag can be used for a longer passage that is being quoted directly:

One of my favorite quotes from William Shakespeare Twelfth Night Act II Scene 5:

In my stars I am above thee; but be not afraid of greatness: some are born great, some achieve greatness, and some have greatness thrust upon 'em.

These are actual working examples of the <cite> tag example code below. Resize the browser window narrower or wider to see whether or not your browser supports the word break (<wbr/>) tag in content with a white-space: nowrap style. WebKit-based browsers such as Chrome and Safari are the first ones to support the <wbr/> tag in this context and break the citation where indicated; Firefox and Opera do not and instead move the entire citation to a separate line when it does not fit on the first line.

Use of square brackets in quotes

When any text in the quote is changed or added, the modified text should be indicated using square brackets. Some uses of square brackets include:

Use square brackets when adding [sic] to indicate that content which may appear to the reader to be a mistake actually appears as it occurs in the original source.
Use square brackets when clarifying meaning such as when replacing a demonstrative pronoun (that, those, such, etc.) with the actual noun, possibly from unquoted source content. In the example above, square brackets were used when the word those was replaced with [HTML slider bar].

<cite> Tag Syntax

Rules for coding HTML `cite` elements

<body>
   ...
   ... phrasing content expected ...
   <cite>... phrasing content ...</cite>
   ...
</body>

Rules for coding HTML `cite` elements

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

Code the cite element for the title of a cited work where phrasing content is expected.
Begin the cite element with a starting <cite> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
Include any HTML global attributes on the <cite> tag as appropriate.
Inside the cite element, between the starting <cite> tag and the ending </cite> tag, code the inner HTML phrasing content for the title of the work that you are citing.
End the cite element with a matching </cite> closing tag.

Content Model

Content of the cite element

The content of the cite element can include HTML comments, text content and only those HTML tags that can be used in phrasing content.

<cite> Tag Attributes

Attributes of the <cite> tag

global attributes

The only attributes that can be coded on the <cite> tag are the common HTML attributes.

<cite> Tag Examples

Examples of the `cite` tag in HTML 5

Using the <cite> tag for the source of a citation

(see <cite> tag demo above)

Using <cite> for a paraphrased quote

<p>According to <a href="http://www.AuthoringHTML.com/"><cite>Authoring HTML</cite></a>,
   the &lt;cite&gt; tag should be used for the <em>title</em> of a creative work,
   <em>not</em> the cited content.</p>

<cite> with <q> tag for a short quote

<p>Per <a href="http://www.HTML-5.com/css/css-styles/#html-color-picker">
   <cite>HTML Color Picker</cite></a>,
   <q cite="http://www.HTML-5.com/css/css-styles/#html-color-picker">In a browser
   that does not yet support the HTML <input type="range"/> for a slider bar control,
   [HTML slider bar] controls will appear as text input fields.</q></p>

Note that the content of the cite element is the title of the source of the quotation, while the value of the <q cite> attribute is a URL or other URI reference. The same URL is used in the <a href> attribute, the target of the link which will be visible, and the <q cite> attribute, which will not be displayed.

<cite> with <blockquote> tag for a long quote

<p>One of my favorite quotes from <span style="white-space: nowrap">
   <a href="http://www.Shakespeare-Literature.com/Twelfth_Night/10.html">
      <cite>William Shakespeare <wbr/>Twelfth Night <wbr/>Act II Scene 5</cite></a>:</span>
</p>
<blockquote
   cite="http://www.Shakespeare-Literature.com/Twelfth_Night/10.html"
>In my stars I am above thee; but be not afraid of greatness:
   some are born great, some achieve greatness,
   and some have greatness thrust upon 'em.
</blockquote>

The <span style="white-space: nowrap"> prevents the cited title text from breaking in inappropriate places and the <wbr/> tags indicate where line breaks should be placed. The same URL is used in the <a href> attribute, the target of the link which will be visible, and the <blockquote cite> attribute, which will not be displayed.

Changes in HTML 5 - <cite> Tag

What's new in HTML 5

Differences between HTML 5 and earlier versions of HTML

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the cite element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

Valid HTML 5