Adding Structure
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
?
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:
<div>
<p>This is a paragraph inside a div.</p>
<p>So is this.</p>
</div>
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:
- the site name
- a tag line
- an area of body content
Take the homepage we’ve been working on (index.html
) and, in your text editor of choice, add <div>
and </div>
tags around the sections suggested in Figure 2.19, “Noting distinct sections in the basic web page”. While you’re adding those div
s, add an id
attribute to each, appropriately allocating the names header
, sitebranding
, tagline
, and bodycontent
. Remember that attribute names should be written in lowercase, and their values should be contained within quotation marks.
Important: No Sharing id
s
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
s later, when you’re dealing with elements via CSS or JavaScript.
Note: h1
, header
, and head
An id
attribute set to header
should not be confused with headings on the page (h1
, 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 topstuff
or 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 id
attribute:
Example 2.12. index.html
(excerpt)
<div id=”header”>
<h1>BubbleUnder.com</h1>
<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 div
s to the parts of the content that we’ve identified as “site branding” and “tag line.”
Nesting Explained
We already know that div
s can contain paragraphs, but a div
can also contain a number of other div
s. 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.
<div id=”outer”>
<div id=”nested1″>
<p>A paragraph inside the first nested div.</p>
</div>
<div id=”nested2″>
<p>A paragraph inside the second nested div.</p>
</div>
</div>
As Figure 2.19, “Noting distinct sections in the basic web page” shows, some nesting is taking place: the “site branding” and “tag line” div
s are nested inside the “header” div
.
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”
“https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml”>
<head>
<title>Bubble Under – The diving club for the south-west
UK</title>
<meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8″/>
</head>
<body>
<div id=”header”>
<div id=”sitebranding”>
<h1>BubbleUnder.com</h1>
</div>
<div id=”tagline”>
<p>Diving club for the south-west UK – let’s make
a splash!</p>
</div>
</div> <!– end of header div –>
<div id=”bodycontent”>
<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>
<h3>About Us</h3>
<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
buddy.</p>
<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,
eh?).</p>
<h3>Contact Us</h3>
<p>To find out more, contact Club Secretary Bob Dobalina on
01793 641207 or
<a href=”mailto:bob@bubbleunder.com”>email
bob@bubbleunder.com</a>.</p>
</div> <!– end of bodycontent div –>
</body>
</html>
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:
</div>
</div>
</div>
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 div
s. 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.