• Tutorial List

HTML Quotation & Cite Tag

Last updated Jul 08, 2020
How to add HTML Quotations on a web page

How to add HTML Quotations on a web page?

The HTML <blockquote> and <q> tags are used to add quoted texts to a web page. These elements represent a section that is quoted from another source.


HTML <blockquote> Tag

The <blockquote> tag is used for long and multi-line quotations. Web Browsers automatically add some space (margin) to this element.

<!DOCTYPE html>
<html>
	<body>

      <blockquote cite="https://www.lipsum.com/">
        <h2>What is Lorem Ipsum?</h2>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
      </blockquote>

	</body>
</html>

🤜 cite=”…” Attribute

The HTML citation (cite) attribute is used to specify the URL of the source of the quotation.


HTML <q> Tag

The HTML <q> tag is used to add short quotes. And you can also use the cite attribute with this element.

<!DOCTYPE html>
<html>
	<body>

      <p>Swami Vivekananda says <q>You cannot believe in God until you believe in yourself.</q></p>

	</body>
</html>

HTML <cite> tag

The HTML <cite> tag is used to define the source of creative work or a quotation. Use this tag to specify the title of creative work rather than the author or creator’s name.

<!DOCTYPE html>
<html>
	<body>

      <blockquote>
          <p>Oh yes, the past can hurt, but the way I see it you can either run from it or learn from it.</p>
          <footer>
              — from <cite>The Lion King</cite> by Rafiki.
          </footer>
      </blockquote>

	</body>
</html>

Bad example of the cite tag

<!DOCTYPE html>
<html>
	<body>

      <blockquote>
          <p>Your most unhappy customers are your greatest source of learning.</p>
          <footer>
              — <cite>Bill Gates</cite>
          </footer>
      </blockquote>

	</body>
</html>

Good example

<!DOCTYPE html>
<html>
	<body>

      <blockquote>
          <p>Your most unhappy customers are your greatest source of learning.</p>
          <p>— Bill Gates</p>
      </blockquote>
      
      <strong>Or</strong>
      
      <blockquote>
          <p>Your most unhappy customers are your greatest source of learning. <br>— Bill Gates</p>
      </blockquote>

	</body>
</html>

Ask Questions

Your email address will not be published. Required fields are marked *