What Is An HTML Tag Versus an HTML Element?

There is a Difference Between These Two Terms

HTML question mark
HTML question mark.

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?"

When you are starting to learn HTML, you will discover that there are a lot of jargon terms you will want to understand in order to effectively communication with others in the industry. Two of the most common terms you will see as you explore the world of HTML are “tag” and “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> </a> element to create links. Many people use the terms tag and element interchangeably,  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 needing to be compiled. In other words, the text on a web page is “marked up” with these codes to tell the browser how to display the text. These markup tags are the HTML tags themselves.

When you write HTML, you are writing HTML tags. These are made up of:

  • A less-than sign <
  • A word or character
  • 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:

     


     

    These are all HTML opening tags without any attributes added to them.

    defines a paragraph.

    defines the page as HTML. And

    defines a division.

     

    The following are also HTML tags:


     

    These are all HTML tags with attributes. The is a link to another document. The points to an image to display on the page. The

    defines a division of the content of the page with a class attribute.

     

    An HTML tag is the building block of HTML. In order to learn HTML, you should learn the different tags, what they are for, how they can be used, and when it's appropriate to use them. This may seem like a tall order when you first start learning HTML, since there are over 100 possible tags, but the reality is that most webpages use only a small percentage of the tags that are available in the language.

    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.

    For example, the paragraph element

     

    is made up of the opening tag which we saw a moment ago - 

    and the closing tag - 

    . The element is the collection of both the starting tag and the ending tag. 

     

    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, the paragraph tag has an opening tag:

    and a closing tag:

    . To write a paragraph of text, you write the text to display on the page and then surround it with these tags:

     


    This is a paragraph that will display on the web page. It is surrounded by opening and closing paragraph tags.

    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. For example, to add a single line break to your page you would use the br tag:

     

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

     

    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). 

    Original article by Jennifer Krynin.

    Edited by Jeremy Girard on 11/3/16