HTML div tag

HTML <div> tag

Use of <div> tag

The <div> tag is used to create a division or section or content that could exist as independent element. It has no particular semantic meaning and no visual effect on the page. It is block-level element so, the corresponding web browsers give a line break before and after the <div> element.
    It simply defines a block of section which has a special purpose to group other HTML elements together and apply CSS styles to many elements at once. For example if you wrap a bundle of paragraphs inside a <div> tag, you can make the same style for all paragraphs (like font-size, text-color etc.) at once without coding for each paragraph. Note that: You also can make different styles for each paragraph by giving "id" attribute or "class" attribute for each paragraph.
    Prior to the coming of HTML5, <div> has been the most and only appropriate structural elements to define all sections of contents like for header section, footer section etc. But with the coming of HTML5, many structural elements are added which can be styled in the same way like <div> element. Such elements have their specific purposes for using in a web-pages and they are listed in the following tables.

Attribute Notes
header It is used to define the main introductory of a content.
footer It is used to define the footer of a page or document or article or section.
nav It is used to define a set or group of navigation links either within the current domain or another server.
main It is used to define a content in a document related to the main topic or content of that document.
article It specifies a section or content that could stand independently or self-meaningfully.
aside It is used to define a content as a secondary but related with the main content.
section It is used to define section in an HTML document such as header,footer etc.

Default CSS properties of <div> tag

div {
display:block;
}

Example of <div> tag

    <div style="color:red">
       <h2> HTML </h2>
       <p> HTML is the most common language for making web pages. </p>
    </div>

All the contents within the above <div> section will be red in color. <div> element is mostly associated with CSS properties.

Supported Browsers

Tag Chrome browser Internet explorer browser Firefox browser Safari browser Opera browser
<div> Yes Yes Yes Yes Yes

Full Code Example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color:purple">
<h2> HTML </h2>
<p style="color:white"> HTML is the most common language for making web pages. </p>
</div>
</body>
</html>

Output

HTML

HTML is the most common language for making web pages.

Attributes of <div> tag

Attribute Value Notes
align left
right
center
justify
It defines the alignment of the contents within the <div> element.

Note that: Don't use this align attribute because it is no longer supported in HTML5.Use CSS instead.

More Reference

The following tips might be helpful to you

1. You can apply CSS properties to the <div> element.

<div style="border:1px solid red;font-size:21px;padding:10px">
<p>This is firts paragraph.</p>
<p>This is second paragraph.</p>
<div>

2. You can insert another <div> element as many as you want inside a <div> element. Also, you can apply CSS properties to make them float in a horizontal row.

<!DOCTYPE html>
<html>
<head>
<style>
.demo{
display: flex;
align-items: center;
margin: 0px auto;
width: 570px;
height: 200px;
background-color: #1fabdb;
}
.demo > div{
width: 25%;
height: 60px;
margin: 0px auto;
background-color: #8ebf72;
}
</style>
</head>
<body>
<div class="demo">
    <div></div>
    <div></div>
    <div></div>
</div>
</body>
</html>

Output

HTML div tag

3. You can produce amazing box-design with shadow.

<!DOCTYPE html>
<html>
<head>
<style>
.demo{
width:500px;
height:230px;
border: 1px solid #333;
box-shadow: 8px 8px 5px #444;
margin:0 auto;
background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
}
</style>
</head>
<body>
<div class="demo">
</div>
</body>
</html>

Output

HTML div tag