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
3 thoughts on “Blockquote in HTML – crus4”