212
Chapter 4
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.
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 gures 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.
The browser organizes your
markup into a “tree” structure.
organizing your markup