Have you ever seen a really tall and wide tree you couldn't wrap your arms around or even see the top of? Those trees have ten, twenty, thirty, or even a hundred years old and they've grow an ecosystem around them that tells a story. As well as trees, some websites have been growing in content and size for a long period of time. You may think that I could correlate the tree's and website's life time span, but there is a nature given feature in trees that developers have imported to creating websites and that is the topic of this article.

Let's talk about branches

Picture of a tree branch. Photo by Ravi Roshan on Unsplash

Tree branches resemble human arms. It may look like they're trying to grab something or touch another tree, but in fact, those branches have way more sophisticated purposes. Trees mainly use branches to host leaves that will gather all of the tree's ecosystem energy through the photosynthetic process.

But how can we explain the way branches are formed? Their physical aspect appears to be random, —you can't really guess it— but biologists tell us that branches grow in an optimal way related to gravity or the wind or the sunlight. But where do the developers enter into this picture? Moreover, what do websites have to do with it?

In the early stages of the World Wide Web, or WWW, we needed to create a way for computers to talk to each other. So, in the early 90's HTTP was created. It is a formal protocol that explains how we are supposed to send information through the internet. It explains how we can talk, but how could we structure information on websites in a visual form? That's when HTML was created.

HTML, one more acronym for you

HTML stands for HyperText Markup Language. However, you don't really need to understand what it means, at least for now. HTML is a type of file that describes what is in a website and how it is structured. I find it easier to understand by looking at an example:

Serenpit landing page screenshot

HTML example

The above HTML example renders into the screenshot on top of it. HTML is basically a group of opened(<>) and closed(</>) tags which have their own interpretation on a website. For example, the h1 tag represents a heading text of size 1. As with the h1, the "h" in h2 also stands for heading, but the "2" means that the text will be smaller. And to no one's surprise, the <button> represents a button!

Each browser decides how they will render each tag, even if it is the same written HTML. That is why a website sometimes looks different in Safari than in Chrome. Styling and organizing the information on websites will be a topic for another article. What we are going to dive into now is how tree branches relate to this topic.

Tree: a data structure

Developers have imported the concept of branches into a data structure. Basically, we created a visual concept that can be represented in code, but that creates new relationships between information and that can be visual represented in the form of a tree.

Representation of a binary tree

The dots and lines above represent a tree data structure. The 1 is the root of the tree, each arrow connecting two circles is a branch, and the circled values are called a node. However, that are a lot more concepts created upon the tree representation:

• Root: 1 is the root of the tree.
• Parenting: 1 is a parent of 2 and 3.
• Neighbors: Parent or child of a node.
• Leaf: a node that has no children.
• Distance: the number of edges along with the shortest bath between two nodes. For example, the distance between 1 and 11 is 3. You count the number of arrows: 1 -> 2 -> 5 -> 11.

There are much more concepts, however, they aren't important for this article. It's also relevant to note that types of trees exist. For example, the tree above is a Binary Tree: a tree that each node has a maximum of 2 children.

HTML as a tree data structure

There are tons of use cases for a tree data structure in HTML, but we are going to focus on traversing. Traversing is a technique where you walk through some nodes in a tree, following some steps.

Abstraction of an HTML tree

For example, imagine that you are at the root of the tree above, i.e., are in in the topmost node, the first <div>. In this example, our goal is to find the tag <a>. One constraint for finding a tag in a tree is that you don't know beforehand where all of the tags are. It is almost like playing hiding and seek, you have to guess where the goal is and try to find it.

Abstraction of an HTML tree with a fog blocking your vision

When you are walking through the node you have access to the information of how many children you have and their content. But the problem relies on finding the information of your grandchildren and great-grandchildren. It is like there is a fog blocking the vision beyond your children. Where could the tag be: right after the leftmost children? or the middle ones? should we look into all of the nodes?

One way to solve this is by traversing the tree. Here are some options to do that:

• Go in-depth: you start going to a node child, if there is the data you are looking for you stop, if not you continue to go looking down in the child of the child path until you find it. If you don't find it, you start to come back to the brothers and sisters of the node you already visited.
• Go in-breath: you start talking to each one of the children at a time, i.e., you are going level by level of the tree until you find your goal.
• Vá fundo: você começa a procurar uma criança, se há os dados que você procura você para, senão continua a trilhar esse caminho até encontrá-los. Se você não encontrar, você começa a voltar para os irmãos e irmãs do nó que você visitou.
• Inspire: você começa a falar com cada uma das crianças de cada vez, ou seja, você vai nível por nível da árvore até encontrar seu objetivo.

But, wait. I still don't get it why is this important.

With the connections between the nodes, the HTML elements, besides having their own tag and value, now have a relationship between them.

This relationship helps developers do a lot of stuff in the long run. For example, now we can difference which button was clicked by looking at who is its parent. Or we could set every child of a text to be the color pink. Or we could even stylize the text of an HTML's children to be all in capslock. Sky is the limit.

This organization will give a lot of power to Javascript, a web scripting language, that takes care of interactions, animations, and other stuff that happens when you browse the web.

Are developers still using this traversing technique?

Nowadays, there are many frameworks that make the developers' life easier. We don't necessarily need to understand how everything works, but we can't neglect the importance of it. If you want to create something new or dive deep into how things are built, for sure you will stumble into some of the HTML data structure.

Those frameworks help you update information on the screen, animations, interact with databases, and many other things. They are mostly written in Javascript, that scripting language, and open-sourced.

If this is your first time here, feel free to read other topics and use our serendipity roulette. It will take you through the branches of our blog and a realm of possibilities.