HTML <blockquote> Blockquote Tag
Tags: learnhtml
Published: 2021-02-13 11:34:14

---
title: HTML <blockquote> Blockquote Tag
published: true
date: 2021-02-13 09:42:22 UTC
tags: LearnHTML
canonical_url: https://sharepointanchor.com/learn-html/html-blockquote-blockquote-tag/
---

The Blockquote tag
is used for **indicating long quotations** inside the HTML document. The browser usually displays the content within the blockquote tag as **indented text**. The blockquote tag is placed within the body tag

You can also use the **[CSS](https://sharepointanchor.com/category/learn-css/ "CSS") margin-left** and **margin-right** properties or use the **margin** shorthand property to **change the indentation** applied to the quoted text.

Note: The blockquote tag in **HTML 4.1** defines the **long quotation**. But in **HTML 5** , this tag specifies the section that is **quoted from the other source**.

A **URL for the quotation** source can be given with the **“cite”** attribute and the **text display of the source** can be given within the **<cite>** element.

<svg aria-hidden="true" focusable="false" data-icon="clock" width="20" height="20" fill="none" stroke="currentColor" style="display:inline-block;vertical-align:-0.1em" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>Estimated reading time: 4 minutes

## Syntax:

The blockquote tag always comes in pairs. The quoted text is written between the **opening blockquote**  **tag** and **closing blockquote tags**.

```

<blockquote> Content </blockquote>

```

If you want to insert a **short or inline quote** , you can use the **q tag** instead of the blockquote tag.

## Sample of the HTML blockquote Tag:

```

<!DOCTYPE html>
<html>
  <head>
    <title>Blockquote tag</title>
  </head>
  <body>
<p>This is the sample paragraph.</p>
        <blockquote>
      All our dreams can come true, if we have the courage to pursue them. 
    </blockquote>
<cite>Walt Disney</cite>
  </body>
</html>

```

## Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Result-1-4.png)<figcaption>Result</figcaption>

<script async src="//jsfiddle.net/Share_Point_Anchor/au3n0vo1/2/embed/html,result/"></script>

## Sample of HTML blockquote tag with <q> Tag:

```

<!DOCTYPE html>
<html>
  <head>
    <title>Blockquote tag VS q tag</title>
  </head>
  <body>
    <h4> This is the sample of blockquote tag</h4>
    <blockquote>
      All our dreams can come true, if we have the courage to pursue them.  
    </blockquote>
<h4> This is the sample of q tag</h4>
    <q>If you can dream it, you can do it.</q><br><br>
<cite>Walt Disney</cite>
  </body>
</html>

```

### Result:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Result-2-4.png)<figcaption>Result</figcaption>

## Attributes:

The **<[blockquote](https://en.wikipedia.org/wiki/Blockquote_element)>** tag supports both **Global Attributes** and the **Event Attributes**.

| Attributes | Value | Description |
| --- | --- | --- |
| cite | URL | It specifies the source of the quote. The specified value can be either a relative or an absolute URL. |

## Styling Methods for blockquote Tag:

You can use the following properties to style an [HTML](https://sharepointanchor.com/category/learn-html/ "HTML") blockquote tag.

### Properties to style the visual weight/emphasis/size of the text in blockquote tag:

- **CSS font-style** – This CSS property helps to set the font style of the text such as normal, italic, oblique, initial, inherit.
- **CSS font-family** – This CSS property specifies a prioritized list of one or more font family names or generic family names for the selected element.
- **CSS font-size** – This CSS property will help to set the size of the font.
- **CSS font-weight** – This CSS property used to define whether the font should be bold or thick.
- **CSS text-transform** – This CSS property will control the text case and capitalization.
- **CSS test-decoration** – This CSS property specifies the decoration added to text such as **text-decoration-line** , **text-decoration-color** , **text-decoration- style**.

### Styles to coloring the text in blockquote Tag:

- **CSS color** – This CSS property will specify the color of the text content and decorations.
- **CSS background-color** – This CSS property helps to set the background color of an element. 

### Text layout styles for blockquote Tag:

- **CSS text-indent** – This CSS property is used to specify the indentation of the first line in a text block.
- **CSS text-overflow ** – This CSS property helps to describe how overflowed content that is not displayed should be signaled to the user.
- **CSS white-space** – This CSS property describes how white-space inside an element is handled.
- **CSS word-break**  – This CSS property decides where the lines should be broken.

### Other Properties for blockquote Tag:

- **CSS text-shadow**  – This CSS property helps to add the shadow to text.
- **CSS text-align-last**  – This CSS property will set the alignment of the last line of the text.
- **CSS line-height** – This CSS property defines the height of a line.
- **CSS letter-spacing** – This CSS property helps to decide the spaces between letters/characters in a text.
- **CSS word-spacing** – This CSS property specifies the spacing between every word.

## Browser Support:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Browser-Support-3.png)<figcaption>Browser Support</figcaption>

### Related Articles:

- **[HTML <aside> Aside Tag](https://sharepointanchor.com/learn-html/html-aside-tag/)**
- **[HTML <bdi> Bi-Directional Isolation Tag](https://sharepointanchor.com/learn-html/html-bdi-tag/)**
- **[Basic HTML Definitions and Usages in the Real World](https://sharepointanchor.com/learn-html/basic-html-definitions-and-usages-in-real-world/)**
- **[HTML <abbr> Abbreviation Tag](https://sharepointanchor.com/learn-html/html-abbreviation-tag/)**
- **[HTML <bdo> Bi-Directional Override Tag](https://sharepointanchor.com/learn-html/html-bdo-bi-directional-override-tag/)**

The post [HTML Blockquote Tag](https://sharepointanchor.com/learn-html/html-blockquote-blockquote-tag/) appeared first on [Share Point Anchor](https://sharepointanchor.com).