HTML Tags vs Elements vs Attributes – Complete Guide
This tutorial will teach you everything about HTML tags, HTML elements, and HTML attributes in detail. You will see their definitions, usage, examples, the difference between them, and how to use them.
So let’s begin with HTML Tags.
HTML Tags
Let’s see the definition, usage, and examples of HTML tags.
What are Tags in HTML?
HTML tags are like keywords to tell the browser how to display the content on 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>the symbol is called an HTML tag. - We always use two tags opening tag
<tagname>and a 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>
The image below is clearly showing what is happening.
Points to Remember
- Every tag has 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 it’s 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.
There is nothing to understand 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.
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 breaks. It starts the text from the new line.
Some of the empty tags are <input>, <img>, <hr>, etc.
One last thing to know is that elements can be nested. Mean, you can use many elements inside one another. One HTML element can consist of many other elements.
The following example shows nested list elements.
If you see the above image there is a ul element inside another ul element. You can learn more HTML lists in our nested lists in the HTML tutorial.
Tip: Here is the list of all tags included in HTML.
Now, let’s go ahead and see the attributes.
HTML Attributes
Definition, usage, examples, and difference.
What are attributes in HTML?
HTML attributes provide a piece of additional information about 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>
The style attribute is used to add styles to change colors, backgrounds, and borders of HTML elements.
Another Example of an 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 the image and the 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 tell the browser what type of content you want to display whether it’s a paragraph, image, heading, or metadata. While HTML attributes provide 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.
Related Tutorial:
If you have any questions related to this topic then feel free to ask in the comment section below.
Keep learning HTML.
Topic: HTML
