...and here's how the browser sees the HTML






...and here's how the browser sees the HTML

The browser has to make some sense of all that markup, and organize it in a way that allows the browserand your JavaScript codeto work with the page. Here's what the browser turns your text markup into:

"Head First HTML with CSS & XHTML"

"Welcome to the Webville Tree Farm. We're still learning about CSS, so pardon our plain site. We just bought "

a

", though, so expect great things soon."

p

"Webville Tree Farm"

"You can visit us at the corner of Binary Blvd. and DOM Drive. Come check us out today!"

h1

p

body

"Webville Tree Farm"

title

head

html

Wait a second. Just because you put a picture of a plant behind my markup doesn't make it a tree. I still don't understand where trees come into the picture.

The browser organizes your markup into a "tree" structure.

When a browser loads an HTML page, it starts out with the <html> element. Since this is at the "root" of the page, <html> is called the root element.

Then, the browser figures out what elements are directly beneath <html>, like <head>. and <body> These branch out from the <html> element (starting to get the tree vibe?), and have a whole set of elements and text of their own. Of course, the elements in each branch can have branches and children of their own... and on and on, until the entire page is represented.

Eventually, the browser gets to a piece of markup that has nothing beneath it, like the text in a <p> element, or an <img> element. These pieces of markup, without anything under them, are called leaves. So your entire page ends up being one big tree to the web browser.

Let's look at that tree structure again, but this time with some lines making the connections between the markup a little clearer.

How the browser sees your HTML (part 2)

Text is represented in the tree, as well as elements.
                                   "Head First HTML with CSS & XHTML"
"Welcome to the Webville Tree Farm.
  We're still learning about CSS, so
pardon out plain site. We just bought "     a
                                              ", though, so expect great things soon."

"Webville Tree Farm"               p
                                          "You can visit us at the corner of
                                           Binary Blvd. and DOM Drive. Come
                                                  check us out today!"
Eventually, the tree ends in leaves, which often are just pieces
of text in the HTML.
When you're showing the elements in a tree, you usually leave off
the angle brackets, < and >. h1            p...and
other times, an element has only one child.

                                                       body Sometimes an
element has several children...


  "Webville Tree Farm"

        title Each bit of markup can have any number of children.

          head

             html <html> is the root element. Everything else branches out from it.

Here's the HTML that this tree represents.

<html>
 <head>
   <title>Webville Tree Farm</title>
 </head>
 <body>
 <h1>Webville Tree Farm</h1>
 <p>Welcome to the Webville Tree Farm.
    We're still learning about CSS, so
    pardon our plain site. We just bought
    <a href=
    "http://www.headfirstlabs.com/books/hfhtml/">
      Head First HTML with CSS & XHTML</a>,
    though, so expect great things soon.</p>
 <p>You can visit us at the corner of
    Binary Blvd. and DOM Drive. Come check
    us out today!</p>
 </body>
</html>



 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows