July 22, 2012

Document Hierarchy in HTML


Elements in HTML are placed one below the other in a hierarchical order. Each element is somehow dependent on the other in the following five ways like Ancestor, Descendant, Parent, Child or Sibling.

Ancestor

Ancestor is an element that includes other element(s). Example, the body tag includes the h1 and p tags. Here, the ancestor of h1 and p tag is body tag. Like this a tag that includes other tags within are called ancestors.

Descendant

Descendants are just opposite to ancestor tags. When the body tag includes the h1 and p tags, we say h1 and p tags are descendants to the body tag.

Parent

Just like ancestors, a parent is referred when it is the closest ancestor. Which means, p tag is the parent of em tag, but body tag cannot be the parent of em tag because it is not the closest ancestor.

Child

As decendent is the opposite of ancestor tags, a child is an opposite to the parent tag. A child is referred when it is directly enclosed by another tag. Here the h1 and p tags are child of head tag, but em is not.

Sibling

Tags that are children of the same tag, which is adjacent to each other are called Siblings. Here the h1 and p tag are siblings as both have the same parent body.

No comments:

Post a Comment