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

Valon Ademi
Jul 13, 2011
8.7k
0
0
Article

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. 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>
Working with blockquote tag
<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. You will see there are many different types of Attributes and Events introduced by HTML5 and Internet Explorer.
</blockquote>
 It will help you many ways. It is different from <q> tag
<q>
In this line you will see the difference between blockquote tag and q tag.
</q>

This paragraph has been indented 40 px on the right side and 40 px on the left side.

</body>
</html>

Output

Internet Explorer

Chrome

Fire Fox

Safari