NHS Designs
Web Design

HTML 12: Nesting and debugging


matrioshka nesting dolls

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.

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:

          To quote Buckaroo, <q>The only reason
         for time is so that everything doesn't happen
         at once.</q>

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 <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>:

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:

<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.

Here the <em> element is nested inside the <p>:

em nested inside p

Here the <em> element has leaked outside of the <p> 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 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.


  1. Navigate to My Documents and create a new folder called lastnamefirstinitial HTML 12.
  2. 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.
  3. Open the top-100.html file in Notepad and debug it.
  4. 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

resources · copyright information · Natomas High School Design Department