Containers
Concepts
HTML Documents are made using elements as containers
Probably the most important concept you can learn about HTML is its structure in the form of containers. HTML elements nest inside each other in their proper places.
It is a mistake to think of HTML in terms of "tags." You are not just putting tags next to text to make it look a certain way, but putting content into containers, and putting these containers inside proper containers.
The HTML Hi document
We saw in the Hello, World lesson, this very simple HTML document:
|
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN"> <HTML> <HEAD> <TITLE> A Small Hello </TITLE> </HEAD> <BODY> <H1>Hi</H1> <P>This is very minimal "hello world" HTML document.</P> </BODY> </HTML> |
Notice how this document is structured by elements. The outermost element is the HTML element; it starts with the <HTML> start tag and ends with the </HTML> end tag. Everything in between is inside the HTML element.
Similarly, the HEAD element starts with the <HEAD> start tag and ends with the </HEAD> end tag. Everything in between is inside the HEAD element.
In particular, there is a TITLE element inside the HEAD element. The TITLE element starts with the <TITLE> start tag and ends with the </TITLE> end tag. Everything in between is inside the TITLE element. Inside the TITLE element is the string of characters "A Small Hello."
Inside the BODY element, we have two elements H1 and P. Inside the H1 element, we have the string "Hi". Inside the P element, we have the string, "This is very minimal "hello world" HTML document."
These elements fit inside each other according to the rules of HTML syntax. The start and end tags are not there to make the text appear a certain way, but to wrap up content of the document in its logical identifiers.
Don't let the fact that some HTML elements don't have a required end tag fool you--there are implied end tags to these elements, and therefore these elements have a definite "end" so that they can be placed entirely in another element.
Analogy: My backpack
Let's say I take my backpack to school. My backpack has two compartments: a main compartment and a front compartment.
I bring a lunch to school. The lunch consists of a sandwich, an apple, and a candy bar.
I also bring my handheld personal computer to school.
How am I going to get on the bus to go to school?
Holding the sandwich, candy bar, and apple in my hand with the computer, carrying the empty backpack?
Of course not. I package things.
I put the sandwich inside a plastic bag. I wash the apple and put it inside a plastic bag. The candy bar has its own wrapper, and I leave that on. I put the plastic bags containing the sandwich and the plastic bag containing the apple and the candy bar wrapper containing the candy bar into a paper bag.
I put this paper bag with its contents inside the front pocket of my backpack.
I put my handheld computer in a plastic case (to protect it from possible rain, snow, or jostling). I put the case containing the handheld computer in the main pocket of my backpack.
I close and fasten the main and front pockets of my backpack.
I am ready to carry the backpack to school, with my contents packaged inside of it.
Why containers are so important
Containers are the basis for HTML documents because they define a logical structure for a document. If the purpose of HTML were to just mark up the appearance of a document, HTML would be a much simpler language, but it would be less flexible and not as machine-readible.
Knowing the container concept is key to your proper construction of WWW documents. Your ability to put content into HTML elements and put these elements inside the proper elements is key to your document's proper syntax.
As we get into XML and XHTML, we'll see how this container idea can be generalized, so that logical structures in a document can be powerfully used for many kinds of automated tasks, not just document display.
For example, if I packed my backpack as described above, and I had my own kind of markup language defined by XML to describe my PACK element and PAPERBAG, CASE, COMPUTER, PLASTICBAG, SANDWICH, APPLE, CANDYBARWRAPPER, and CANDYBAR, I could create a document which represents my PACK. If other people used this same language, I could create an automated routine to look in all the PACK elements to find a PLASTICBAG containing an APPLE or a SANDWICH.
Exercise: Tell me how content in an HTML document gets "wrapped up"
Describe verbally the wrappings of HTML elements to have an HTML document display "Hi" in a browser and "Hey" in the title.