How to Mark Up a Citation in HTML

In Brief...

In school, we all learn to write footnotes and bibliographies. On your web pages you should also cite your sources. HTML provides specific markup for doing so.

Instructions

Long Quotes

For long quotes...

  1. Wrap the quote in <blockquote> tags.
  2. Use the cite attribute to point to the source of the quote.

Example

<blockquote cite="https://www.goodreads.com/quotes/6396-the-paradoxical-commandments-people-are-illogical-unreasonable-and-self-centered-love">
  <p>People are illogical, unreasonable, and self-centered.</p>
  <p>Love them anyway.<p>
  <p>If you do good, people will accuse you of selfish ulterior motives.</p>
  <p>Do good anyway.</p>
  <p>If you are successful, you will win false friends and true enemies.</p>
  <p>Succeed anyway.</p>
</blockquote>

Short Quotes

For short quotes...

  1. Wrap the quote in <q> tags.
  2. Use the cite attribute to point to the source of the quote.

Example

<p>
  <q cite="https://www.goodreads.com/quotes/48-three-things-in-human-life-are-important-the-first-is">Three
  things in human life are important: the first is to be kind; the second is to be kind; and the third is to be
  kind.</q> - Henry James
</p>

Related Training

Author: Nat Dunn

Nat Dunn founded Webucator in 2003 to combine his passion for web development with his business expertise and to help companies benefit from both.

Discuss