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 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 element.
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:
Sample of HTML blockquote tag with 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:
Attributes:
The <blockquote> 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 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:
Related Articles:
- HTML
- HTML Bi-Directional Isolation Tag
- Basic HTML Definitions and Usages in the Real World
- HTML Abbreviation Tag
- HTML Bi-Directional Override Tag
The post HTML Blockquote Tag appeared first on Share Point Anchor.
Top comments (0)