HTML Tutorial: Complete HTML Tutorial
About Lesson

HTML <div> Tag


The <div> tag in HTML is a versatile container used to group block-level and inline elements. It’s often utilized to apply CSS styles or JavaScript functionalities to a section of content within a webpage. The <div> tag doesn’t inherently represent anything but is used to structure content and layout.


Example 1: Creating a Styled Section

Here’s an example of how you can use the <div> tag to create a styled section with CSS:

<div style="background-color: lightblue; padding: 10px;">
  <h2>This is a header inside a div</h2>
  <p>This is a paragraph inside a div.</p>

Example 2: Grouping Elements for Layout

Sponsored by Google

You can also use the <div> tag to group elements for layout purposes:

<div id="header">Header Section</div>
<div id="content">Main Content</div>
<div id="footer">Footer Section</div>

Try it out below:

powered by Advanced iFrame. Get the Pro version on CodeCanyon.


Attribute Description
Global Attributes The <div> tag supports all the global attributes in HTML.
Event Attributes The <div> tag also supports all the event attributes in HTML.

Browser Support

Browser Support
Chrome Yes
Firefox Yes
Safari Yes
Opera Yes
IE Yes

Default CSS Settings

Most browsers will display the <div> element with the following default CSS settings:

div {
  display: block;


The <div> tag is a fundamental building block in HTML, allowing for flexible design and organization of content.

It’s a go-to element for web developers looking to create responsive and aesthetically pleasing layouts.