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
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
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.