<div>
<div> Tag
The <div> element acts as a generic container for grouping flow content. By default, it does not affect the layout or content until styled with CSS, either directly or via a parent layout model such as Flexbox.
Syntax
<div>
<!-- Content goes here -->
</div>
<div> Demo
Lorem Ipsum
The yellow background is added to demonstrate the footprint of the DIV element.
<!DOCTYPE html>
<html>
<style>
div {
background-color: #FFF4A3;
}
</style>
<body>
<h1>HTML DIV Example</h1>
Lorem Ipsum <div>I am a div</div> dolor sit amet.
<p>The yellow background is added to demonstrate the footprint of the DIV element.</p>
</body>
</html>
<div> element does not have any mandatory attributes, but commonly used ones include style, class, and id.<div> as a Container
The <div> tag is frequently used to organize and group different sections of a webpage.
London is the capital city of England.
London has over 9 million inhabitants.
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 9 million inhabitants.</p>
</div>
Center align a <div> element
To center a <div> element that does not take up the full width, you can use the margin: auto; property in CSS. This ensures the element is aligned in the center horizontally.
London is the capital city of England.
London has over 9 million inhabitants.
<!DOCTYPE html>
<html>
<style>
div {
width: 300px;
margin: auto;
background-color: #FFF4A3;
}
</style>
<body>
<h1>Center align a DIV element</h1>
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 9 million inhabitants.</p>
</div>
</body>
</html>
Multiple <div> elements
You can include multiple <div> elements on a single page, each serving as a separate container.
London is the capital city of England.
London has over 9 million inhabitants.
Oslo is the capital city of Norway.
Oslo has over 700,000 inhabitants.
Rome is the capital city of Italy.
Rome has over 4 million inhabitants.
CSS styles are added to make it easier to separate the divs, and to make them more pretty:)
<h1>Multiple DIV Elements</h1>
<div style="background-color:#0000FF;">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 9 million inhabitants.</p>
</div>
<div style="background-color:#FF0000;">
<h2>Oslo</h2>
<p>Oslo is the capital city of Norway.</p>
<p>Oslo has over 700,000 inhabitants.</p>
</div>
<div style="background-color:#008000;">
<h2>Rome</h2>
<p>Rome is the capital city of Italy.</p>
<p>Rome has over 4 million inhabitants.</p>
</div>
<p>CSS styles are added to make it easier to separate the divs, and to make them more pretty:)</p>
Purpose and Usage
The <div> element is used to define sections or divisions in an HTML document.
It acts as a container for other HTML elements and is typically styled with CSS or manipulated with JavaScript.
Key Features:
- Can be styled using
classoridattributes for customization. - Can contain any type of content, including text, images, and other elements.
<div>.Default CSS Settings
By default, most web browsers render the <div> element with the following properties:
div {
display: block;
}
Conclusion
The <div> tag in HTML is a versatile container used to group and organize content. It doesn't have any intrinsic styling or meaning but allows developers to apply CSS for layout and design purposes. Commonly used in web development, it helps structure content and makes the page more manageable. Though non-semantic, <div> plays a crucial role in creating flexible, styled web pages and is often used in combination with CSS or JavaScript for interactive designs.
<main>
The HTML <main> element signifies the primary content of a document, omitting headers, footers, and sidebars, and improves the semantic organization and accessibility of the document.
<header>
The HTML <header> element serves as a container for introductory content or navigation links, usually located at the top of a section or page to establish context and structure.