Long quotations using blockquote tag in HTML 5

It is used on long quotation with white space on both left and right side and it's render paragraph breaks.
  • 2509
 

The <blockquote> tag is used for indicating block of longer quotation (i.e. quotation including multiple lines or paragraph). In simple term, it defines a block of quotation that is taken from another source. Mostly browser indent the text from both left and right with white space margin (5 spaces) and this tag renders with paragraph breaks. It is used only for long quotations, if you need to use short quotes then you can use <q> tag. You can use multiple <blockquote> tag in your web page. This tag must have start<blockquote> tag and end </blockquote> tag. If you don't want to use blockquote tag, you can use css in place of blockquote  tag. See in below code and output.

Syntax

<blockquote

cite="URL of source information"
class="class name(s)"
dir="ltr | rtl"
id="unique alphanumeric identifier"
lang="language code"
style="style information"
title="advisory text">
</blockquote>

Example

<blockquote cite="http://www.c-sharpcorner.com/Articles/ArticleListing.aspx?SectionID=1&SubSectionID=244">
In this article you will learn about blockquote tag of HTML5 in detail with the Example.<br /> You will see there are many different types of Attributes and Events introduced by HTML5 and Internet Explorer.

</
blockquote>
 
Element - specific Attributes
Attributes Description
Cite The value of this attribute should be a URL for the document in which the information cited can be found.

 
Attributes Introduced by HTML5
Attributes Values
accesskey spaced list of accelerator key(s)
contenteditable true | false | inherit
contextmenu id of menu
data-X user-defined data
draggable true | false | auto
hidden hidden
itemid microdata id in URL format
itemprop microdata value
itemref space-separated list of IDs that may contain microdata
itemscope itemscope
itemtype microdata type in URL format
spellcheck true | false
tabindex number

 
Attributes Introduced by Internet Explorer
Attributes Values
accesskey key (5.5)
contenteditable false | true | inherit
disabled false | true
hidefocus true | false
language javascript | jscript | vbs | vbscript
tabindex number
unselectable off | on

 
HTML5 Event Attributes
onabort onblur oncanplay oncanplaythrough
onchange onclick oncontextmenu ondblclick
ondrag ondragend ondragenter ondragleave
ondragover ondragstart ondrop ondurationchange
onemptied onended onerror onfocus
onformchange onforminput oninput oninvalid
onkeydown onkeypress onkeyup onload
onloadeddata onloadedmetadata onloadstart onmousedown
onmousemove onmouseout onmouseover onmouseup
onmousewheel onpause onplay onplaying
onprogress onratechange onreadystatechange onscroll
onseeked onseeking onselect onshow
onstalled onsubmit onsuspend ontimeupdate
onvolumechange onwaiting    

 
Events Defined by Internet Explorer
onactivate onbeforeactivate onbeforecopy onbeforecut
onbeforedeactivate onbeforeeditfocus onbeforepaste onblur
onclick oncontextmenu oncontrolselect oncopy
oncut ondblclick ondeactivate ondrag
ondragend ondragenter ondragleave ondragover
ondragstart ondrop onfocus onfocusin
onfocusout onhelp onkeydown onkeypress
onkeyup onlosecapture onmousedown onmouseenter
onmouseleave onmousemove onmouseup onmousewheel
onmouseout onmouseover onmove onmoveend
onmovestart onpaste onpropertychange onreadystatechange
onresize onresizeend onresizestart onselectstart
ontimeerror      

Code :

<!DOCTYPE html>
<
html>
<
head>
<
title>Blockquote tag in HTML5</title>
</
head>
<
body>
<
p>Working with blockquote tag</p>
<
blockquote cite="http://www.c-sharpcorner.com/Articles/ArticleListing.aspx?SectionID=1&SubSectionID=244">
In this article you will learn about blockquote tag of HTML5 in detail with the Example. <br /> You will see there are many different types of Attributes and Events introduced by HTML5 and Internet Explorer.

</
blockquote>
<
p> It will help you many ways. It is different from &lt;q&gt; tag</p>
<
q>
 In this line you will see the difference between blockquote tag and q tag.

</
q>
<
p style="margin : 0 40px 0 40px;">
This paragraph has been indented 40 px on the right side and 40 px on the left side.

</
p>
</
body>
</
html>

Output

Internet Explorer

1.gif

Chrome

2.gif

Fire Fox

3.gif

Safari

4.gif

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.