BBM Tutor
BBM Tutor

HTML5 Tag - <div> Element

Definition & Uses of HTML5 <div> Element

  • The <div> tag already existed in HTML4.01, but in HTML5 its usage is differs from HTML4.01.
  • In HTML 4.01 documents, the <div> tag was mainly used for specifying the various navigational sections like header, footer, content area, side bars, etc.
  • The HTML5 specification has introduced a number of new elements like <header>, <footer>,<article>,<aside> and etc., that can be used instead of <div>, Therefore, the <div> tag should be generally used to define a section or a division in an HTML documents.

Syntax of HTML5 <div> Tag

<div>Block of HTML code</div>

What is HTML5 <div> Element ?

  • The <div> tag is a generic container for flow content that by itself does not represent anything and it has no special semantic meaning at all.
  • It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements.
  • The <div> element is a block-level element.
  • The <div> element can be found inside any element that can contain flow elements, such as other div elements, <address>, <blockquote>, sectioning elements, and tables.
  • By default, browsers will place a line break before and after the <div> element. But, this can be changed with CSS.
  • A <div> element must have both a start tag and an end tag.

Where to use HTML5 <div> Tag?

  • The <div> tag is used to group block-elements and apply format to them with CSS.
  • The<div> tag is used for defining a section or division of HTML document.
  • The <div> tag more often used to layout a webpage using CSS.
  • You should always use the <div> element as a last resort after using other sectioning elements.

Tips & Notes

  • The difference between the <div> tag and <span> tag is that the <div> tag is used with block-level elements whilst the <span> tag is used with inline elements.
  • The HTML5 <section> element is similar to <div> element as a generic container element, but it does have some additional semantic meaning, i.e., the things it contains are a logical group of related content.
  • When nesting the <div> element, be sure that each and every element closed properly and know the content of each element to style them correctly.

Simple HTML5 Example

<!DOCTYPE HTML>
<html>
<head>
<title> HTML5 <div> - HTML5 Tags Tutor </title>
</head>
<body>
<div style="background:#FFCCFF;font-weight:600;">
<p> Paragragh 1 </p>
<p> Paragragh 2 </p>
</div>
<div style="background:#FFFFCC;font-variant:samll-caps;">
<p> Paragragh 1 </p>
<p> Paragragh 2 </p>
</div>
</body>
</html>

Output Screen

Div1 Paragragh 1

Div1 Paragragh 2

Div2 Paragragh 1

Div2 Paragragh 2

Attributes

  • Attributes are the features added to a tag to provide the browser with more information about how the tag should appear or behave.
  • There are 3 type attributes a tag can have. They are Global Attributes, Event Attributes and Element-Specific Attributes.
  • The <div> tag is also capable of supporting the Global Attributes and Event Attributes in HTML5.

Element-Specific Attributes

Attributes

Description

Simple HTML5 Example#2

<!DOCTYPE HTML>
<html>
<head>
<title> HTML5 <div> - HTML5 Tags Tutor </title>
<style type="text/css" >
.div1{
background:#FFCCFF;
font-weigth:600;
}
.div2{
background:#FFFFCC;
font-variant:samll-caps;
}
</head>
<body>
<div style="div1">
<p> Paragragh 1 </p>
<p> Paragragh 2 </p>
</div>
<div class="div2">
<p> Paragragh 1 </p>
<p> Paragragh 2 </p>
</div>
</body>
</html>

Output Screen

Div1 Paragragh 1

Div1 Paragragh 2

Div2 Paragragh 1

Div2 Paragragh 2

Element-Specific Attributes Not Supported in HTML5

Attributes

Description

Specifies the alignment of the content of a <div> element.

HTML5 Example #3: Image Slide Show

<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 <div> - HTML5 Tags Tutor </title>
<style type="text/css" >
button.btn1:hover{
-webkit-transform: scale(1.1);
}

#pics{
display:block;
margin-left:35%;
margin-right:35%;
}
.btnpanel{
max-width:40%;
margin-left:40%;
margin-right:20%;
}
</style>
<script>
var x = 1;
function next()
{

if( x != 3 )
{
x += 1;
document.getElementById("pics").innerHTML = "<img src='" + i + ".jpg' width='200' height'200'>";
}
}

function prev()
{

if( x != 1 )
{
x -= 1;
document.getElementById("pics").innerHTML = "<img src='" + i + ".jpg' width='200' height'200'>";
}
}

</script>
</head>
<body>
<header>
<h1>Image Slide Show </h1>
</header>
<article>
<div id="pics"><img src="1.jpg" width="200" height="200"></div>
<div class="btnpanel">
<button type="button" class="btn1" onClick="prev()"><img src="prev.png" alt="Previous"> </button>
<button type="button" class="btn1" onClick="next()"><img src="next.png" alt="Next"></button>
<div>
</article>
</body>
</html>

Output Screen

Image Slide Show

BBM Invoice
 
Disclaimer: Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy.