Question: What is an HTML Tag or an HTML Element?
When you are starting to learn HTML, you will discover that there are a lot of jargon terms you should understand in order to be effective. Two of the most common terms you will see are “tag” and “element.” And, while they are similar in meaning, they are not really synonyms.
The short answer is that both tags and elements refer to the markup used to write HTML. For example, you might use the
<p> tag to define a paragraph or the
<a> </a> element to create links. Many people use the terms tag and element interchangeably, and if you find that easier, you can too. But there is a slight difference between the two terms.
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.
And 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
- Optional space followed by:
- Any number of optional HTML attributes in the form of a
- And finally a greater-than sign
Are all HTML tags without attributes.
<p> defines a paragraph.
<html> defines the page as HTML. And
<small> defines small print, such as in a legal document.
The following are also HTML tags:
These are all HTML tags with attributes. The
<a href="URL"> is a link to another document. The
<img src="URL"> points to an image to display on the page. The
<div id="ID"> defines a division of the content of the page with a unique ID.
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. In fact, one way to learn HTML is to simply memorize all the HTML tags.
What are HTML Elements
In common usage, the terms “HTML element” and “HTML tag” are used interchangeably. A tag is an element is a tag.
For example, the paragraph element
<p></p> is made up of the opening tag
<p> and the closing tag
</p>. The element is the collection of both the starting tag and the ending tag.
In other words, the element is the entire HTML block that creates a paragraph. And the tags are the two pieces of the element—the opening piece and the closing piece.
Most 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:
<p> and a closing tag:
</p>. 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 “singleton” or “void” elements. Void elements are easy to use because you only have to include one tag in your web page. For example, to add a line break to your page you would use the
Void elements have only one tag as part of the element, but in XHTML, you would also include a trailing slash in the beginning tag to show that it is a void element. For example, in XHTML to add a line break you would use the
BR element with a closing slash:
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 opening and closing tags). But I may use the term tag to mean the same thing—an HTML item that will define something on your web page.