this HTML thingie can easily be viewed as a tree because that’s what it is. It has a root, a trunk and many many branches. As many as we want, with many many leaves, as many as we want. Some branches are better at different things such as providing shade, collecting sun rays allowing us to build a swing chair or a tree house.
Let’s think about it a bit. When the tree is really really small, it has only 1 branch and 1 leaf. When it grows a bit it becomes thicker and it gets to have a second branch. Right now we can call the first one a trunk.
The leaf is what we see on the screen. The branch is what is behind the leaf, in the back, which is not visible. Pretty much like in this image.
The branches start from a bigger branch and end with a leaf. In HTML the tags start with <, then comes the name of the tag and then comes >. Inside the tag we have our leaves or other branches. We can have anything we want here. Then we must specify when the tag finishes. To finish it we have </, then comes the tag name, then comes >.
The biggest problem in translating a tree on a piece of paper is the lack of depth. So we need to read everything from bottom left to top right and from bottom to the top.
Let’s see again the slightly modified example from the previous lesson:
First we have the “html” tags that define where the page’s code starts and finishes. We need this because what is outside of it is not taken into consideration.
Think of the doctype as the root of the tree. It is what it makes it alive and defines it as it is. If the root says it is HTML, that’s what the browser will draw. You can read more about what the root’s options here .
Then comes the “head” element which can be seen as what’s beneath the earth but on top of the root. It can tell the tree about some characteristics but it is not the root which defines the tree.
Right after “head” comes “body”. Body is the trunk. Inside the body we find everything else.
Inside the body, as we look from left to right, we have a branch. Our branch holds a leaf. We only see the leaf but we should have something to link it from the trunk. This linkage in our case is the “div” tag.
Inside the “div” tag we have our very own text. This text is the only thing visible to the user.
As an exercise try to look at a tree outside. Comment how you would imagine the HTML structure and I will help you out getting it properly.
Have a good evening,