HTML5 tutorial - The div tag.

The div tag

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.

An example of the header, nav and footer elements

Why study an element whose primary function has been superseded by new elements?

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 to stormy. 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.

Hopefully you aren't completely lost. Keep in mind that while CSS is a powerful tool, it isn't easy. To make matters worse different browsers do not handle all elements or CSS styles the same way. Over the years Microsoft's Internet Explorer has been particularly problematic.

The good news is that it looks like IE9 is better behaved than previous versions. Better yet, IE usage has dropped from 85% in 2002 to less than 25% now**. FireFox and Chrome have taken the lion's share of the market.*** They're better browsers. With Microsoft no longer the big bully on the block cross-browser compatibility issues should become less problematic. One can only hope.

CSS or Cascading Style Sheets

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language such as HTML.
w3schools · wikipedia

Cross-browser

Cross-browser capability allows a website or web application to be properly rendered by all browsers.
wikipedia

* There are other values besides "styles", but for now let's not make it any more complicated than it already is.

** This is according to www.w3schools.com's page: Web Statistics and Trends. Other sources have IE usage at double that. There is no disagreement that IE usage is shrinking. My stats show IE usage on this site at about 15%. My visitors are cool.

*** Perhaps I shouldn't but yes, I am enjoying no small sense of smug glee in saying this. I've earned it. Who knows how many million man hours have been spent by lowly web designers like myself trying to cope with such issues while the big boys battled over market shares.