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 divs to the parts of the content that we've identified as "site branding" and "tag line."
Nesting Explained
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.
<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 shows, some nesting is taking place: the "site branding" and "tag line" divs are nested inside the "header" div.
The Sectioned Page: all Divided Up
All things being well, your XHTML should now look like this:
Example 2.13. index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://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>
Note: 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 you! -- who's looking at the source markup. It does not affect how the browser interprets or displays the web page. (The one exception to this is the pre element. pre is short for pre-formatted, and any text marked up with this element appears on the screen exactly as it appears in the source; in other words, carriage returns, spaces, and any tabs that you've included will be honored. The pre element is usually used to show code examples.)
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, 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 -->
Share and Enjoy:
