Boilerplate code

Here is the boilerplate code again for reference.

Tags

The basic building blocks for HTML code are called tags. Tags are all of the things you see in the page wrapped in angle brackets.

You’ll notice some tags have a forward slash in them and some don’t.

Opening tags

The tags without a forward slash are called opening tags, and they’re usually used at the beginning of a line or at the beginning of a section. Some examples are the head tag on line 3, the title tag at the beginning of line 7, and the body tag on line 9.

Closing tags

The ones with a forward slash are called closing tags and they mark the end of a line of code or the end of a section of code. Some examples are the head tag on line 8, the title tag at the end of line 7, and the body tag on line 11.

Notice the forward slash is always after the opening angle bracket.

Content and elements

Many opening and closing tags will have text between them. We can see an example of this with the title tags. In between the tags is the word Document.

The text between tags is called content. The tags plus the content are called elements, so we would refer to the whole thing on line 7 as the title element.

Nested elements

Some elements just contain other elements. An example of that is the head element. It doesn’t contain any text directly, it just contains all of these other elements here.

We call the elements on the inside nested elements.

You’ll notice the nested elements are indented by 2 spaces. It’s considered a best practice to indent your nested elements because it makes your code easier to read.

A lot of times VS Code will automatically indent your code when necessary based on the surrounding code, so it’s not something you always have to do yourself.

Technically you don’t have to indent your code, but if you don’t, it’ll be harder to read, for you and for other developers, so I recommend always following this practice.

End

There are a couple of other terms we’ll discuss in the next lesson.