Many, especially non-English speakers get confused with what does Ancestor, Descendant, Sibling, Parent and Child mean. Here are explanations with descriptions and example diagrams with html tags and people hierarchy so that is easier for less technical people to understand it.
An ancestor is any element which is connected further up in the hierarchy tree – no matter how many levels higher.
An ancestor is a parent, grandparent, great-grandparent, and so on.
Grace, Alice and Jake are ancestors of Luca
Caitlin and Jake are ancestors of Ben
Jake is an ancestor for both Luca and Ben
Jake is the ancestor of all other people in the tree.
p, div and body are ancestors of strong
div and body are ancestors of ul
body is an ancestor for both strong and ul
body is the ancestor of all other elements in the tree.
A descendant refers to any element that is connected lower down the hierarchy tree – no matter how many levels lower.
A descendant is a child, grandchild, great-grandchild, and so on.
Grace has one descendant – Luca
Caitlin has 4 descendants – Ben, Megan, Eva and Harry
Sean has no descendants
All people in the tree under Jake are his
p has one descendant – strong
div has 4 descendants – ul, li, li, li
h2 has no descendants
All elements in the tree under body are its descendants.
An element which is directly above and connected to an element below in the hierarchy tree.
Each element has only one parent – except for root (top most element). It does not have parent as it does not have any element linked above it.
Caitlin is a parent of Ben
Jake is a parent of Alice
div is a parent for ul
body is a parent for div
An element that is directly below and connected to an element above in the hierarchy tree.
Element can have 0 or many child items.
Ben is a child of Caitlin
Alice is a child of Jake
ul is a child for div
div is a child for body
A sibling is an element which shares the same parent with another element.
Siblings share the same parent.
Adam, Grace, Jay and Seab
are siblings as they share the same parent
has no sibling as his parent
does not have any other child.
h1, p, img and h2 are siblings as they share the same parent div
ul has no sibling as its parent div does not have any other child element.