HTML is easy.
September 10, 2024
A senior dev
I’m sure you’ve heard that statement a thousand times before. But in reality, HTML is often easily misinterpreted due to its apparent simplicity.
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 the visual folks out there:
- 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. It’s as simple as that!