The DOM

Last Updated: February 4, 2023

The DOM

The Document Object Model, the foundation of all HTML pages

So now that you know what HTML elements are, and you know how write one, let’s look at a massively important aspect of HTML, which is the relationship between elements.

The same way you can put text inside your elements, like we did with the <p> tag, you can also put other elements inside one another. And that’s a very important feature of HTML. Specially when it comes to designing layouts. An element hosting other elements, is called a parent, what’s inside it is a child element, any elements sharing a parent are called siblings. I think that’s pretty self explanatory. This whole family tree of elements is sometimes referred to as the DOM. The DOM is a powerful place where you can add and remove and manipulate HTML elements.

In fact, in a real HTML page you don’t just start adding paragraphs and headers and those things, there are a couple of main elements you need to include first. The main one is <html>. This sits at the root of the file, meaning this is the first ancestor, the parent of all elements to come.

<html>
    Everybody else goes in here...
</html>

Inside <html> you then have <head> and <body>.

<html>
    <head></head>
    <body></body>
</html>

<head> includes the stuff that you don’t see. Just like your head, nobody can see what's in it but there's a lot going on. In HTML this is information regarding the page, meta data for search engines, tags that help you load JavaScript and CSS like, we’ll get to those later. What you probably care about right now is the <body>. That’s where you put all your content including the visual elements we’ve been talking about. Like <p> and <h1>. One element can include many other elements inside it. Let’s add a few to our body.

<html>
    <head></head>
    <body>
        <h1>Pasta Ingredients</h1>
        <ul>
            <li>Flour</li>
            <li>Cheese</li>
            <li>Some other stuff...</li>
        </ul>
    </body>
</html>

So the <li>s are children inside the <ul>. The <h1> and <ul> and are siblings and they’re both children of the <body>. This parent/child relationship becomes extremely important when designing complicated pages like the ones you see on the internets.

So before you decide what tags you should use, you should really think about the relationship between the elements of your page, and that’s because different tags render differently. In particular how much space do they take and how do they relate to their neighboring parent or siblings.

Next we’re gonna talk about a massively important aspect of HTML elements, their display type, which dictates how much space elements take.