All the elements we have looked at so far have had a specific purpose. The <p> tag is for paragraphs, <h1> through <h6> set priorities, the <a> tag is for links, etc. The<div> tag, as W3C puts it, is a "generic container for flow content that by itself does not represent anything".

It sounds useless – not to mention dull, but it has developed into a real workhorse. The <div> tag has been the principle tool used to put pages together.

Pages have parts – sections that serve particular functions – and as a rule those parts have been set with <div> tags. On the top of most pages is a header. Likewise most pages have a nav div and on the bottom a footer. These are divs that tend stay the same throughout a website. Then there are divs (or a div) with content that is unique to each page.

In HTML5 there is a <header> element, as well as a <nav>, <footer> and a couple other new elements that replace these div tags.

Why study an element whose primary function has been superseded by new elements?
First of all in terms of layout the new elements work essentially the same as divs. What you learn here is applicable to the new elements.
Secondly the <div> tag is still a handy tool. It can do a lot more than just page layout.
Third, as you surf the web and view the source codes of other sites you will rarely see these new tags in use – at least for the time being. With the introduction of IE9 they now have broad browser support. They have worked in Chrome and FireFox for years. However at this point few web designers know they exist, much less use them. My guess is that div tags will be used for page layout for years to come. I hope I'm wrong – the new elements really are a good idea – but at least you'll know better.

Getting back to the <div> tag...

All elements have various properties and all properties have default values. Those default values can be reset by the web designer. How that is done is through the use of Cascading Style Sheets or CSS.

While a full understanding of CSS is beyond the scope of a beginning HTML tutorial, to learn basic HTML you need to know what CSS is and have a general idea of how it works.

Just as adjectives modify nouns, "styles" modify elements.

Take the sentence: "It was a dark and stormy night".

The noun night is modified by two adjectives, dark and stormy.

Were this CSS one would say that night has had its property for illumination set to dark and weather set tostormy. Each property and its corresponding value make a "style". Multiple styles can be grouped as a set, named, and saved as a "class".


The following:

...produces:

<div class="outer-div">
This div tag
<div class="inner-div">
contains this div tag.
</div>
</div>
This div tag
contains this div tag.

In <div class="outer-div"> and <div class="inner-div"> each div tag's styles are "modified" according to the styles I set on lines 21 through 24 of the source code. Amongst other things in the outer div I reset the style for the background color (the default value of which is white) to a light grey and darker grey in the inner div. Both have a black border (default is none), but of different thicknesses. There are many styles that can be set to all kinds of different options.