Home Videos Exercises MCQ Q&A Quiz E-Store Services Blog Sign in Appointment Payment

HTML Div

The <div> element is used as a container for other HTML elements.


The <div> Element

The <div> element is by default a block element, meaning that it takes all available width, and comes with line breaks before and after.


<div> as a container


The <div> element is often used to group sections of a web page together.

<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>


Multiple <div> elements

You can have many <div> containers on the same page.

<div>
<h2>Patna</h2>
<p>London is the capital city of Bihar.</p>
<p>Patna has many ritualistic places.</p>
</div>

<div>
<h2>Delhi</h2>
<p>Delhi is the capital city of India.</p>
<p>Delhi is the metro city.</p>
</div>

<div>
<h2>Aurangabad</h2>
<p>Aurangabad city available in Bihar State.</p>
<p>Deo Temple is avaiable in aurangabad city. It is very famous temple of God SUN</p>
</div>


Here are the key points about the HTML <div> element:


1. Block-Level Element:

  • <div> is a block-level element, meaning it takes up the full width of its parent container by default, and starts on a new line.

2. Generic Container:

  • It is used as a generic container for grouping and organizing other HTML elements, but has no specific semantic meaning.

3. Styling and Layout:

  • <div> is often used with CSS for styling and layout purposes, allowing you to apply styles, position elements, and create complex layouts.

4. Class and ID Attributes:

  • Frequently combined with class or id attributes to target the
    for styling or JavaScript functionality.

5. No Default Styling:

  • Unlike elements such as <p> or <h1>, the <div> tag doesn't come with any inherent styling, which makes it flexible for customization.

6. Used for Structure:

  • It is commonly used for structuring sections of a webpage, dividing content into logical groups for better organization.

7. Accessibility:

  • Since <div> has no semantic meaning, it is often better to use more meaningful HTML tags (like <section>, <article>, etc.) for improved accessibility and SEO unless purely for layout purposes.

8. JavaScript Integration:

  • It can easily be manipulated via JavaScript, allowing developers to dynamically show, hide, or change content within a <div>.