Using the DIV Tag

Web Design is a constantly evolving art! It used to be the case that everyone used tables to control the layout of their pages. Then, designers moved to frames to structure their web sites. Now, frames are out of fashion and, with the advent of CSS (which we will discuss soon), most designers make extensive use of an HTML element called the div to structure their pages.

What is a DIV?

On its own, the div element does nothing, it is simply a way of introducing named divisions into a page. For example, consider a page which has a div defining the main block of the page. This div has the id (is called) "container" and it is used to control the size, position and appearance of the main body of the page. Contained within that main division is a div for the header, one for the navigation menu, one for the main content, and another for the footer. If we were to add these divs into our diagram of a page structure, then we would get the following structure:

<!DOCTYPE htm>
<html>
  <head>
    <title>Div Example</title>
  </head>
  <body>
    <div id="container">
      <div id="header">
        header content would go here
      </div>
      <div id="menu">
        navigation menu items would go here
      </div>
      <div id="content">
        all the main content of the page would go in here
      </div>
      <div id="footer">
        the footer content would go here
      </div>
    </div>
  </body>
</html>

Check out the appearance that would result from this page here...

You can see that the divs don't help very much with the page layout on their own. However, if the divisions have style applied to them, the visual appearance of the page can be controlled in very precise ways. Note that although the divisions appear sequentially in the HTML source, they may actually be positioned anywhere on the page, depending on what the styles specify.

Let's now look at styles... Next

References