HTML <div> Tag

 

ATTENTION: THIS PAGE IS Valid HTML 5 AND IS BEST VIEWED WITH HTML 5 - Please upgrade your browser or download one of the HTML 5 compatible browsers such as Mozilla Firefox, Chrome, Opera or IE 9 (March 14, 2011 or later). For more information see HTML 5 browsers.


If you find this helpful, please click the Google +1 Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)


PDF mobile

The <div> Tag in HTML 5

The div element is a generic container for flow content. It can be used to style the presentation of a block of HTML code. If the block of code is a section that should be included in the document outline, one of the sectioning tags should be used instead:

There is also a generic container for phrasing content, the span element, which can be used to style inline HTML code.

The following demo makes use of a <div> tag to center an unordered list in its entirety so that the bullets will be in a nice straight vertical line and to style it with a blue outset border.

  • Tina Fey
  • Jane Lynch
  • Kyra Sedgwick
  • Andie MacDowell
  • Laura San Giacomo
  • Clare MacIntyre-Ross
  • Kimberly Williams-Paisley

This is an actual working example of the <div> tag example code below.


<div> Tag Syntax

<body>
   ...
   ... flow content expected ...
   <div>
      ... flow content ...
   </div>
   ...
</body>
Rules for coding HTML div elements

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

  1. Include a div element where flow content is expected.
  2. Begin the div element with a starting <div> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
  3. Inside the div element, between the starting <div> tag and the ending </div> tag, code the inner HTML flow content.
  4. End the div element with a matching </div> closing tag.
<div> Content Model
Content of the div element

The content of the div element can include HTML comments, text content and any tags that can be used in flow content.


<div> Tag Attributes

Attributes of the <div> tag
global attributes In addition to the personal attributes of the <div> tag below, any of the common HTML attributes can also be coded. A class attribute or style attribute is often used to style the inner HTML of the div element.

<div> Tag Examples

Examples of the div tag in HTML 5
Using a <div> tag to center a list
(see the <div> tag demo above)
<div style="width: 35%; margin: 0.5em auto; border: 6px outset #0000ff">
<style scoped="scoped">
   ul.star-shaped-bullet { margin: 0; list-style: none; text-align: center }
   ul.star-shaped-bullet li:before { content: "\2606\a0" }
</style>
<ul class="star-shaped-bullet" style="padding: 6px; text-align: left">
   <li>Tina Fey</li>
   <li>Jane Lynch</li>
   <li>Kyra Sedgwick</li>
   <li>Andie MacDowell</li>
   <li>Laura San Giacomo</li>
   <li>Clare MacIntyre-Ross</li>
   <li>Kimberly Williams-Paisley</li>
</ul>
</div>

On the <div> tag, the text-align: center style is used to center the list, along with auto in the second position of the margin style, which keeps the left margin from being forced to a fixed width. The text-align: left style for the li element keeps the list items left justified. If the div element was omitted and the text-align: center style was coded on the <ul> tag then each list item would be centered and the bullets would be staggered.

Demo of various border styles.


Changes in HTML 5 - <div> Tag

What's new in HTML 5

The introduction of sectioning tags in HTML 5 is intended to reduce the need to use <div> tags for sectioning purposes.

Differences between HTML 5 and earlier versions of HTML

Sections of a page should be identified with the more specific sectioning tags rather than <div> tags. Instead of using <div>s like this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
     <title>Page Title</title>
  </head>
  <body>
    <div class="site-heading">
       <h1>My Example Site</h1>
    </div>
    <div class="site-navigation">
       ...
    </div>
    <div class="content">
       <div class="page-heading">
          <h2>Page Heading</h2>
          <div class="page-navigation">
             ...
          </div>
       </div>
       <p>This is the introduction to the article.
       </p>
       <div class="section">
          <h3>Section Heading</h3>
          <p>This is the content of the section.
          </p>
       </div>
       ... additional "section"s ...
       <div class="footer">...</div>
    </div>
    <div class="right-side">
       ...
    </div>
  </body>
</html>

use this structure instead:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
     <title>Page Title</title>
  </head>
  <body>
    <h1>My Example Site</h1>
    <nav>
       ...
    </nav>
    <article>
       <header>
          <h2>Page Heading</h2>
          <nav>
             ...
          </nav>
       </header>
       <p>This is the introduction to the article.
       </p>
       <section>
          <h3>Section Heading</h3>
          <p>This is the content of the section.
          </p>
       </section>
       ... additional <section>s ...
       <footer>...</footer>
    </article>
    <aside>
       ...
    </aside>
  </body>
</html>

The following attributes should not be coded on the <div> tag because they either have been deprecated or were never officially supported:

  • align

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the div element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.


Valid HTML 5