Set Space From Both Left And Right Side Using Blockquote Tag in HTML5

The Blockquote tag set white space on both left and right side of document. It is mostly use for long quotation and it renders paragraph breaks.

Introduction 

 
The <blockquote> tag is used for indicating a block of longer quotation (i.e. quotation including multiple lines or paragraphs). In simple terms, it defines a block of quotation that is taken from another source. Mostly the browser indents the text from both left and right with a 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> tags in your web page. This tag must have a start <blockquote> tag and an end </blockquote> tag. If you don't want to use a blockquote tag, you can use css in place of blockquote tag. See in the following 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
  1. <blockquote cite="http://www.c-sharpcorner.com/Articles/ArticleListing.aspx?SectionID=1&SubSectionID=244">  
In this article, you will learn about the 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 :
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title>Blockquote tag in HTML5</title>  
  5.     </head>  
  6.     <body>  
  7.         <p>Working with blockquote tag</p>  
  8.         <blockquote cite="http://www.c-sharpcorner.com/Articles/ArticleListing.aspx?SectionID=1&SubSectionID=244">  
  9.    
  10. In this article, you will learn about the blockquote tag of HTML5 in detail with the Example.   
  11.             <br /> You will see there are many different types of Attributes and Events introduced by HTML5 and Internet Explorer.  
  12.         </blockquote>  
  13.         <p> It will help you many ways. It is different from <q> tag</p>  
  14.         <q>  
  15.  In this line, you will see the difference between the blockquote tag and the q tag.  
  16. </q>  
  17.         <p style="margin : 0 40px 0 40px;">  
  18. This paragraph has been indented 40 px on the right side and 40 px on the left side.  
  19. </p>  
  20.     </body>  
  21. </html>  
Output
 
Internet Explorer
 
blockquote tag
 
Chrome
 
blockquote tag
 
FireFox
 
blockquote tag
 
Safari
 
blockquote tag