HTML: Tag vs. Element

In a previous post, we looked at semantic vs. non-semantic HTML elements. Now, it’s common for web developers to use HTML element and HTML tag interchangeably. But are they really the same thing? Or is there more than meets the eye?

Let's decode this lingo!

---

HTML Tag

A tag is used to create an HTML element in source code. When we say tag we must refer to the opening <tagname> or closing </tagname> syntax used in HTML documents.

Tags come in pairs for most elements, with an opening tag marking the beginning of the element and a closing tag marking the end. However, some tags are self-closing, such as <img /> or <br />, which do not need a closing tag.

HTML Element

An HTML element is a DOM element. It refers to everything from the start tag to the end tag, including the tag itself, its attributes, and the content in between.

For example, an element can consist of:

• the opening tag: <p>
• the content: Hello, World!
• the closing tag: </p>

So when you write <p>Hello, World!</p>, you're creating a paragraph element.

Elements can also be nested, meaning you can have elements within elements, and they can contain attributes that provide additional information about the element.

Example
Let's look at an example to illustrate the difference:

<a href="https://www.example.com">Visit Example.com</a> 

The HTML Tags include:

• the opening tag <a> (which also stores the element's attribute href with its corresponding value).
• the closing tag </a>.

The HTML Element is the entire line of code, including

• the opening tag <a>,
• the attribute href="https://www.example.com",
• the content Visit Example.com, and
• the closing tag </a>.

Conclusion

In HTML, the terms "element" and "tag" are related but have distinct meanings:

• a tag is a part of an element that defines the element's type and boundaries
• an element includes the tags, attributes, and content.

Source: MDN (see link below)

Resources

MDN Definition of an HTML element

MDN Definition of an HTML Tag