HTML <div> tag

The <div> tag defines a division or section in a page and makes it easy to manage, style, and manipulate those divisions or sections. Browsers usually place a line break before and after the div element.  Use the <div> tag to group block-elements to format them with styles. Some examples would be the basic layout of this page.

In HTML 4.01 documents, the <div> tag was often used for specifying the various navigational sections of the HTML document (such as the header, footer, content area, side bars, etc).

The HTML 5 specification has introduced a number of new elements that can (and should) be used instead of the <div> element. Examples of these new elements include <article>, <aside>, <header>, and <footer>, as well as others.

HTML 5 <div> Tag

Things to remember about the <div> tag:

• The <div> tag is a block-level element.
• The <div> tag can contain almost any other element.
• The <div> tag can NOT be inside a <p> tag.
• Label your <div> tags as you place them in your page. Example, if you're defining the main content area of your site, you should name that <div> tag: "content". <div id="maincontent"> OR <div id="leftsidebar">
• Make sure when you open the <div> tag, you close it </div> BEFORE adding your content.
• If you nest your <div> tags, make sure you know where your content for each of the <div>s is going (in other words, which <div> it should be part of). This is where it may pay you to add comments to your HTML code so you can tell where each <div> begins and ends.
  Example:
  <!--Main content begins here -->
  Your content
  <!--Main content ends here here -->

This site uses <div> tags for the page layout. Each is styled by using an id and applying the style rules. Remember an id is used only once on a page. Examples of style id's and how they are used:

• <div id="outerWrapper"> is the container for the entire page content.
• <div id="header"> is the container for the masthead.
• <div id="contentWrapper"> is the container for the content area which include the navigation and content area.
• <div id="arrowlistmenu"> contains the left side navigation and is floated to the left.
• <div id="content"> contains the main content area.
• <div id="footer"> contains the footer area.

Of course <div> tags can be used for other things like the box below which does not have a width in the style rules so is contained only by the content <div>.  

This <div> has a width added to the style which contains it to 50% of the allowable space.

You could add a different class with different style rules that would give a different look to the div on the same page.

My thanks to Jennifer McKemie who was the inspiration for this tutorial. Example of what you can do with a <div>. The example layout does not do well at 800x600 resolution because of the image included in the center <div>. I no longer design for anything lower than 800x600 BUT the page you are looking at will resize so that it does not fall apart at an even lower resolution. That is because the container uses a percentage width as does each <div> except the left navigation.

Copyright 2008 Pat Geary of Expression Web Tips, Tutorials, and Templates All Rights Reserved