HTML <div> Tag

A <div> tag creates a generic container that groups other elements. By default it is not visible, but it can be made visible by styling the element with class or style attributes.

HTML Tag

Example

#

A <div> tag.
It contains a header and three paragraphs.

Impressionism

Impressionism is a 19th-century art movement characterized by relatively small, thin, yet visible brush strokes, open composition, emphasis on accurate depiction of light in its changing qualities (often accentuating the effects of the passage of time), ordinary subject matter, inclusion of movement as a crucial element of human perception and experience, and unusual visual angles.

The Impressionists faced harsh opposition from the conventional art community in France. The name of the style derives from the title of a Claude Monet work, Impression, soleil levant (Impression, Sunrise), which provoked the critic Louis Leroy to coin the term in a satirical review published in the Parisian newspaper Le Charivari.

The development of Impressionism in the visual arts was soon followed by analogous styles in other media that became known as impressionist music and impressionist literature.

<div style="padding:30px;background:aliceblue;">
  <h3>Impressionism</h3>
  <p>
    Impressionism is a 19th-century art movement characterized 
    by relatively small, thin, yet visible brush strokes, open 
    composition, emphasis on accurate depiction of light in its 
    changing qualities (often accentuating the effects of the passage 
    of time), ordinary subject matter, inclusion of movement as a 
    crucial element of human perception and experience, and 
    unusual visual angles.
  </p>
  <p>
    The Impressionists faced harsh opposition from the conventional 
    art community in France. The name of the style derives from the 
    title of a Claude Monet work, Impression, soleil levant 
    (Impression, Sunrise), which provoked the critic Louis Leroy 
    to coin the term in a satirical review published in the 
    Parisian newspaper Le Charivari.
  </p>
  <p>
    The development of Impressionism in the visual arts was soon 
    followed by analogous styles in other media that became known 
    as impressionist music and impressionist literature.
  </p>
</div>
div = division

Using <div>

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

This element accepts any kind of content, including text, HTML elements, images, and more.

It is also frequently used to create divisions or sections on a page layout.

By default a <div> is not visible, but it can be made visible with CSS (border, background, font, etc).

Divs are block-level elements, meaning the browser adds a line break before and after each element.

Tip: If possible, replace your div elements with semantic alternatives. Examples include nav, main, article, section, aside, footer, and header.

More Examples

A <div> tag with a background color and a border.
This element groups a header and three paragraph elements.

Impressionism

Impressionism is a 19th-century art movement characterized by relatively small, thin, yet visible brush strokes, open composition, emphasis on accurate depiction of light in its changing qualities (often accentuating the effects of the passage of time), ordinary subject matter, inclusion of movement as a crucial element of human perception and experience, and unusual visual angles.

The Impressionists faced harsh opposition from the conventional art community in France. The name of the style derives from the title of a Claude Monet work, Impression, soleil levant (Impression, Sunrise), which provoked the critic Louis Leroy to coin the term in a satirical review published in the Parisian newspaper Le Charivari.

The development of Impressionism in the visual arts was soon followed by analogous styles in other media that became known as impressionist music and impressionist literature.

<div style="padding:30px;background:aliceblue;border:4px solid lightblue;">
  <h3>Impressionism</h3>
  <p>
    Impressionism is a 19th-century art movement characterized 
    by relatively small, thin, yet visible brush strokes, open 
    composition, emphasis on accurate depiction of light in its 
    changing qualities (often accentuating the effects of the passage 
    of time), ordinary subject matter, inclusion of movement as a 
    crucial element of human perception and experience, and 
    unusual visual angles.
  </p>
  <p>
    The Impressionists faced harsh opposition from the conventional 
    art community in France. The name of the style derives from the 
    title of a Claude Monet work, Impression, soleil levant 
    (Impression, Sunrise), which provoked the critic Louis Leroy 
    to coin the term in a satirical review published in the 
    Parisian newspaper Le Charivari.
  </p>
  <p>
    The development of Impressionism in the visual arts was soon 
    followed by analogous styles in other media that became known 
    as impressionist music and impressionist literature.
  </p>
</div>

Attributes for <div>

The <div> element has no attributes, but it does accept global attributes.
The following are commonly used.

Attribute Value Description
id    value Provides the div element with a unique identifier.
class    classnames Assigns one or more classnames to the div element.
style    CSS-values Assigns CSS style values to the div element.
data-*    value Defines additional data that can be used by JavaScript.
hidden    hidden Specifies whether the div element is hidden.

For additional global attributes see our global attributes list.


Obsolete Attributes

Do not use the attribute listed below.  It is no longer valid on the div tag in HTML5.

Attribute Description Alternative
align Aligns the content to the div tag. CSS text-align

Did you know?

Did you know?

Hiding a <div> element with JavaScript

It is easy to show and hide large sections on a page by wrapping the elements in a <div>.

When hiding a <div>, all elements within it will also be hidden.

This is useful for when the state has changed and other content need to be displayed.

Click the button the show and hide the content of the <div> container.


You have just won a price!

A $50 check will be mailed to your home address!

<button type="button" onclick="toggle();">Toggle div</button><br />

<div id="mydiv"
     style="background-color:aliceblue;padding:20px;border:1px dashed orangered;">
  <h5>You have just won a price!</h5>
  <p>A $50 check will be mailed to your home address!</p>
</div>

<script>
  let toggle = () => {
     let element = document.getElementById('mydiv');
     element.toggleAttribute('hidden');
  }
</script>

Tip: Grouping elements in divs can be useful to dynamically show and hide large areas on a page.


Layout Tags

The <div> tag is part of a group of tags that that help with organizing page content into separate sections. This group is referred to as the Layout tag group. Together, these tags allow you to create comprehensive page layouts.

Here is the complete list.

Element Description
<header> Defines a header section on a page or a section of a page
<main> Creates a container for the main content of the page
<footer> Defines a footer section on a page or a section of a page
<nav> Creates a container for navigation links
<aside> Creates a content area that is related to the primary content on a page
<article> Defines a container for independent and self contained text
<section> Defines a piece of content that can stand on its own
<div> Creates a division or section on a page
Tip: When appropriate, use semantic tags instead of the generic <div>.

Browser support

Here is when <div> support started for each browser:

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

Guides