Paragraphs? No problem. Headings? You’ve got them under your belt. In fact, you’re now familiar with the basic structure of a web page. The small selection of tags that we’ve discussed so far are fairly easy to remember, as their purposes are obvious (remember:
p = paragraph). But what on earth is a
div is used to divide up a web page and, in doing so, to provide a definite structure that can be used to great effect when combined with CSS.
When you place content inside a
div, it has no effect on the styling of the text it contains, except for the fact that it adds a break before and after the contained text. Unlike a
p element, the
div does not add any margins or padding. Compare the following:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is yet another paragraph.</p>
<p>And just one more paragraph.</p>
<div>This is a div.</div>
<div>The content of each div appears on a new line.</div>
<div>But unlike paragraphs, there is no additional padding.</div>
<div>A div is a generic block-level container.</div>
The difference can be seen below.
The purpose of a
div is to divide (hence the abbreviation ‘div’) up a web page into distinct sections — a basic structural framework with no styling — whereas
p should be used to create a paragraph of text.
Important: Use Elements as Intended
Never use an XHTML element for a purpose for which it was not intended. This really is a golden rule.
Rather than leaving the paragraph tags as they are, you might decide to have something like this:
<p>This is a paragraph inside a div.</p>
<p>So is this.</p>
You can have as many paragraphs as you like inside that
div element, but note that you cannot place
div elements inside paragraphs. Think of a
div as a container that’s used to group related items together, and you can’t go wrong.
If we look at our homepage in the browser, it’s possible to identify areas that have certain purposes. These are listed below. We have:
- a header area that contains:
- an area of body content
Take the homepage we’ve been working on (
index.html) and, in your text editor of choice, add
</div> tags around the sections suggested in Figure 2.19, “Noting distinct sections in the basic web page”. While you’re adding those
divs, add an
id attribute to each, appropriately allocating the names
bodycontent. Remember that attribute names should be written in lowercase, and their values should be contained within quotation marks.
Important: No Sharing
id attributes are used in XHTML to uniquely identify elements, so no two elements should share the same
id value. You can use these
id attribute set to
header should not be confused with headings on the page (
h2, and so on); nor is it the same as the
head of your HTML page. The
id= attribute could just as easily have been named
pageheader. It doesn’t matter, so long as the attribute name describes the purpose of that page section to a fellow human being (or to yourself 12 months after you devised it, and have forgotten what you were thinking at the time!).
To get you started, I’ve done a little work on the first part of the page. In the snippet below, that section has been changed to a
div with an
<p>Diving club for the south-west UK – let’s make a splash!</p>
</div> <!– end of header div –>
Now, try doing the same: apply
divs to the parts of the content that we’ve identified as “site branding” and “tag line.”
We already know that
divs can contain paragraphs, but a
div can also contain a number of other
divs. This is called nesting. It’s not tricky, it’s just a matter of putting one div inside the other, and making sure you get your closing tags right. Nesting elements can help to logically group sections of a web page together, just as you might do in the real world by placing a selection of small boxes containing similar items inside a larger box.
<p>A paragraph inside the first nested div.</p>
<p>A paragraph inside the second nested div.</p>
As Figure 2.19, “Noting distinct sections in the basic web page” shows, some nesting is taking place: the “site branding” and “tag line”
divs are nested inside the “header”
The Sectioned Page: All Divided Up
All things being well, your XHTML should now look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<title>Bubble Under – The diving club for the south-west
<p>Diving club for the south-west UK – let’s make
</div> <!– end of header div –>
<h2>Welcome to our super-dooper Scuba site</h2>
<p><img src="divers-circle.jpg" width="200" height="162"
alt="A circle of divers practice their skills"/></p>
<p>Glad you could drop in and share some air with us! You’ve
passed your underwater navigation skills and
successfully found your way to the start point – or in
this case, our home page.</p>
<p>Bubble Under is a group of diving enthusiasts based in
the south-west UK who meet up for diving trips in the
summer months when the weather is good and the bacon
rolls are flowing. We arrange weekends away as small
groups to cut the costs of accommodation and travel and
to ensure that everyone gets a trustworthy dive
<p>Although we’re based in the south-west, we don’t stay on
our own turf: past diving weekends away have included
trips up to Scapa Flow in Scotland and to Malta’s
numerous wreck sites.</p>
<p>When we’re not diving, we often meet up in a local pub
to talk about our recent adventures (any excuse,
<p>To find out more, contact Club Secretary Bob Dobalina on
01793 641207 or
</div> <!– end of bodycontent div –>
Tip: Indenting Your Markup
It’s a good idea to indent your markup when nesting elements on a web page, as is demonstrated with the items inside the
div section above. Indenting your code can help resolve problems later, as you can more clearly see which items sit inside other items. Note that indenting is only really useful for the person — perhaps just you — who’s looking at the source markup. It does not affect how the browser interprets or displays the web page.
Notice that, in the markup above, comments appear after some of the closing
div tags. These comments are optional, but again, commenting is a good habit to get into as it helps you fix problems later. Often, it’s not possible to view your opening and closing
<div> tags in the same window at the same time, as they’re wrapped around large blocks of XHTML. If you have several nested
<div> tags, you might see something like this at the end of your markup:
In such cases, you might find it difficult to work out which
div is being closed off at each point. It may not yet be apparent why this is important or useful, but once we start using CSS to style our pages, errors in the XHTML can have an impact. Adding some comments here and there can really help you debug later.
</div> <!– end of inner div –>
</div> <!– end of nested div –>
</div> <!– end of outer div –>
How does the web page look? Well, we’re not going to include a screen shot this time, because adding those
div elements should make no visual difference at all. The changes we just made are structural ones that we’ll build on later.
Show a Little Restraint
Don’t go overboard adding
divs. Some people can get carried away as they section off the page, with
<div> tags appearing all over the place. Overly enthusiastic use of the
div can result in a condition that has become known as “
div-itis.” Be careful not to litter your markup with superfluous
<div> tags just because you can.