Introduction: Nesting

Nesting

Section 1 - Introduction
      Tags
      End what you begin
      Nesting
      Parts of a webpage
Section 2 - Basics
Section 3 - Next Level
Section 4 - Advanced
Section 5 - Publishing
Section 6 - Extras
Appendices

Multiple Tags - Nesting
Fortunately, computers can do a lot of things at once. They just have to be told the right order in which to do their tasks. This means that tags have to be nested. The thing you started first has to end last. That makes no sense, so it's easier to show you than to tell you.

Correct

<jump>
     <sing>
          <dance>
          </dance>
     </sing>
</jump>

Incorrect

<jump>
     <sing>
          <dance>
</jump>
     </sing>
          </dance>

Notice how in the first example, you started jumping first, then singing, then finally dancing? You had to stop by completing the dancing, then singing, then jumping. Reverse the order. This way, every command is nested inside another command, like eggs in a nest or those crazy Russian dolls. If you don't get this now, you will eventually.

New Tag Alert!
Let's show you another tag. It's called the body tag. This will define the part of the document where all of the words and pictures and cool stuff goes. This is called, appropriately, the body of the page. It's another easy tag. Are you ready?

<body>

I'm betting you can figure out how to tell the computer to stop making the body as well. Again, closing the command is easy.

</body>

So, let's put these two tags together in a nested fashion. I'll be using different colors and I'll be spacing them so they're easier to see, but you don't need to worry about spacing.

</body>
</html>

Speaking of spaces...
Spaces don't matter in HTML documents. The computer will only recognize one space between words or sentences, and it ignores spaces between tags. The same code in the box above could be written as<html><body></body></html> ...and it would mean the same thing to the computer. If it helps you understand what's happening on your page, put in as many spaces as you need.