HTML

Know About HTML Tags, Attributes, and Elements

We have already discussed that an HTML is a markup language in our previous article. Thus people use HTML tags to do marking up. So in this article, we will be discussing various HTML tags, attributes, and elements.

So let’s start with HTML tags and what they actually do?

HTML Tag:-

This is a tag name surrounded by < and > brackets.

For EX : <body> tag.

Here you can see body tag which is surrounded by < and > brackets and you will see a word “body” inside it which is a name of this tag i.e. body tag. It is put inside these brackets to denote that it is an HTML tag and like this, there are many more tags used in HTML which have different names like a body tag, image tag, paragraph tag etc.

Now, normally HTML tags consist of an opening tag and a closing tag like:

So you have tag with < and > sign and then the name of the tag inside it. Now to close that you put a slash in front of the name of the tag. So what it denotes to the browser is that anything inside of these tags is marked up with this specific tag and I want you to treat it in a particular way based on whatever that tag is.

So the second example used here is of the paragraph tag. Now, this especially comes into picture when you are dealing with CSS so that we can target these tags in our CSS. Means tell the browsers how to style specific tags and we can give names to the tags and so forth. This is the basic structure of an HTML tag looks like. There are exceptions that are called void tags.

Void Tags: –

These tags are called “Void Tags” because they cannot have any contents.

For ex: – The image tag:

So syntactically there is no reason for them to close because there are no contents to put inside them. So a really good example of it is above image tag.

This is a default image tag that you would use in your HTML. You notice inside this we have used an attribute about which we will talk about in a while. Which is a source which tells the browser where to find the image, we want to display. But you would also notice that there is no closing tag with it. You could see only an opening tag, that’s all you put when you use this image tag. That would be considered incorrect syntax.

This is what is called as Void tag and you would see some of these throughout the HTML as you learn it.

One thing that you could have seen that’s called “Self Closing Tags“.

Self-ClosingTags:-

This is a leftover from XHTML. Again the image tag is an example. Notice the closing “/” in this tag:

The reason for this is because XML is a strict language which required every tag to be closed. But as explained earlier HTML has a Void tag where you have certain tags does not require any need to close them so we don’t need a closing tag for them.

This is no longer necessary. However, it’s a sort of compromise in XHTML, what are called this self-closing tags. Now in today’s article, we are not going in details about XHTML. But you may see that kind of code or coder who still uses them. But it is still a leftover of XHTML. If you see them then just remove that closing slash and use it like a normal HTML tag.

Let’s see Attributes:-

Attributes:-

So HTML tags may have attributes that further describes how the element should be displayed. So the basic structure of attribute is as follows:

Name of tag Name of Attribute Value of attribute

Foe Ex : – <img src = “ourimage.jpg”>

Name of tag Name of attribute Value of attribute

Let’s discuss what does an attribute do?

This tells the browser for this image tag where you are going to find the image at ourimage.jpg.

This is called a relative path. So the browser will look whatever URL you happen to add so if you add google.com/about and if you want to add this image tag here then the browser will look out for google.com/about/ourimage.jpg for that image file. Of course, that may not be exactly how you want to structure your site so you can use what is called absolute URL’s. Where you can put in the full HTTP address of the image here. When you go to CSS, that, of course, may change a little bit but which may give you a basic idea of the attribute is that an attribute that further tells the browser further how they should use this.

The last thing is the Elements.

Elements: –

An Element is essentially an HTML tag and the content inside of it.

For EX:-

<h1>Content</h1>

Heading tag Element Closing tag

Level 1

Inside an opening and closing tag, we have our content that full tag and the content is referred to as an element. When someone says an element this is technically what they are talking about.

Although you would find the people quite often refer to tags and contents a bit interchangeably.

But it is important to understand what element is? Because when you start dealing with CSS then you will target an element inside of CSS, that’s something you hear a decent amount, that generally is being said in the technical sense and we not only referring to only to a tag as well as the content inside of that tag also.

Visit – Hostdens

Best Web Hosting Company

Vishwajit Kale

Vishwajit Kale blazed onto the digital marketing scene back in 2015 and is the digital marketing strategist of Hostdens, a company that aims to provide reliable web hosting solutions. Vishwajit is experienced in digital and content marketing along with SEO. He's fond of writing technology blogs, traveling and reading.