HTML Tutorial: Complete HTML Tutorial
About Lesson

HTML <blockquote> Tag


Concept

The <blockquote> element in HTML is used to represent a section that is quoted from another source. It’s a way to give credit to the original author or source of the content. This element is typically displayed with an indentation to signify that it’s a quotation.

Implementation

Example 1: Basic Usage of the <blockquote> Element

<!DOCTYPE html>
<html>
<head>
  <title>Quotation Example</title>
</head>
<body>
  <h2>Quoting a Famous Saying</h2>
  <blockquote cite="https://www.aptLearn.io/famous-quotes">
    The only way to do great work is to love what you do. - Steve Jobs
  </blockquote>
</body>
</html>

Try it below

Loading

Example 2: Styling the <blockquote> Element with CSS

<!DOCTYPE html>
<html>
<head>
  <style>
    blockquote {
      padding-left: 1em;
      border-left: 4px solid #696cff;  
      padding: 42px 40px 35px 40px;
      background-color: #fff;
      margin: 15px 0px;
      box-shadow: 0 2px 5px 1px rgb(64 60 67 / 16%);
    }
  </style>
</head>
<body>
  <h2>Styling a Quotation</h2>
  <blockquote cite="https://www.aptLearn.io/styled-quote">
    Success is not the key to happiness. Happiness is the key to success. - Albert Schweitzer
  </blockquote>
</body>
</html>

Try it below

Loading

Attributes

Here’s a table of attributes specific to the <blockquote> element:

Attribute Value Description
cite URL Specifies the URL of the source of the quotation

Global Attributes

The <blockquote> tag also supports the Global Attributes in HTML.

Event Attributes

The <blockquote> tag also supports the Event Attributes in HTML.

Default CSS Settings

Most browsers will display the <blockquote> element with the following default CSS settings:

blockquote {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

Browser Support

Browser Support
Chrome Yes
Firefox Yes
Safari Yes
Edge Yes
IE Yes

Conclusion

The <blockquote> element provides a standardized way to present quotations within HTML documents. By utilizing this element, developers can ensure that quotes are presented consistently and semantically across various platforms and devices. While the basic functionality is straightforward, the flexibility of CSS allows for extensive customization to align with the design and branding needs of a website.


Remember, the proper use of quotations not only adds credibility to the content but also enhances the user experience by providing context and relevance. Always consider the visual impact and the importance of the quoted content to make the most out of the <blockquote> element.