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:

<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: