Post
Ask Question

Role of Div Tag in HTML5

Introduction

 
The <div> tag is used for defining a section or a division in an HTML page. You can use it to group large sections as a block and can be formatted (Presentation of block) using Style Sheet (CSS) in your document. For example, you can wrap a header block in one div and content block in another div. See the following code, in which I used a different div for each block. In simple terms, it is a container in which you create a division of your documents and you can manipulate your document layout using class and id names in the div tag. HTML5 has introduced a number of new tags that you will use in place of div tags such as article, aside, footer, header, section, and nav.
 
Syntax
 
<div
align=" Specifies the alignment of the content inside a div element. Possible values are : center | justify | left | right" 
class="Specifies class names"
dir=" rtl  (Right to Left  | ltr  (Left to Right)"
id=" specifies unique id identifier"
lang=" Specifies a language code for the content in an element. "
style="style information"
title="advisory text">
</div>
  
Attributes Introduced by HTML5
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
 
HTML5  Event  Attribute
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 onplay
onplaying onprogress onratechange onreadystatechange
onscroll onseeked onseeking onselect
onshow onstalled onsubmit onsuspend
ontimeupdate onvolumechange onwaiting  
 
Code:
 
Htmlpage.htm
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <link href="StyleSheet.css" rel="stylesheet" type="text/css" />  
  5.         <title></title>  
  6.     </head>  
  7.     <body>  
  8.         <div class="MainBody">  
  9.             <div class="header" >  
  10.                 <h3>This is header </h3>  
  11.             </div>  
  12.             <div class="left">  
  13.                 <h4>Left</h4>  
  14.                 <h5>Content</h5>  
  15.             </div>  
  16.             <div class="center">  
  17.                 <h1>Center Content</h1>  
  18.             </div>  
  19.             <div class="right">  
  20.                 <h2>Right Content</h2>  
  21.             </div>  
  22.             <div class="footer">  
  23.                 <h3>Footer</h3>  
  24.             </div>  
  25.         </div>  
  26.     </body>  
  27. </html>  
StyleSheet.css
  1. body {  
  2.   margin: 0px;  
  3.   padding: 0px;  
  4.   width: 100%;  
  5.   color: #959595;  
  6.   font: normal 12px/1.8em Arial, Helvetica, sans-serif;  
  7.   background: silver;  
  8. }  
  9. .MainBody {  
  10.   width: 770px;  
  11.   margin: 0 auto;  
  12.   padding: 0px;  
  13. }  
  14. .header {  
  15.   background-color: Green;  
  16.   height: 50px;  
  17.   text-align: center;  
  18.   font-size: 20px;  
  19.   color: White;  
  20.   margin: 0px;  
  21.   padding: 0px;  
  22.   width: auto;  
  23. }  
  24. .header h3 {  
  25.   font-size: 30px;  
  26.   line-height: 40px;  
  27. }  
  28. .left {  
  29.   width: 150px;  
  30.   height: 500px;  
  31.   margin: 0px;  
  32.   padding: 0px;  
  33.   background-color: Fuchsia;  
  34.   float: left;  
  35.   text-align: center;  
  36. }  
  37. .left h4 {  
  38.   font-size: 20px;  
  39.   color: Navy;  
  40.   margin-top: 200px;  
  41. }  
  42. .left h5 {  
  43.   font-size: 20px;  
  44.   color: Navy;  
  45. }  
  46. .center {  
  47.   width: 420px;  
  48.   background-color: Red;  
  49.   margin-top: -16.1px;  
  50.   margin-left: 150px;  
  51.   padding: 0px;  
  52.   height: 500px;  
  53. }  
  54. .center h1 {  
  55.   color: Navy;  
  56.   text-align: center;  
  57.   padding: 250 0 0 0;  
  58.   vertical-align: bottom;  
  59.   line-height: 500px;  
  60. }  
  61. .right {  
  62.   width: 200px;  
  63.   height: 500px;  
  64.   background-color: Lime;  
  65.   float: right;  
  66.   margin-top: -500px;  
  67.   margin-left: 0px;  
  68.   padding: 0px;  
  69.   color: Navy;  
  70.   text-align: center;  
  71.   line-height: 475px;  
  72. }  
  73. .footer {  
  74.   background: yellow;  
  75.   background-color: Green;  
  76.   height: 50px;  
  77.   text-align: center;  
  78.   padding-left: 0px;  
  79.   font-size: 20px;  
  80.   color: White;  
  81.   margin: -30px 0px 0px 0px;  
  82.   width: auto;  
  83. }  
  84. .footer h3 {  
  85.   font-size: 30px;  
  86.   line-height: 40px;  
  87. }  
Internet Explorer
 
Div tag HTML 5.gif
 
Chrome
 
div tag.gif
 
FireFox
 
div tag html.gif
 
Safari
 
div element in HTML.gif


Similar Articles