Skip to main content

Blockquote and Cite

In this tutorial, we will cover the use of the <blockquote> and <cite> tags in HTML. These tags are especially useful when you want to quote a large section of text from another source, or to provide a citation for a quote or reference.

Blockquote​

The <blockquote> tag in HTML is used to define a section that is quoted from another source. The content inside the <blockquote> tag usually appears indented on both the left and right side on a web page.

Here is a basic example of how the <blockquote> tag is used:

<p>According to the World Health Organization:</p>

<blockquote cite="http://www.who.int/">
  Health is a state of complete physical, mental and social well-being and not merely the absence of disease or infirmity.
</blockquote>

In the above example, the text inside the <blockquote> tag is a quote from the World Health Organization's website.

Browsers usually indent <blockquote> elements, but you can change this style with CSS.

Cite​

The <cite> tag in HTML is used to describe the title of a work (like a book, a song, a movie, a TV show, a painting, a sculpture, etc.). Browsers usually italicize the text inside a <cite> tag.

Here is a basic example of how the <cite> tag is used:

<p>The quote from the World Health Organization is taken from the <cite>Basic Documents, Forty-ninth edition, Geneva, 2021</cite>.</p>

In the above example, the text inside the <cite> tag is the name of the source document from which the quote was taken.

Blockquote and Cite Together​

In many cases, you will find it useful to use the <blockquote> and <cite> tags together. You can include a <cite> tag within a <blockquote> to credit the source of the quote.

Here is how you can use these two tags together:

<blockquote cite="http://www.who.int/">
  Health is a state of complete physical, mental and social well-being and not merely the absence of disease or infirmity.
  <cite>Basic Documents, Forty-ninth edition, Geneva, 2021</cite>
</blockquote>

In the above example, the <cite> tag is used inside the <blockquote> to provide the source of the quote.

And that's it! You now know how to use the <blockquote> and <cite> tags in HTML. These tags are a great way to incorporate quotes and citations in your web pages, making your content more authoritative and reliable. Keep experimenting with these tags to get a firm understanding of how they work. Happy coding!