HTML elements vs. HTML tags

September 10, 2024 (modified on March 14, 2025)

I’d like to address one of the most fundamental and common misconception that creeps up in our discussions about HTML. That is, the difference between an element and a tag.

For visual purposes:

Here’s an HTML element: h1.
Here’s its corresponding opening tag: <h1>.

Noticing any glaring difference here?

Answer

The latter is wrapped inside a set of angle brackets 🤯

You can think of an element as an entity on a web page; it’s essentially a component that’s been rendered by the browser.

In order to create an element, you must first add its corresponding tag(s) to the HTML document. Certain elements will require both an opening and a closing tag, while others only need a single tag (also called “self-closing” tags).

<!-- This produces an `h1` element -->
<h1>Hello world!</h1>

<!-- This produces an `img` element -->
<img src="./images/cat.jpg" alt="Classic example" />

When parsing an HTML document, browsers will identify which elements it needs to create, along with the corresponding text nodes, based on these tags.

Essentially, tags are the blueprint while elements are the end product that you see.

Tags