HTML Lesson 2: Tags

What is a tag? Tags are used in HTML documents to instruct the web browser on how to render and display the content of a web page. There are three types of tags: opening tags, closing tags, and empty (also called self-closing) tags.

(Note: In the following examples, as well as in lessons going foward, opening and empty tags will be colored blue. Closing tags will be colored red.)


Let’s look at an example of an opening tag:

<p>

This tag, <p>, is the “paragraph” tag. It creates a paragraph. The text you're seeing on the screen right now was made with this paragraph tag. If we were to try and create a paragraph from only this opening tag, like this;

<p>Hello

It would create a paragraph, but everything else added after it would also be treated as a paragraph. Why? Because this tag needs a matching closing tag. Closing tags are structured almost the same as opening tags, but they have one key difference: they have a forward slash (/) after the left angle bracket sign (<) like so:

</p>

Now that we know we need a closing tag at the end of our text, let’s try closing that element properly:

<p>Hello</p>

If we were to run this above element within the <body> element of an HTML document, we would see “Hello” display on the page. Here are some more examples of matching opening and closing tags:

<html> and </html>
<h1> and </h1>
<body> and </body>

Some tags, called empty tags, don’t need closing tags. Don’t worry too much about this yet, but here’s an example with the empty tag <br> which functions as a line break:

First line<br>
Second line<br>
Third line<br>

Hopefully you now have a better understanding of tags. In the next lesson, we’ll learn about elements.

Lesson recap:

  1. Tags instruct the web browser on how to display visuals properly.
  2. There are three types of tags: opening tags, closing tags, and empty tags.
  3. All tags except empty tags need a matching closing tag.
In the next lesson, we will learn what elements are and what classifies as an element.