Representing structure as a picture

image of a tree representation

We can represent structure pictorially by showing how pieces are broken into smaller pieces. Using our example of a parcel of land, we can use a diagram to represent its structure. It is important to note that here we are showing only organizational structure, not geography. That is, our diagram does not indicate where in the parcel the various pieces are located.


Glimpse of the future

In the upcoming module on position, we will discuss how location is and isn't related to the structure of a web page.

Each piece of the parcel of land can be depicted as a circle, or node, with all the nodes together forming a tree. The arrows between nodes, or edges, show the relationship between a bigger piece, such as a park, and the smaller pieces within it, such as areas for picnics, sports, and playgrounds.


Borrowing terminology from family trees, an arrow points from a parent to its child. For example, the park node is the parent of the picnic node. The picnic node, sports, and playground nodes are all children of the park node. Since the picnic, sports, and playground nodes all have the same parent, we say that they are siblings.

By extension, the parent of a node, or the parent of the parent, or the parent of the parent of the parent (and so on) is an ancestor of a node. The picnic node has both the park node and the parcel node as ancestors. Any node that is a child, or child of a child, or child of a child of a child (and so on) is a descendant. The parcel node has all other nodes in the tree representation as descendants.

tree showing parent and child
tree showing ancestor

tree showing leaves and root

Even though trees in nature grow in the opposite direction, a node without a parent is the root and a node without a child is a leaf. In our example, the parcel node is the root and the nodes picnic, sports, playground, high school, primary school, housing, grocery, and pet are all leaves. A tree will never have more than one root, and each node that is not the root must have exactly one parent.