Crus4

logo

Blockquote in HTML


In this article we will learn about <blockquote> tag.

HTML Quotes

HTML Quotes are used to put a short quotation on a web page. We mainly use HTML q tag and HTML blockquote tag to make it happen.

HTML <blockquote> Element

The <blockquote> tag in HTML is used to specify a section that is quoted from another source. It automatically changes the alignment of the quote so that it appears different from others. We can use elements like Heading, List, Paragraph and more in blockquote tag.

Note:- In HTML4 blockquote is used to display the long quotation. But in HTML5, it is used to specify the section that is quoted from other source.

The <blockquote> tag contains a single an attribute namely cite. This attribute is used to specify the quotation source.

Let’s easily understand the blockquote tag with the simple example:

Example

<p> Here is a quote from BrainyQuote's website. </p> 
</br>
<blockquote cite="https://www.brainyquote.com/quotes/lao_tzu_398196"> 
Do the difficult things while they are easy and do the great things while they are small. A journey of a thousand miles must begin with a single step.
</blockquote>

Output

Here is a quote from BrainyQuote’s website.


Do the difficult things while they are easy and do the great things while they are small. A journey of a thousand miles must begin with a single step.

Supported Browsers:

  • Chrome
  • Internet Explorer
  • Opera
  • Safari

Styling <blockquote> tag

We can style the <blockquote> tag by using the simple CSS property.

Example

<!DOCTYPE html>
<html> 
<head>
  <title> Style blockquote tag </title> 
  <style> 
  blockquote{
    text-align: justify;
    background-color: #18dc4f;
        border-radius: 5px;
        margin-right: 30px;}
  cite{
    margin-left: 20px;}
  </style>
</head>
<body>
  <p> Quote from brainyquote </p> 
  <blockquote cite=" https://www.brainyquote.com/quotes/lao_tzu_398196" >
  <p>
  Do the difficult things while they are easy and do the great things while they are small. A journey of a thousand miles must begin with a single step.
  </p> 
  </blockquote> 
<cite>-lao_tzu_398196</cite>
</body>
</html> 

  

The <q> tag

In HTML the <q> tag defines a short quotation.

Browser’s automatically insert quotation marks in the quotation.

Example

<p> crus4's goal is to:
<q> Build a platform where people can learn to code for free. </q> </p> 

Output

crus4’s goal is to: “Build a platform where people can learn to code for free.

Summary

  • We use blockquote tag and q tag to put a quote on a web page.
  • Blockquote tag is used to specify a section that is quoted from another source.
  • In blockquote we use cite attribute to specify the quotation source.
  • We can style the Blockquote tag with the help of CSS property.
  • The q tag in HTML is used to define a short quote.

Related Articles

Get Started With Web Development

Introduction to Web Development

HTML styles

Blockquote in HTML – crus4

3 thoughts on “Blockquote in HTML – crus4

Leave a Reply

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