|
|
|
In recent years, HTML has changed, transformed from a simple text markup language into the display language for an object-oriented programming development environment. As a consequence, it is important that you understand a few object-oriented programming terms, and how these terms relate to your coding practices in HTML and XHTML.
An HTML tag marks information; opening and closing tags form a container to hold that information. Think of an HTML tag as a box, then, with an opening tag as a lid, and the closing tag as the box bottom. You may place many kinds of information into the tag/box thus created, including other tags.
When you place a tag within the bounds marked by another tag, you are said to NEST the first tag within the second tag; you would do this just as you would NEST one box inside another, or one of those wooden russian doll inside another, etc.
Here is a B (bold) tag NESTED within a P (paragraph) tag:
<p>Here is a <b>bold</b> word nested within a paragraph.</p>
This nesting indicates something called a "parent-child relationship" between the two tags. In this case, the P (paragraph) tag would be the PARENT object, and the B (bold) tag would be the CHILD object, because the B tag is nested within the P tag.
Here is another example of a parent-child relationship:
<head> <title>My Page</title> </head>
The HEAD tag is the parent object, and the TITLE tag is the child object.
In the same way, a P (paragraph) tag, nested within the BODY tag of an HTML page, would be a child of the BODY parent.
Look at this example:
<body> <p>Here is one paragraph.</p> <p>Here is another paragraph.</p> </body>
In the above example, I have two paragraphs nested within the BODY. Both of these paragraph objects are children of the same parent, the BODY. Neither of these paragraph objects is a child of the other. These two paragraphs, then, are SIBLINGS.
Here is another example:
<body> <p>Here is a <b>bold</b> word in a paragraph.</p> <p>Here is another <b>bold</b> word, and another <b>bold</b> word, in a paragraph.</p> </body>
In this example, I have a B (bold) tag which is a child of the first P (paragraph) tag. I have two B (bold) tags which are children of the second P (paragraph) tag. The two B (bold) tags in the second paragraph would be siblings, since they are children of the same parent. The two P (paragraph) tags would be siblings, children of the same BODY. The BODY would be considered the ANCESTOR of all the B (bold) tags; there is no official "grandparent" or "greatgrandparent" relationships, just ANCESTORS. By the same token, there are no official "cousin" relationships between the B (bold) tag in the first paragraph, and the B (bold) tags in the second paragraph.
The only important relationships in object-oriented programming, then, are PARENT, CHILD, SIBLING, and ANCESTOR.
Because HTML/XHTML is the display language for a greater, web-based, object-oriented programming development environment, maintaining clear parent-child-sibling relationships between HTML elements on a page of code is absolutely essential.
The following code would be WRONG:
<p>Here are <b>bold words.</p></b>
Are the HTML objects in the above example siblings, or do they have a parent-child relationship? It is impossible to tell because of the improper nesting between the tags.
If you think of your HTML tags as boxes, with lids and bottoms, you will remember that you mustn't mix up one box's lid with another box's bottom; they won't work together properly.
Here is a common mistake:
<html> <head> <title>Reba's Page</title> <body> </head> <p>Here is a paragraph.</p> </body> </html>
Is the BODY supposed to be a child of the HEAD? Is the HEAD a child of the BODY? The relationships are muddied by the transposed tags.
Here is another common mistake:
<html> <head> <title>Gomer's Page</title> </head> <body> <body> <p>Paragraph!</p> </body> </html>
Why are there two body tags? And only one of them is closing! What is the other one for? It seems obvious that such a thing would be ridiculous, but I've seen this many many times.
Here is the corrected example:
<html> <head> <title>Gomer and Reba's Happy Page</title> </head> <body> <p>Here is a paragraph of text with a <b>bold</b> word in it.</p> <p>This page shows clear parent-child relationships! Hallelujah!</p> </body> </html>
No matter which tags you're using, it's important that their parent/child/sibling relationships be clear; to ensure clarity, tags MUST be nested in a rational manner.
Well-Formed Example:<p>Here is a <b>boldness...</b></p>
I opened the B tag within the confines of the P tag, which meant that I also had to CLOSE the B tag within the confines of the P tag! Always make certain that your parent-child relationships are clear!
Properly nested tags and parent/child/sibling relationships (also called the parent-child hierarchy) are a part of properly formed HTML and XHTML syntax, and are vital to the operation of many technologies, including CSS, the DOM, DHTML, XML, etc.
 |
 |
Copyright © 2001 Michael Masumoto. All Rights Reserved.