HTML Tags

HTML <div> Tag

The <div> tag defines a division or section in an HTML document.
It is a block-level container used to group content for styling (CSS) or scripting (JavaScript).

Syntax

html

<div>
    Content goes here...
</div>

Attributes

Attribute	Description
id	Specifies a unique identifier for the `<div>`
class	Assigns a class name for CSS styling
style	Adds inline CSS styles
title	Adds tooltip text
hidden	Specifies that the element should be hidden
contenteditable	Specifies whether content inside `<div>` can be edited
draggable	Specifies whether the `<div>` is draggable
lang	Specifies language

Example

html

<!DOCTYPE html>
<html>
<head>
    <title>DIV Example</title>
    <style>
        .box {
            width: 200px;
            padding: 20px;
            background-color: lightblue;
            border: 2px solid #333;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>

    <h2>DIV Example</h2>

    <div class="box">
        This is a content box inside a DIV.
    </div>

    <div class="box">
        Another DIV with the same CSS class.
    </div>

</body>
</html>

Output

Browser Output

html

A page showing two light-blue colored rectangular boxes with text.
Use our Tryit Editor to see the output.

Browser Support

Chrome	Edge	Firefox	Safari	Opera	IE9+
Yes	Yes	Yes	Yes	Yes	Yes

Notes

<div> is a block-level element; it starts on a new line.
It is the most common container for CSS layout design.
In modern HTML5, semantic elements like <header>, <section>, <article>, <footer>, etc. are preferred over <div> for structure.
<div> should be used mainly as a generic container when no semantic element fits.

Conclusion

The <div> tag is a fundamental block container used to group and style HTML content. While newer semantic tags provide meaning, <div> remains essential for layout and design due to its flexibility.

PreviousHTML <dfn> Tag NextHTML <span> Tag