February 14th, 2019 
Nilesh Chaurasia HTML Div Tag
HTML Div Tag is a container HTML tag, It is used to group some HTML element together. Div is used to logically divide HTML document into small boxes.
Div tag is actually used to control the layout of page structure. HTML Div tag is also used to specify the CSS style in the grouped HTML element, and modify look and feel together. Div Tag is does not have any visual presence in the browser, if a div element not have any content.
All the other HTML element inside a Div tag are known as child of that div element. And Div is known as parent of the HTML element inside the Div tag.
Div in HTML Tag Example
In this example we have used one Div element with one heading and one paragraph element, and other one heading and one paragraph element.
Example 1 – HTML Div element with h1 and p element.
<h1>Heading Div 1</h1> <p>Paragraph Div 1</p> <div> <h1>Heading Div 2</h1> <p>Paragraph Div 2</p> </div>
In the above example we have one div tag having heading and paragraph. and almost same content structure without div. The primary advantage is that we can apply style independently.
HTML Div Example with CSS style
In this Div Tag code we can learn how to provide design specification with the help of child and parent relationship. We have used one Div element with one heading and one paragraph element for that we can specify different style property.
Example 2 – HTML Div with CSS style property specification.
<html>
<head>
<style>
h1
{
color:red;
}
p
{
color:red;
}
div h1
{
color:green;
}
div p
{
color:green;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
<div>
<h1>Heading Div</h1>
<p>Paragraph Div</p>
</div>
</body>
</html>
In the above example we have one div tag having heading and paragraph. and almost same content structure without div. The primary advantage is that we can apply style independently.
In the above example we have used HTML style tag to specify the page CSS style. Now we have to specify two different settings to the h1 and p tag. We have written one pair of tag (h1 and p tag) without enclosing div and one pair of tag with div tag. In CSS style we have targeted h1 and p directly with tag or element selector. And other pair of tag with the descendant selector. The descendant selector means child and parent relationship used to specify the selector.
The screenshot above shows the browser output for code listing in example 2. In the screenshot shows the text inside the div tag in green and other in the red color.
Note:This a simple example of div tag, but you can do many more things with making your page in proper div structure. With the help of div tag, you can have better control over web page layout, look and feel.
Posted in 
Tags: 
Thanks for the marvelous posting! I truly enjoyed reading it, you will be a great author.I will make certain to bookmark your blog and definitely will come back someday. I want to encourage you to continue your great posts, have a nice morning!