How to Mark Up a Citation in HTML

See HTML: Tips and Tricks for similar articles.

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 Ask Good Technical Questions
  2. How to Properly Nest Lists in HTML
  3. How to Install and Use Visual Studio Code for Class
  4. How to Open HTML Files in Your Browser from Visual Studio Code
  5. How to Create a Simple HTML Document
  6. How to Work with Empty and Container Tags in HTML
  7. How to Mark Up a Citation in HTML (this article)
  8. How to Create an HTML Table
  9. How to Force a Refresh of favicon.ico