What Is An HTML Tag Versus an HTML Element?

There is a Difference Between These Two Terms

HTML question mark
HTML question mark.

Web design, like any industry or profession, has a language all its own. As you enter the industry and begin speaking to your peers, you will undoubtedly run into a flurry of terms and phrases that are new to you, but which flow of the tongues of your fellow web professionals. Two of the terms you will hear are HTML "tag" and "element".

As you hear these two terms spoken, you may realize that they are being used somewhat interchangeably.

As such, one question that many new web professionals have when they begin working with HTML code is "what is the difference between an HTML Tag and an HTML Element?"

While these two terms are similar in meaning, they are not really synonyms. So what is the similarity with these two terms? The short answer is that both tags and elements refer to the markup used to write HTML. For example, you might say that you are using the <p> tag to define a paragraph or the <a> element to create links. Many people use the terms tag and element interchangeably, and any web designer or developer you speak with would understand what you meant, but the reality is that there is a slight difference between the two terms.

HTML Tags

HTML is a markup language, which means that it is written with codes that can be read by a person without it needing to be compiled first. In other words, the text on a web page is “marked up” with these codes to give the web browser instructions on how to display the text.

These markup tags are the HTML tags themselves.

When you write HTML, you are writing HTML tags. All HTML tags are made up of a number of specific parts, including:

  • A less-than sign <
  • A word or character that determine which tag is being written
  • Any number of optional HTML attributes in the form of a name="value" pair
  • And finally a greater-than sign >

For example, here are some HTML tags:

  • <p>
  • <html>
  • <div>

These are all HTML opening tags, without any optional attributes added to them. These tags represent:

  • <p> - defines a paragraph.
  • <html> - defines the page as HTML
  • <div> - defines a division.

The following are also HTML tags:

  • <ul id="menu-list">
  • <div class="featured-article">
  • <a href="index.html">
  • <img src="images/logo.png">

These examples all include attributes that have been added to the opening HTML tags. 

  • The <ul> is an unordered list that includes an ID attribute
  • The division has a class attribute
  • The anchor, or link, element includes the "href" attribute
  • The image tag with a "src" attribute

For the anchor and image tags, the attributes are actually not optional, they are necessary for those tags to display properly. You need to tell the link where to go (which is what the "href" does) and the image what to show (which is what the "src" attribute provides).

What Are HTML Elements

According to the W3C HTML specification, an element is the basic building block of HTML and is typically made up of two tags: an opening tag and a closing tag. So far we have only looked at opening tags, which starts the elements. To end that element, you write the corresponding closing tags.

For example, for the paragraph element you write this:

<p></p>

This is made up of the opening tag which we saw a moment ago as well as the  the closing tag - </p>. Closing tags are really just the opening tag repeated, but with a "forward slash" added directly after the "less than symbol".  

Almost all HTML elements have an opening tag and a closing tag. These tags surround the text that will display on the web page. For example, to write a paragraph of text, you write the text to display on the page and then surround it with these tags:

<p>This is where you would write the text of the paragraph that you would like displayed on the webpage.</p>

Some HTML elements do not have a closing tag. These are called "empty elements".  Sometimes, they are also referred to as “singleton” or “void” elements.

Empty elements are easy to use because you only have to include one tag in your web page and the browser will know what to do. For example, to add a single line break to your page you would use the b<br> tag.

Another common element that only includes an opening tag is the "image" element. For example:

<img src="images/logo.png">

We saw this example earlier, but there is no closing tag for this image element. The browser would simply replace this code with the image that is referenced in the "href" attribute. In this case, that would be "logo.png".

In general, when I refer to an HTML element or tag, I will use the term “element” to indicate that I am referring to all parts of the element (both the opening and closing tags). I use "tag" is I really an referring only one or the other. This is the proper use of these two terms, and I encourage you to use them properly - but just know that if you slip and interchange them a bit, you will still be understood by your new web development peers!

Original article by Jennifer Krynin. Edited by Jeremy Girard on 7/21/17