HTML, A Sideway Tree

A Data Structure for Understanding HTML Elements

Pan

Published in

Code Temple

2 min readJul 26, 2019

Why is HTML syntax important?

HTML is a programming language for Frontend Engineers. It is important to write HTML with the correct syntax. If any mistakes happen during coding, it would be easier to re-read the code to find the error.

What is HTML syntax?

The easiest way to remember HTML syntax is to compare it to a tree. Like a real tree which has only one root, HTML has only one root element.

Also, HTML is comparable to a real tree because it has branches that continuously keep branching outward. For example, in HTML there are only two branches that branch from the root element. From there, other branches can branch infinitely. These two branches are known as the children of the root element.

HTML => two branches => infinite branches

It is important to note that the root element only has two children and any children of HTML only has one parent. A tree data structure can have an infinite number of children. When a child has more than two parents, it is not a tree. It is known as a graph.

The Children of the Root Element

Again, the root element has only two children. These two children are known as the Head element and the Body element (or nodes).

HTML => Head + Body

The Head element is a crucial part of HTML because it provides the meta data information such as the author, date, time and title. The Body element is also crucial because it provides the actual content such as the words and pictures.

Like a well grown tree, the Head and the Body elements should have many branches to support the meta data and content.

Conclusion

In conclusion, turn the tree sideways and you will see the root element on your left side and the branches branching out towards the right side. What you are looking at is the HTML syntax code!

<html> 
  <head> meta data </head>
  <body> contents </body>
</html>