HTML, DOM, and Elements

The "M" in HTML stands for markup which means HTML is a language of tags to "markup" content to give it meaning. This course assumes you know the very basics of how to make an HTML tag, but don't worry if you don't. We have a free Absolute Beginner course just for this sort of thing.

Some of you are learning CSS and you already know how to write HTML well because perhaps you're a programmer in other languages that deal with HTML. Or perhaps you're familiar with XML, or you did HTML a while back and you're using this course to brush up on HTML and CSS again. Either way, it's very important to understand how HTML turns into what is known as "the DOM" and how tags become "elements".

Getting Started

In the first video above, I get you started on writing HTML and rendering it in the browser. It would be a very good idea to follow along with all lessons by writing the code yourself and following what I'm doing. I can guarantee this will help you learn this stuff much better than just reading through the material and watching the videos without coding it yourself.

Imagine you wanted to learn to play the guitar. Could you just read about it and watch videos on it forever and then say you know it? You have to practice it, even if what we're doing is simple at first.

There's not a lot of code that we start with in the video, but just in case you want to start with the exact same starting point as I had, here are the files:

You can also use Codepen to author HTML, CSS, and JS directly in the browser. This would be the faster way to practice things we're learning. If you create an account you can even save your "pens" as an archive of things you've learned.

HTML is just the blueprint

Key Concept

HTML is just a plaintext file that we give to a browser to tell it what boxes to make.

It's like a blueprint for making a house and the browser is the contractor who takes the blueprint and makes the real thing from it (the visible website).

Key Concept

The HTML instructions are being turned into boxes which we call elements.

Elements are the end result of tags

When the HTML tag instructions get rendered, each tag becomes an element. HTML tags create boundaries around your content:

<p>This is my paragraph</p> This is outside the paragraph

The <p> is the beginning of the boundary and the </p> is the end of it.

The corresponding element made from this paragraph "tag" creates a rectangle on the screen which we might refer to as a box that wraps around the content within. We even sometimes call elements "containers". Mozilla once made a tool to visualize in slow motion how elements are represented as boxes when rendering is taking place:

If you watch the video, it probably seems pretty fast but consider that in real-time, all of this happens in milliseconds. So in reality, this video is in slow motion.

You can see that boxes are even nested inside other boxes. That's because HTML tags nest inside other tags. Nesting HTML becomes nested elements. Here's a quick example of an article tag that nests paragraphs inside it:

<article>
  <p>First paragraph</p>
  <p>Second paragraph</p>
  <p>Third paragraph</p>
</article>

Does it seem like "element" and "box" are interchangeable terms?

In CSS there's a set of rules called the "Box Model" which we'll review later in this course. When it comes to the Box Model, the term "box" is used to describe how elements are shown to us visually. It would be more accurate to say the things that HTML tags "make" are elements, but elements "look like" boxes.

Here's a basic CSS example of stylizing all div elements on the page to be red. It would be more correct to say we are looking for div "elements" to stylize and you wouldn't say "div boxes". We also wouldn't say "this CSS is stylizing div tags" because technically, the tags which were an HTML thing aren't around anymore since each tag became an element.

div {
  color: red
}

When I'm talking about something more visually though, I might say "box" instead. Usually web developers (including me) will use these words slightly interchangeably, but this explanation hopefully helps you understand the nuance.

DOM

Key Concept

Collectively, the entire group of elements for the page being built is the "DOM".

Technically, the DOM is an API for JavaScript to be able to manipulate the elements. If that didn't make any sense now, it's not too important yet. Just know that sometimes we refer to all the elements that are on the page at any given time as being "the DOM", which stands for Document Object Model.

HTML vs XHTML

Years ago, when the W3C and WHATWG standard bodies were debating what direction to take HTML in, the W3C wanted to make HTML adhere to more strict rules since HTML was fairly loose about letting developers do incorrect HTML. They wanted HTML to be more like XML in terms of XML's strict rules. This new strict version of HTML was called XHTML (the hybrid of HTML and the strictness of XML).

Key Concept

In HTML, most tags have two parts: the opening tag and closing tag like <div></div>. Sometimes tags are "self-closing" tags like the image tag: <img>

In other words, self-closing tags just use one tag to make the element which serves as the opening and closing at the same time:

<img src="picture.jpg" alt="A picture of me">

Ultimately, XHTML never took off and the direction of the web went more in the favor of what WHATWG wanted which was HTML5. If you skipped this part of the first lesson, we did a backstory on standards and how there was a bit of a mess with this whole battle over HTML and XHTML back in the early 2000s.

If XHTML had taken off, we would have to be more strict and self-closing tags would be like this:

<img src="picture.jpg" alt="A picture of me" />
                                       Look 👆🏻

Notice the forward-slash at the end of the tag. In XML, all self-closing tags require a forward slash at the end of the tag. Even though XHTML never took off, browsers were implementing it as an optional thing and to this day you can still do XHTML tags if you want.

It seems a little silly to have a huge debate over whether to have a forward-slash or not. But understand this wasn't the only thing that XHTML brought to the table. This is just a small example which also helps you understand why you'll see some examples of HTML with or without the forward-slash self-closing tags. The debate over making HTML more strict like XML had to do with a lot more stuff that we don't need to get into because XHTML never happened. Today, we just have some of the baggage left over from it.