The HTML blockquote tag helps you define a comparatively longer block of content quoted from another source on your webpage. This tag is used as an alternative to the <q> tag when the content inside the quotation is longer.
It informs the search engine about the quotation; the cite attribute inside the <blockquote> tag does the work of including the source address. Let us learn more about the HTML blockquote tag and the best practices for using it in web projects.
What is the HTML blockquote Tag?
The HTML blockquote tag indicates long quotations referred to from other sources on a webpage. You can see these tags used frequently in block-level elements. This HTML tag is used to separate other content elements on the webpage from the quoted content cited from other sources.
This tag is useful when we want to stand out a resource we are using on our webpage easily using a simple HTML tag. Here, we will learn how to implement HTML blockquote tags in a webpage and their significance in more detail.
The HTML Blockquote Tag: Key Highlights
- The <blockquote> tag is used to highlight or set apart content or a resource taken from another source.
- The HTML blockquote tag is used for long quotations, while you can use <q> for inline or short quotations.
- You might see <blockquote> elements indented on browsers by default. You can remove the indentation yourself.
- The blockquote tag is supported on all modern browsers, including Safari, Firefox, Chrome, Opera Mini, and more.
- The <blockquote> tag contains a specific attribute named “cite” containing the URLs of the website reference taken.
- The blockquote HTML tag supports the global and event attributes.
HTML blockquote Tag: Syntax
You can easily put a blockquote in action using the simple HTML tag opening with <blockquote> and ending with a closing </blockquote> tag. Check a simple representation of the syntax of the HTML blockquote tag along with a simple example.
| <blockquote cite= “”>………….</blockquote> |
You can check a simple example representation of the <blockquote> tag in action below.
| !DOCTYPE html>
<html> <body> <div> <p>Do you know upskilling is very important?</p> <blockquote cite=”https://pwskills.com“> Elevate your skills! Seamlessly blend the worlds of technology & business together for a future full of endless possibilities. </blockquote> </div> </body> </html> |
Output
 |
The “cite” attribute here specifies the source of the quotation. Here, it holds the URL of the PW Skills Homepage from where the section was taken. Here, the element paragraph with indentation is enclosed within the <blockquote> tag as it is taken from the upskilling platform, PW Skills.
Attributes Used With the HTML blockquote Tag
The HTML blockquote has its own special attribute, and it also supports global attributes and event attributes.
The cite attribute
The cite attribute is used to enclose the source URL of the text quoted within the <blockquote> tag. It generally tells or informs users or search engines about where the quote came from.
The content or URL inside the cite attribute does not automatically get displayed on the web page. It helps search engines mark the quoted content, offer accessibility, and adds to the SEO of the webpage.
| cite | It contains the source URL of the quoted text |
Global attributes and Event attributes
The <blockquote> tag also supports both global and event attributes. Let us check some of the frequently used attributes below.
| Attribute | Description |
| class | It adds one or more class names for styling with CSS. |
| id | The ID attribute is used to add a unique identifier for the element. |
| style | It adds an inline CSS to the element. |
| title | The title attribute adds extra information on hover as a tooltip. |
| lang | It defines the language of the element’s content. |
| dir | It sets text direction (ltr, rtl, auto). |
| hidden | The hidden attribute hides the element from the page. |
| draggable | It makes the element draggable (true/false). |
| tabindex | It controls the keyboard navigation order. |
| contenteditable | This attribute specifies the element’s content editable by the user. |
How to Implement the HTML <blockquote> Tag?
Using an HTML <blockquote> tag requires taking care of certain points to make proper use of this tag in your webpage.
- Step 1: Create a blockquote tag with the opening <blockquote> element and closing </blockquote> element.
- Step 2: Embed the content in your HTML document within the <blockquote> tag.
- Step 3: The most important part is giving citation or credit to the original source.
- Step 4: The citation part can be implemented using the “cite” attribute available with the <blockquote> tag.
- Step 5: You can keep the quoted section in a container using the <div> tag.
By default, the cited section will appear with an indent in the live page when rendered. You can change this default behaviour. Check how to do it below.
How to Remove Indentation of the HTML blockquote Tag?
You can easily remove the indentation in the <blockquote> tag content by using the inline styling. You can set the margin and padding to completely remove the indentation and set it to match other contents. However, this might omit the difference that exists between the quoted section and other content.
For this, you can enclose your section within a div tag with catchy styling or simply change the font CSS styling. Let us take the above example and remove the indentation from the content.
| <!DOCTYPE html>
<html> <body> <div> <p>Do you know upskilling is very important?</p> <blockquote cite=”https://pwskills.com”style=”margin: 0; padding: 10px 0;font-style:italic”> Elevate your skills! Seamlessly blend the worlds of technology & business together for a future full of endless possibilities. </blockquote> </div> </body> </html> |
Output with Indentation
|
Output without Indentation
 |
