Definition and Usage

The <div> tag is used as a container to create layouts or divide content (division).
It carries no semantic meaning by itself.

It is mainly used to group content as a container so that it can serve as an area for applying styles, attributes, or scripts.

Features

  • The <div> tag is an abbreviation of the word "division".
  • Most HTML tags carry specific semantic meaning, but the <div> tag is purely a container and has no intrinsic meaning.
  • Use the <div> tag only when a semantic tag (for example, <article> or <nav>) is not appropriate.
  • The <div> tag can represent a structure or meaning when using the role attribute.

Although it has no special meaning by itself, you should use the <span> tag when applying styles or attributes to inline elements such as plain text or text-related markup. The <div> tag is not suitable for this purpose.

Practical Examples

The <div> tag is one of the most commonly used tags when creating websites. Here are some practical examples of how the <div> tag can be used.

Using the <div> Tag as a Container for Attributes

The <div> tag can be used together with attributes such as class, lang, or title to divide content into related sections.

The following example demonstrates how the <div> tag can be used with the lang attribute to mark a portion of content in French.

The lang attribute provides language information for HTML elements. Using this attribute helps users who rely on screen readers or other assistive technologies better understand the content.

HTML 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Web Design Trends</title>
    </head>
    <body>
        <h1>Web Design Trends</h1>
        <article>
            <h2>Web Design Trends 2023</h2>
            <p>Forecast and interpretation of web design trends for 2023...</p>

            <!-- Using a div tag to group content displayed in French and specify the language -->
            <div lang="fr">
                <h2>Tendances du design web 2023</h2>
                <p>Prévisions et interprétations des tendances du design web pour 2023.</p>
            </div>
        </article>
    </body>
</html>

In this example, the <div> tag carries no special semantic meaning. For instance, it does not represent a content group by topic (in that case, you should use the <section> tag) nor an area with navigation links (in that case, you should use the <nav> tag).

Using the <div> Tag as a Container for Styles

The <div> tag can be used as a container to apply styles.

There are countless examples of using <div> for styling in web development. Here are a few examples.

Container for Box Styling of Content

The following example shows how the <div> tag can be used as a container to apply box styles to content.

HTML 
<div class="shadow-box">
    <p>What a beautiful box style!</p>
</div>
CSS 
.shadow-box {
    border-radius: 25px;
    padding: 2.5em;
    box-shadow: 0 20px 50px -25px rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: gold;
}
Rendered Output
Decorative Container for Visual Styling Only

The following example shows how the <div> tag can be used purely as a decorative container for visual styling.

HTML 
<div class="container" aria-hidden="true">
    <div class="circle circle-1"></div>
    <div class="circle circle-2"></div>
    <div class="circle circle-3"></div>
</div>

Code Explanation
The aria-hidden="true" attribute indicates that the element and its content are hidden from assistive technologies, such as screen readers. In this example, the <div> tag is used purely for visual decoration, making the use of aria-hidden important for web accessibility.

