HTML <div> Tag

A styled <div> element with a header and three paragraphs.

<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>

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

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

<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>

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

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.

<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>

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, they allow you to create comprehensive page layouts.

Here is the complete list.

Tip: When possible, use semantic tags instead of the generic <div>. They behave the same, but specify their content better.

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

• Our HTML span Tag Reference
• Our HTML main Tag Reference
• Our HTML section Tag Reference
• Our CSS Tutorial