We have also added “italic” styling to the quoted text in the <blockquote> tag to increase the visibility of the special section.
Styling the <blockquote> Tag in HTML
You can easily style the blockquote tag apart from the default indentation it has from the beginning. Let us check a simple example of styling <blockquote> tag with CSS.
| <blockquote style=”border-left: 4px solid #008DE3; padding-left: 12px; font-style: italic; color: #333;”>
“Elevate your skills! Seamlessly blend the worlds of technology & business together for a future full of endless possibilities.” </blockquote> |
Output
 |
You can see the styling we are using in the code is “border-left: 4px solid #008ED3; padding-left: 12px; font-style: italic; color: #333;” This styling has been implemented inside the <blockquote> quotations. You can easily create your own type of styling with this tag, adding more customization and uniqueness to your webpage.
Best Practices for Using the HTML <blockquote> Tag
Let us see how and when we should be using the <blockquote> element for our webpage.
- The <blockquote> tag is used mainly for longer block-level quotes, while shorter quotes can be represented with the <q> tag.
- You can use the cite attribute to get the URL of the source of the quote. If you have the URL available, you can use it for semantic visibility.
- You can also include attribution inside the content if you are not using the cite attribute.
- Avoid using the <blockquote> tag for styling and indentation purposes. You can use CSS styling for custom indentation or styling.
- Nesting must not be done until you are quoting a content block that itself is taken from another source.
- You can use CSS for styling your blockquote section, like defining its margins, paddings, font styles, and more.
- Make sure that the content you are placing inside the quote is relevant to the surrounding context for better accessibility and clarity.
Make a Comeback With PW Skills!
It’s time now! Begin your preparation with the PW Skills Full Stack Web Development course, completely tailored for young aspirants and even working professionals looking to make it big in their web development career. Get interactive sessions tailored with the latest curriculum and real world projects.
The course is completely flexible, giving you flexible weekend live sessions along with pre-recorded tutorials. You will practice your skills with coding exercises, assessments, and more. Get complete career guidance and interview preparation with specially aligned doubt-solving sessions within this course. Hurry! Enroll now and start your journey with PW Skills.
FAQs
Q1. What is the HTML blockquote tag?
Ans: The HTML blockquote tag specifies long quoted texts or phrases taken from another source. It helps search engines get more information about the quotation used.
Q2. How to implement the blockquote tag in HTML?
Ans: The HTML blockquote tag can be implemented using the <blockquote tag. Everything enclosed within the <blockquote and </blockquote tags is quoted text.
Q3. What is the cite attribute in the blockquote tag?
Ans: The cite attribute is used to include the source URL or address from where the long quotation is taken to be included on the webpage.
Q4. Why use the blockquote tag in HTML?
Ans: You can use the <blockquote tag when you are taking a long quotation from another webpage or source. It is an alternative to <q tag in HTML, which is used for smaller quotations, generally one liner.
