NHS Designs - Web Design - HTML

HTML 12: Nesting and debugging

Nesting

matrioshka nesting dolls

Putting one element inside another is called "nesting".

We say, "the 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 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.

matrioshka nesting dolls

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>
 
 To quote Buckaroo, <q>The only reason
 for time is so that everything doesn't happen
 at once.</q>
 
 </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 nesting tree

<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 , the parent of 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:

I'm so going to blog this.

Here's how the HTML looks; is nested inside :

em nested inside of p

So far, so good. But it's easy to get sloppy and write some HTML that looks more like this:

I'm so going to blog this.

WRONG! The tag ends before the tag!

Given what you know about nesting, you know the element needs to be nested fully within, or contained in, the element.

Good
Here the element is nested inside the :

em nested inside p

Bad
Here the element has leaked outside of the element, which means it is not properly nested inside it:

em improperly nested

So What?

It's okay to mess up your nesting if you like playing Russian roulette. If you write HTML without propoerly 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.

top-100.html

Navigate to your root folder (the one with your last name, inside the one with your user name.
Create a new folder called HTML 12.
Right-click on top-100.html above and choose Save Target As...
Navigate to the new HTML 12 folder you created. Right-click on it and choose Paste.
Open the top-100.html file in Notepad and debug it.
When you are done, copy and paste your entire root folder into
My Documents \ K201 \ PERIOD3/4 \ HTML 12

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

Take the HTML 12 Quiz