Quoting in HTML5 is as simple as tagging the quoted text with the inline <q> tag. The cite attribute of the <q> tag specifies the source URL of a quote.

In this post:
  1. Syntax
  2. Style
Required knowledge:

1. Syntax

The below code:

<p><q cite="https://creativecommons.org/about/">Creative Commons is a nonprofit organization that helps overcome legal obstacles to the sharing of knowledge and creativity to address the world’s pressing challenges.</q></p>

Results in:

Creative Commons is a nonprofit organization that helps overcome legal obstacles to the sharing of knowledge and creativity to address the world’s pressing challenges.

“Technology is a useful servant but a dangerous master.”
Christian Lous Lange, Historian

2. Style

The example below demonstrates the default style for a quote: the text is inserted in quotes. This is fairly boring and easily styled using CSS.

See the Pen HTML’s <q> tag by David Fox (@foxbeefly) on CodePen.


References:

  1. HTML <q> Tag (no date) HTML q tag. Available at: https://www.w3schools.com/tags/tag_q.asp (Accessed: 6 November 2023).
  2. Systems, K. C. (2023) Ten inspirational tech quotesKerridge Commercial Systems Global. Kerridge Commercial Systems Ltd. Available at: https://www.kerridgecs.com/blog/ten-inspirational-tech-quotes (Accessed: 6 November 2023).

By MisterFoxOnline

Mister Fox AKA @MisterFoxOnline is an ICT, IT and CAT Teacher who has just finished training as a Young Engineers instructor. He has a passion for technology and loves to find solutions to problems using the skills he has learned in the course of his IT career.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.