1. Technology

Overview of the HTML DIV Element


Description of the DIV Element:

The DIV Element as of HTML5

The DIV element has not changed a lot in HTML5, it is now an element that defines generic containers within the content of a page. It is an element that is not meant to represent anything semantically. But you can use class, lang, and title attributes to give your DIV element some semantic meaning.

The DIV Element in HTML 4

The DIV element in HTML 4 defines sections of a web page to make it easier to manage, style, and manipulate. You can use the DIV element when you want to center a block of content or position a content block on the page.

You can do these same things in HTML5, but you are encouraged to use more semantically relevant elements before you use the DIV elements.

HTML Definition of the DIV Tag:

In order to use the DIV element you need to know the HTML definition of the DIV element. Some key tips for using the DIV element correctly include:

  • The DIV element is a block-level element
  • The DIV element can contain nearly any other tag
  • In HTML 4, the DIV element cannot be inside another block-level element, like a P element.
  • In HTML5 the DIV element can be found inside any element that can contain flow elements, such as other DIV elements, ADDRESS, BLOCKQUOTE, sectioning elements, and tables.

Using the DIV Element:

  • You should always use the DIV element as a last resort after using other sectioning elements. Read this article to learn how to use sectioning elements correctly.
  • The DIV element is not a replacement P element. The P element is for paragraphs, only, while the DIV element defines more sections within a document. Don't replace P elements with DIV elements.
  • It's a good idea to label your DIV elements as you place them in your document. For example, if you're defining the main content area of your site, you should name that DIV element with the id attribute:
    <div id="maincontent">
  • It's always a good idea to close your DIV elements as soon as you open them. Then place the contents within the element.
  • If you nest your DIV elements, be sure that you know where your content is going (in other words, which DIV element it should be part of).
Related Video
DIV and Span Tags

©2014 About.com. All rights reserved.