HTML Tags vs Elements vs Attributes – Complete Guide

This tutorial will teach you everything about HTML tags, HTML elements, and HTML attributes in detail. In this tutorial, you will see definitions, usage, examples, their difference, and how to use them.

So let’s begin with HTML Tags.


Definition, usage, and examples of HTML tags.

What are Tags in HTML?

HTML tags are like keywords to tell the browser that how to display the content in a webpage. To tell the browser about the content, every HTML tag has a specific name. Tag names are always enclosed in the pair of < and > symbols.

  • Whatever you write inside the < and > symbol is called an HTML tag.
  • We always use two tags opening tag <tagname> and closing tag </tagname>. And we write the content inside these two tags.

Let’s see an example of an HTML tag to know how to use tags in HTML.

HTML Tags Example

Let’s suppose you want to add a paragraph to your HTML webpage.

For adding paragraphs in HTML, we use a p tag name, enclosed in < and > symbols like this <p>. And the text of the paragraph is written in the opening <p> tag and closing </p> tag. We use a <p> tag like this below.

<p> This is paragraph </p>

See the image below to know what is happening.

HTML tags example

Points to Remember

  • Every tag have a specific name. Like <b> tag for bold, <h1> for large heading etc.
  • The opening and closing tags are crucial.
  • Tags are not case sensitive but its recommended to always use lowercase tag names.

We have some common and most basic tags in HTML that we use almost every time when we create an HTML webpage. You can check out those 10 basic HTML tags.

HTML Elements

Definition, usage, and examples of HTML Elements.

What are Elements in HTML?

HTML element consists of a start tag, then some content, and an end tag. It is an individual component of an HTML document. Let’s see an example of HTML elements to understand them easily.

HTML Elements Example

I am using the same example. It’s very easy to understand.

As you can see in the image below, the HTML element consists of an open tag, some content, and an end tag.

HTML Elements Examples

There is nothing to understand more about the HTML element. Now see the difference.

What is the difference between HTML elements and tags?

The basic difference between them is that an element is a set of opening and closing tags. While tags are just labels that you use to mark up the beginning and end of the element content. This is the only difference.

Example of HTML Tags and Elements

This image clearly shows the difference.

Difference between Elements and Tags Example

Another example to understand. If you see the below HTML code, there are just 3 elements but 7 tags.

<p> This is paragraph <p> <br>
<div> This is <b>div tag</b> </div>

In the example above, I used the <br> tag but I didn’t close it. Because HTML has some empty tags too. By the way, <br> tag is used for line break to start the text on a new line.

Some of the empty tags are <input>, <img>, <hr> etc.

One last thing to know is that elements can be nested. For example, you can use many elements inside elements. One HTML element can consist of many other elements.

Tip: See the list of all tags included in HTML.

Now, let’s see attributes.

HTML Attributes

Definition, usage, examples, and difference.

What are attributes in HTML?

HTML attributes provides an additional information about an HTML elements. Additional information about HTML elements like styles, fonts, colors, their characteristics etc.

Attributes are always used in opening tags of HTML.

HTML Attributes Examples

In the HTML code given below, I used the style attribute and defined the color of the HTML element. This code will change the color of the paragraph text.

<p style="color: blue;"> This is paragraph </p>
HTML Attributes Example

The style attribute is used to add styles to change colors, background, and border of HTML elements.

Another Example of Attribute in HTML

This example shows multiple attributes in one tag. You can use many attributes in one tag. Let’s see the code below.

<img src="images/baseball.png" width="300px" height="200px">

In this line of code, I used the <img> tag to add image and src attribute to specify the location of the image where it is located. And I used width and height attributes to specify the width and height of an HTML element.

Difference between HTML tags and attributes?

The main difference between tags and attributes is that tags are used to tell the browser what is the type of content that you want to display like it’s a paragraph, image, heading, or metadata. While HTML attributes are used for providing additional information like characteristics, styles, and so on.

Because we use attributes inside of opening tags, that’s why you can’t use attributes if the tag doesn’t exist.

That’s it.

Now you know how to use HTML Tags, HTML Elements and HTML attributes. Keep practicing. Hope you understood well.

If you have any questions related to this topic then ask in the comment section below. We will answer that.

Keep learning HTML5.