HTML <div> Tag

If you find this helpful, please click the Google 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.)

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:

<article> sectioning tag for an article
<aside> sectioning tag for a sidebar
<nav> tag for a navigation section such as a navigation toolbar with a drop-down menu, instead of <div role="menu">
<section> tag

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.

Include a div element where flow content is expected.
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.
Inside the div element, between the starting <div> tag and the ending </div> tag, code the inner HTML flow content.
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

HTML <div> Tag