CSS 
.container {
    position: relative;
    height: 200px;
}
.circle {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.circle-1 {
    top: 0;
    background-color: red;
}
.circle-2 {
    top: 80px;
    left: 100px;
    background-color: green;
}
.circle-3 {
    bottom: 0;
    left: 50px;
    background-color: blue;
}
Rendered Output

Adding Semantic Meaning with the role Attribute

The role attribute extends the concept of HTML elements by allowing you to provide clearer structure and meaning to elements.

You can use the role attribute on a <div> tag to assign structure or semantic meaning.

Identifying the Structure and Layout of a Web Page

Global headers, global footers, sidebars, and navigation menus help users understand and navigate a web page. They are especially important for users who rely on screen readers or other assistive technologies, as they convey the page’s layout and structure. In HTML, these are referred to as "landmarks".

Below are some elements that serve as landmark roles:

랜드마크 요소들
<header> Represents the overall global header at the top of a web page.
<footer> Represents the global footer at the bottom of a web page, including content such as copyright information or links to privacy policies.
<main> Represents the main content (dominant contents) of the HTML document.
<aside> Typically represents a sidebar or a small area providing additional information related to the main content.
<nav> Represents a section containing links for navigation, either to other pages or to sections within the current page. Common examples include menus, tables of contents, and indexes.

These elements can be similarly implemented using a <div> tag with the role attribute.

Note:
Except in cases where browser compatibility prevents the use of landmark elements, it is generally not recommended to assign structural or semantic meaning to a <div> using the role attribute.

Below are examples of using the role attribute on <div> tags to assign landmark roles.

Global Header Role
HTML 
<header>
    <h1>Website Title<h1>
    .... logo, navigation, search ....
</header>

<!-- Can also be implemented using a <div> with role="banner" -->
<div role="banner">
    <h1>Website Title</h1>
    .... logo, navigation, search ....
</div>
Global Footer Role
HTML 
<footer role="contentinfo">
    <address>
        © 2023 Example Webpage Creator
        <a href="mailto:contact@example.com">contact@example.com</a>
    </address>
</footer>

<!-- Can also be implemented using a <div> with role="contentinfo" -->
<div role="contentinfo">
    <address>
        © 2023 Example Webpage Creator
        <a href="mailto:contact@example.com">contact@example.com</a>
    </address>
</div>
Main (Dominant Content) Role
HTML 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Webpage Title</title>
    </head>
    <body>
        <header></header>
        <nav></nav>
        <main>
            <!-- Main content area of the webpage -->
            <h1>Main Heading</h1>
            <p>Main content goes here...</p>
            <!-- Additional content -->
        </main>
        
        <!-- Can also be implemented using a <div> with role="main" -->
        <div role="main">
            <!-- Main content area of the webpage -->
            <h1>Main Heading</h1>
            <p>Main content goes here...</p>
            <!-- Additional content -->
        </div>
        <footer></footer>
    </body>
</html>
Aside Role
HTML 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Aside Tag Example</title>
    </head>
    <body>
        <header></header>
        <main></main>
        <aside>
            <h3>Additional Info</h3>
            <p>This area displays supplemental information that is separate from the main content.</p>
        </aside>
        
        <!-- Can also be implemented using a <div> with role="complementary" -->
        <div role="complementary">
            <h3>Additional Info</h3>
            <p>This area displays supplemental information that is separate from the main content.</p>
        </div>
        <footer></footer>
    </body>
</html>
Navigation Role
HTML 
<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About Us</a></li>
        <li><a href="/services">Services</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>

<!-- Can also be implemented using a <div> with role="navigation" -->
<div role="navigation">
    <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about">About Us</a></li>
        <li><a href="/services">Services</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</div>

Assigning the Meaning of a <button> Tag to a <div> Tag

Below is an example of using the role attribute on a <div> tag to represent a <button> tag.

HTML 
<button type="button" id="save">Save</button>

<!-- Can also be used like this -->
<div id="save" tabindex="0" role="button" aria-pressed="false">Save</div>

Note:
The role="button" identifies the <div> tag as a button for screen readers and other assistive technologies. However, it does not provide the button's control functionality to users. To add button control functionality, you need to include the tabindex attribute along with JavaScript and CSS.

The role attribute can be used to assign semantic meaning to many types of tags. However, it should be used judiciously, focusing on enhancing web content accessibility rather than applying it indiscriminately.

Technical Syntax Summary

Technical Syntax Summary of the <div> tag
Permitted parents Most tags used in the body of a document or application can have a <div> tag as content.
Permitted content
  • Most tags used in the body of a document or application can be used as content of a <div> tag.
  • If a <div> tag has a <dl> as its parent, its content must consist of zero or more groups, each containing at least one <dt> tag and at least one <dd> tag. Optionally, <script> and <template> tags can be mixed in.
Implicit ARIA role generic
Permitted ARIA roles Any

Browser compatibility

Browser compatibility for the div tag
Tag
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
<div> 1 12 1 1

Specifications

Specification for the div tag
Specification
<div> HTML Standard
#the-div-element

References

See also