How to Mark Up a Citation in HTML

See HTML: Tips and Tricks for similar articles.
Looking to improve your HTML skills? Check out Webucator’s HTML classes.

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.

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 Articles

  1. How to Properly Nest Lists in HTML
  2. How to Open HTML Files in Google Chrome from Visual Studio Code
  3. How to Create a Simple HTML Document
  4. How to Work with Empty and Container Tags in HTML
  5. How to Mark Up a Citation in HTML (this article)
  6. How to Create an HTML Table
  7. How to Force a Refresh of favicon.ico