In this section, we will learn what the elements and tags are and how to use them in HTML.

What is HTML Element? (What is a HTML Tag?)

An HTML element is a component that we use to create something in an HTML document.

For example, we might want to create a header in a document. Well, HTML has a component (AKA tag) called <h1> for example, that could be used to create one big header in a document.

On the other hand, we have HTML tags!

Tags are basically those symbols that represent an element! For example, a paragraph element <p> has two tags:

• <p>: this is known as the opening tag
• </p>: this is known as the closing tag.

Note: the opening and closing tags and the body that will be created in between them together represent an element.

But in today’s world, developers almost use the word tags and elements interchangeably! So you can say “HTML tag <p>” or “HTML element <p>” and both mean the same for developers.

Note: HTML elements are here to serve a purpose and not to be printed on a page! That’s why you don’t see them on a page when an HTML document is being rendered on.

HTML Elements Syntax:

Elements for the majority of cases have two tags, which we call opening and closing tags.

For example, the HTML paragraph element <p>:

<p> </p>

Here, the opening tag of this element is <p> and the closing tag is </p>. Note that the closing tag has one forward slash before the character `p`.

Alright, before we continue, let’s first see the syntax of an HTML element:

<element-name> </element-name>

<element-name>`: this is the opening tag of an element and within the pair of `<>` we put the name on the target HTML element.

Note that we don’t put an empty space after the `<` and the name of the element.

`</element-name>`: this is the closing tag of the target element and within the body of the </ > we put the name of the target HTML element.

Note that we don’t put an empty space after the `</` and the name of the element.

Remember that there are HTML elements with only one tag, and that is the opening tag. For example, the HTML image element <img> has only one tag and that’s the one you see here.

One of the main reasons of why some of the HTML elements don’t have a closing tag is because they don’t need a body! Basically, when an element has two tags (the opening and closing) the body in between these two tags represents the body of the element and that’s the places where we put the content for that element! For example, the <p> element has two tags because it needs a body! The body of such element is the place where we put text content to be printed on a page.

But for an HTML element like <img>, there’s no need for a body! Because after all, the purpose of such an element is to simply display an image on a page! So, there’s no reason for this element to have a body as well!

Is HTML Case Sensitive?

No! HTML is not case sensitive! An HTML element like <p> is exactly the same as <P> for example.

The general convention is to use lowercase letters for HTML elements.

Example: creating HTML elements

See the Pen creating HTML elements by Omid Dehghan (@odchan1) on CodePen.

As you can see, we used different cases for the elements’ tags in this example and our Browser still capable of reading and interpreting these elements correctly.

HTML Closing Tags

Note that we mentioned the majority of HTML elements have a closing tag and its syntax is like this: </element-name>

The convention in HTML is to always pair an opening tag of an HTML element with its closing tag. But if you forget to put the closing tag of an HTML element, HTML still accepts the content and will try to render the content of that element!

Example: HTML element without closing tag

See the Pen HTML element without closing tag by Omid Dehghan (@odchan1) on CodePen.

Here you can see that the <p> element is not paired with a closing tag! But still, browsers are smart enough to see the content of the <p> element and render that on the page.

But remember, the convention is to always put the closing tag of an HTML element if it has one. This way, you’ll be safe from any misinterpretation that might happen as a result of forgetting the closing tag of an element.

HTML Self Closing Tags

Those HTML elements that don’t have a closing tag are known as self-closing tags!

For example, the HTML <img> is one of those tags.

Note that in the older version of HTML (also in XHTML) we used the forward slash in these tags as well! For example: <img/>. But in the HTML 5 you don’t need to use that forward slash in these types of elements anymore.

Example: using HTML self closing tags

See the Pen using HTML self closing tags by Omid Dehghan (@odchan1) on CodePen.

Types of Elements

HTML has a vast list of elements! Each of these elements serve different purpose! For example, the HTML <p> element is used to create a paragraph in an HTML document, the HTML <img> is used to bring an image into a document, the HTML <form> element is used to create a form in HTML and so many other elements.

If you’re interested, you can check the HTML reference section and see these elements yourself.

Attributes of HTML Tag

Attributes are a set of words we put into the opening tags of HTML elements and they control the behavior and properties of the target element!

For example, one of the attribute of the HTML <img> element is called `width`. Using this attribute, we can set the width of the target image that will be inserted using this element. Or another attribute of not just this element but the vast majority of HTML elements is called `title`. This attribute takes a string value and shows that on top of the content of that element (when it is rendered on a page) if we bring the mouse cursor within the boundary of that content.

Example: using attributes in HTML elements

See the Pen using attributes in HTML elements by Omid Dehghan (@odchan1) on CodePen.

In this example, bring the mouse cursor on top of the image and you’ll see the text message of the `title` attribute will appear on top of the image in a form of a tooltip.

For the `<img>` element, we’ve used other attributes as well, but they are explained in the HTML image section.

All The Tags of HTML

In the HTML elements reference section, you can check all the elements available in HTML.