HTML 12: Nesting and debugging
Nesting
Putting one element inside another is called "nesting".
We say, "the <p> element is nested inside the <body> element." At this point, you've already seen lots of elements nested inside of other elements. You've put a <body> element inside an <html> element, a <q> element inside a <p> element, and so on. You've also put a <head> element inside the <html> element, and a <title> element inside the <head>. That's the way HTML pages get constructed.
The more you learn about HTML, the more important having this nesting in your brain becomes. But no worries -- before long you'll naturally think about elements this way.
To Understand the Nesting Relationship, Draw a Picture
Drawing the nesting of elements in a Web page is kind of like drawing a family tree. At the top you've got the great-grandparents, and then all their children and grandchildren below.
Here's an example:
<html>
<head>
<title>Musings</title>
</head>
<body>
<p>
To quote Buckaroo, <q>The only reason
for time is so that everything doesn't happen
at once.</q>
</p>
</body>
</html>
Let's translate this into a diagram, where each element becomes a box, and each line connects the element to another element that is nested within it.
- <html> is always at the root of the tree.
- <html> has two nested elements: <head> and <body>. You can call them both "children" of <html>.
- <title> is nested within the <head> element.
- The parent of <q> is <p>, the parent of <p> is <body>, and the parent of <body> is <html>.
Using Nesting to Make Sure Your Tags Match
Your first payoff for understanding how elements are nested is that you can avoid mismatching your tags (and there's gonna be more payoff later, just wait.)
What does "mismatching your tags" mean and how could that happen? Take a look at this example:
<p>I'm so going to blog <em>this</em>.</p>
Here's how the HTML looks; <em> is nested inside <p>:
So far, so good. But it's easy to get sloppy and write some HTML that looks more like this:
<p>I'm so going to blog <em>this.</p></em>
WRONG! The <p> tag ends before the <em> tag!
Given what you know about nesting, you know the <em> element needs to be nested fully within, or contained in, the <p> element.
Good
Here the <em> element is nested inside the <p>:
Bad
Here the <em> element has leaked outside of the <p> element, which means it is not properly nested inside it:
So What?
It's okay to mess up your nesting if you like playing Russian roulette. If you write HTML without properly nesting your elements, your pages may work on some browsers but not on others.
By keeping nesting in mind, you can avoid mismatching your tags and be sure that your HTML will work in all browsers. This is going to become even more important as we get into "industrial strength HTML" (that is, XHTML.)
Exercise: Debugging a Web Page
In the file below, top-100.html, there are some mismatched tags, some missing or extra tags, and some completely misplaced tags. Your job is to debug this file.
- Navigate to My Documents and create a new folder called lastnamefirstinitial HTML 12.
- Right-click on top-100.html above and choose Save Target As... (Save Link As... in Firefox). Save the file in your new HTML 12 folder.
- Open the top-100.html file in Notepad and debug it.
- When you are done, turn yout HTML 12 folder in.
One more hint: when song tracks are listed on a CD, is that an ordered or unordered list?
Source: "Head First HTML with CSS & XHTML" by Elisabeth Freeman and Eric Freeman