Document Trees | Cascading Style Sheets: Designing for the Web (3rd Edition)

In this chapter, we have demonstrated how elements in HTML are placed inside one another. We did this by indenting the code, as shown in all the previous code examples. The HTML element itself is the outermost element that encompasses all the other elements. Inside the HTML element are the TITLE and BODY elements, with the latter encompassing all the other elements, such as HI and P. Within some of those elements are other elements. For example, within the UL element are the LI elements. If you were to diagram this idea of elements within elements, the result might be as shown in Figure 1.19.

Figure 1.19. Diagram of elements within elements in a tree structure.

 <HTML>   <TITLE>Bach's home page</TITLE>   <BODY>     <H1>Bach's home page</H1>     <P>Johann Sebastian Bach was a       <STRONG>prolific</STRONG>       composer. Among his works are:     <UL>       <LI>the Goldberg Variations       <LI>the Brandenburg Concertos       <LI>the Christmas Oratorio     </UL>   </BODY>  </HTML>

Notice how Figure 1.19 resembles a person's genealogical chart, with parents and children spread out in a top-to-bottom fashion, where parents can also be children. This is called a tree structure. In the tree structure of an HTML document, the HTML element is the earliest ancestor the top parent. All other elements are children, grandchildren, and great-grandchildren in short, descendants of the HTML element. An element can have from zero to many children, but it always has only one parent, with the exception of the HTML element, which is an orphan. In Figure 1.19, note that TITLE and BODY are children of HTML. TITLE has no children, but BODY has three: HI, P, and UL. In turn, UL has three children: the LIs. Also note that in this example, BODY is both a child and a parent, as is UL.

We encounter tree structures in many situations outside HTML and genealogy. Trees real trees such as spruce and pine are (not surprisingly) tree structures. Organizational charts for companies are often set out in a tree structure. Books and technical documents, too, are usually set out in a tree structure, where sections and subsections are branches of the whole. (The fact that books are made from trees doesn't seem to have anything to do with it...) The last example is probably the reason why HTML documents always have a tree structure.

Nested Elements

In HTML, there are some restrictions on which elements can be children of which elements. Usually, an element cannot contain children of its own type. That is, a P, for example, cannot be a child element of another P. You would not typically want to put a paragraph inside another paragraph, anyway. Similarly, an HI cannot be a child element of another HI.

Some elements, however, may contain children of their own type. One example is BLOCKQUOTE, the element that is used to put quoted material within a document. This element can have nested within it quoted material that is the content of another BLOCKQUOTE element, that is, you can put a quote within a quote. This ability of an element to have children of its own type is called nesting.

The following is an example using no less than three nested BLOCKQUOTE elements (shown in bold, italic, and bold italic, respectively):

 <HTML>  <TITLE>Fredrick the Great meets Bach</TITLE>  <BODY>    <H1>Fredrick the Great meets Bach</H1>    <P>In his book "Gödel, Escher, Bach," Douglas     Hofstadter writes:     <BLOCKQUOTE>      Johann Nikolaus Forkel, one of      Bach's earliest biographers, tells the story      as follows:      <BLOCKQUOTE>        One evening, just as he was getting        his flute ready, and his musicians        were assembled, an officer brought        him a list of the strangers who had        arrived. With his flute in his hand        he ran over the list, but        immediately turned to the assembled        musicians, and said, with a kind of        agitation:        <BLOCKQUOTE>         Gentlemen,         old Bach is come.        </BLOCKQUOTE>       </BLOCKQUOTE>    </BLOCKQUOTE>  </BODY> </HTML>

This can be displayed as shown in Figure 1.20.

Figure 1.20. Nested BLOCKQUOTE elements

Notice how with the nested elements, the second element is indented even more than the first is. This is a visual indication that it is a child of the first BLOCKQUOTE.

BLOCKQUOTE marks content as a quote. When you use it for all quotes in your document, you or others, such as robots, can easily extract all the quotes. It is much used also as a means of indenting material other than quotes. It is common to see stacks of BLOCKQUOTE elements, not because there are so many levels of quotes, but because designers think indentation looks good. Here's an example of that (see Figure 1.21):

 <HTML>   <BODY>     <BLOCKQUOTE>       <BLOCKQUOTE>         <BLOCKQUOTE>           <BLOCKQUOTE>             Indentation is great!           </BLOCKQUOTE>         </BLOCKQUOTE>       </BLOCKQUOTE>     </BLOCKQUOTE>   </BODY> </HTML>

Figure 1.21. Using BLOCKQUOTE for indentation.

Unfortunately, when robots or others search for quotes, they find not only quotes, but also everything else tagged as quotes.

With the arrival of CSS, this misuse of BLOCKQUOTE should no longer be necessary. CSS provides easy-to-use methods for indenting text and images, as we will show you in subsequent chapters.

Well, there you have it. The elements we described in this chapter, plus a few others we discuss later, form the basics of HTML. With these, you can write and publish many literary gems. Of course, they may not look all that great. But, we fix that with CSS.