ARTICLE

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

Posted by Valon Ademi Articles | HTML 5 July 13, 2011
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.
Reader Level:
Download Files:
 

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

<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 :

<!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

blockquote tag

Chrome

blockquote tag


Fire Fox

blockquote tag

Safari

blockquote tag



  

COMMENT USING
Employers - Post Free Jobs