Posts
Th e best way to understand the document tree, document hierarchy, and the
relationships between elements is to see them. So let’s start with the code:
<html>
<head>
<title>Mikey Spillane vs. Mike Hammer</title>
</head>
<body>
<h1>Mikey Spillane vs. Mike Hammer</h1>
<p>Who is the toughest, smartest, and most steely? <em>You</em> get
. to be the judge by taking this <a href="survey.html">survey</a>.
. </p>
<p>Next month’s survey: Sir Arthur Conan Doyle or Sherlock Holmes?
. <img src="doyle.jpg" alt="Doyle vs. Holmes"></p>
</body>
</html>
We can illustrate the document tree visually:
In this example, the html tag is the main ancestor of all of the tags in the
document. In the <body> of the page, the <h1>, <p>, <img>, <em>, and <a> tags
are all descendants of the <body> tag. The <h1> and <p> are siblings, and the
<em>, <a>, and <img> are descendants of one of the <p> tags.
Did you notice the pattern? A descendant element is nested inside another
element, which is its ancestor.
Let’s delve deeper into element relationships to get the full picture of the
“family tree.”
An ancestor is any element that is connected to other elements but is higher
up the document tree, no matter how many levels up. For example, in the
document above, both the <html> and <body> tags are ancestors of the <p> tag.
A descendant is any element connected to an ancestor, but lower in the document
tree, no matter how many levels down. In our example, the <em>, <a>,
and <img> are descendants of the <body> tag.
A parent is an element directly above a connected element in the document
tree. A parent element is also an ancestor, but an element can have ancestors
that are not its parents.
A child element is directly below a connected element. A child is a descendant,
but an element can have descendants that are not its children.
Sibling elements share the same parent, and are on the same level as each
other in the hierarchy.
0 comments:
Post a Comment