More XHTML Trees!
I understand that XHTML trees make for very dry reading, so I'll wrap it up on this page. Let's start by ditching the family tree tags and moving into real XHTML tags. Here's an example of a ridiculously simple webpage:
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is an example of a simple webpage <a href="#">with a link</a>.</p>
</body>
</html>
If you've spent any time with HTML or XHML you should be able to see that and understand immediately what it would look like on a website. But have you ever considered what it looks like to a browser? The browser uses something called the "Document Object Model" (DOM) to turn each XHTML tag into an "Object" in memory. A DOM "Object" is the same as a tree structure's node.
Here's a visual demonstration of the parents and children from that page:
- html
- head
- title
- body
- h1
- p
- a href="#"
This of course is a simplified version. The DOM actually requires that the text of the page be included as text nodes, which would really make the tree look like this:
- html
- text:
- head
- text:
- title
- text: Hello World
- text:
- text:
- body
- text:
- h1
- text: Hello World
- text:
- p
- text: This is an example of a simple webpage
- a href="#"
- text: with a link
- text: .
- text:
- text:
Keeping track of the text nodes is a pain in the ass and generally unnecessary (especially the text nodes that are nothing but spaces and line breaks) ... so let's stick to the first method with the following example:
<div id="OuterDiv">
<div id="InnerDiv" class="awesome">
<p>Here's some text!</p>
</div>
</div>
We could represent that like this:
- div id="OuterDiv"
- div id="InnerDiv" class="awesome"
- p
Or we could introduce some shorthand. Let's use "#" for "id" and "." for "class."
- div#OuterDiv
- div#InnerDiv.awesome
- p
Which is an extremely useful shorthand because it'll roll right into our first real CSS topic ...