A Guide on HTML div Element
A beginner's guide on basic information about using div elements in HTML.
What is div element
The div element is to group similar group of data elements together as children of the div tag in separate blocks of elements in which the div element is the parent element and the other elements under the div element are contained as children elements. The name div stands for division as well as it divides several different parts of a web page for instance, it helps to create footer, header, navbar etc by division of separate content and creating container for similar group of elements.
Why use the div element
We use div as a container to contain different blocks of elements that can be styled later. For example, we could use div element to group together navigation bars, footers, etc. that could be styled uding css later.
Example of using div element
In the below code we have three div elements. The first div is parent to the h1 element for creating a header for the page. The second div element is parent to the p element carrying the content for the page and the last div is parent to the p element for creating the footer for the page. For each div element we have allocated a class of “header”, “content “, and “footer” respectively. The explanation for class attribute is beyond the scope of this post and will be explained in a subsequent post. However for your information, the class attribute is used here in order to use CSS styling for the respective elements later on.
<div class="header">
<h1 style="color:red";>I am a header<h1>
</div>
<div class="content">
<p style="background-color: yellow";>I am a content ipsum n um n ipsum n um n</p>
</div>
<div class="footer">
<p style= "color:green";>I am a footer always at the bottom</p>
</div>The source code for this example in codepen is here.
This is how the page looks like :
Conclusion
We learnt the basics of a div element in HTML, that helps in containing several other elements and creating division or partition between different parts of a web page thereby responsible for rendering the structural framework of the web page accordingly.
