What is a Div Element?
The Div means division of elements. You can think of the <div> element like a container that helps organize webpage content into different sections, such as header, footer, and other content sections. It is a block-level element that takes the full available width by default and starts on a new line. You can use it to group webpage elements and apply CSS styles to their content.
In the list below, you will learn about common uses of <div> containers, related HTML5 elements, and CSS layout methods.
Syntax:
<div>
You can write paragraph text here.
</div>
Example:
<!DOCTYPE html>
<html>
<head>
<title>Div Example</title>
<style>
/* CSS styles for the div container */
.my-div {
background-color: #fff7c2;
border: 2px solid #85430f;
padding: 15px;
margin: 10px;
}
</style>
</head>
<body>
<!-- Div container for webpage content -->
<div class="my-div">
<h2>TutorialNest</h2>
<p>Here, you will learn the HTML div tag very easily.</p>
</div>
</body>
</html>
Note: You can change the appearance of a <div> element using CSS styles to give it a better look.
Types of Div Containers and Their Uses
<ul>
<li><b>HTML5 Layout Elements</b>
<ul>
<li>Header Element</li>
<li>Nav Element</li>
<li>Aside Element (Sidebar)</li>
<li>Main Element</li>
<li>Section Element</li>
<li>Footer Element</li>
</ul>
</li>
<li><b>HTML5 Content Elements</b>
<ul>
<li>Article Element</li>
<li>Figure Element (Images)</li>
<li>Form Element</li>
</ul>
</li>
<li><b>Common Uses of Div Containers</b>
<ul>
<li>Container Div</li>
<li>Wrapper Div</li>
<li>Box Div</li>
<li>Nested Div</li>
<li>Card Div</li>
<li>Gallery Div</li>
<li>Menu Div</li>
<li>Popup Div</li>
</ul>
</li>
<li><b>CSS Layout Methods</b>
<ul>
<li>Flexbox Layout</li>
<li>Grid Layout</li>
</ul>
</li>
</ul>
