DEV Community

Cover image for HTML: Tag vs. Element
Corina: Web for Everyone
Corina: Web for Everyone

Posted on • Updated on

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!


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.

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

<a href="">Visit</a> 
Enter fullscreen mode Exit fullscreen mode

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="",
  • the content Visit, and
  • the closing tag </a>.


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.

An illustration showing the anatomy of an HTML element. It displays a paragraph element with an opening tag <p>, an attribute class="nice", enclosed text content "Hello world!", and a closing tag </p>. Above each part, labels indicate "Opening tag", "An attribute and its value", "Enclosed text content", and "Closing tag"
Source: MDN (see link below)


MDN Definition of an HTML element

MDN Definition of an HTML Tag

Top comments (0)