Parent Child Relationships in the DOM

Following the metaphor of a family tree, let’s define some key terminology in the DOM hierarchy:

A parent node is any node that is a direct ancestor of another node.

A child node is a direct descendant of another node, called the parent node.

Knowing these terms will allow you to understand and discuss the DOM as a tree-like structure. In fact, you will also see this terminology used when referring to the nesting structure of HTML code. Programmers refer to elements nested inside other elements as the children elements and parent elements respectively.

Instructions

1.Add the appropriate HTML elements to the index.html file so that it reflects the tree-diagram on the far right.

Start by adding the <title> element. Make sure to nest the tags correctly, so that the nodes follow the illustrated parent-child relationships.

2.Add the <div> element to index.html so that it reflects the DOM diagram to the right.