Understanding Elements and Tags in HTML

Kickstart Your Career: Frontend Development for Absolute Beginners! | Lesson 3

The Video for this Premium Course lesson is currently being recorded. For now, enjoy early access to the transcript!


Welcome back to "Kickstart Your Career: Frontend Development for Absolute Beginners"! In this lesson, we're going to delve deeper into the fundamental building blocks of HTML: elements and tags.

What are HTML Elements and Tags?

HTML documents are made up of elements, which are the individual components that define the structure and content of a webpage. Each element is enclosed by opening and closing tags, which tell the browser how to interpret and display the content. There are some tags that are considered self-closing. We will learn more about those in a minute.


Tags are the fundamental units of HTML syntax. They consist of angle brackets (< and >) and define the beginning and end of an element. Tags are always enclosed in angle brackets, and most tags come in pairs: an opening tag and a closing tag. You already saw an example of this in the last lesson when you created your first Paragraph elements in HTML!

<p>Remember me? I am the Paragraph element with opening and closing tags.</p>

Self-Closing Tags

In HTML, there are certain elements that are considered "self-closing" or "void" elements, which means they don't require a closing tag. Instead, they end with a slash before the closing angle bracket. Here are some examples. We will learn more about these HTML elements in future lessons:

<img src="image.jpg" alt="Description" />
<input type="text" name="example" />
<br />
<hr />
<meta charset="UTF-8" />

These elements do not have any content inside them, so they do not require a closing tag. This is why they are considered "self-closing."

When elements do not contain anything, the closing tag can be omitted and you simply add the / at the end of the singular tag. For example, <hr />, which adds a horizontal rule to the page.

HTML Elements

Elements, on the other hand, consist of tags and the content they enclose. They represent the building blocks of a webpage and define its structure. Elements can contain other elements, creating a hierarchical structure known as the Document Object Model (DOM). We will learn more about the DOM in future lessons. For now, just remember that your HTML Document is made up of a hierarchical structure of elements. These elements are usually made up of a pair of tags (opening and closing) and the content they contain (like the text within a set of <p></p> tags.

Wrapping Up

That's it for this lesson! In the next one, we will learn about some of the most important elements in HTML <html>, <head>, and <body>.