HTML <div> Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <div> element is a block-level container used in HTML to group together other HTML elements and content. It does not inherently convey any semantic meaning about its contents, making it a generic container primarily used for layout, styling, and scripting purposes.

Because <div> is a block-level element, it starts on a new line and stretches to occupy the full width of its parent container by default. This makes it ideal for structuring sections of a webpage, such as headers, footers, sidebars, content sections, or grouping multiple elements together to apply CSS styles or JavaScript behavior collectively.

The <div> tag is often paired with CSS classes or IDs to control its appearance, layout, or interactivity. Although it has no default visual representation, it can be styled in various ways - like adding background colors, borders, padding, margins, or positioning.

A typical use case of <div> is to divide a page into logical sections or containers for easier design management and responsive layouts. For example, a <div> might contain a set of paragraphs, images, or interactive elements, all treated as a single unit for styling or scripting purposes.

Key points about <div>:

Serves as a generic container without semantic meaning.
Block-level element by default.
Commonly used for layout and grouping elements.
Works well with CSS and JavaScript to control appearance and behavior.
Ideal for creating structured, maintainable, and responsive web pages.

Properties

Permitted Parents: Any element that accepts flow content
Content: Block, inline and text
Start/End Tags: Start tag: required, End tag: required

Example

HTML

<div style="background-color:orange;text-align:center">

  <p>Navigation section</p>

</div>

<div style="border:1px solid black">

  <p>Content section</p>

</div>

Result

Editor

Attributes

align

Specifies the alignment of the content inside a div element.
Possible Values:

left
right
center
justify

-Deprecated-

Global Attributes

The <div> tag also supports the Global Attributes in HTML5

Event Attributes

The <div> tag also supports the Event Attributes in HTML5

Browser Support

The following information will show you the current browser support for the HTML <div> tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.