Categories
Coding Tutorial

The Structure of an HTML Tag

Hey guys, this is Bhanu Stark from Public App. Today we are going to talk about the structure of an HTML Tag.

In this post, you will find the answer of –

  1. What is HTML tag?
  2. What is HTML element?
  3. What is opening tag?
  4. What is closing tag?
  5. What is self-closing tag?
  6. What is an attribute?
  7. How to know everything about an HTML element?
  8. How to know about all the HTML elements?

Example of HTML Element

<h1>Hello World</h1>

As you can see the snippet of the above HTML code will show “Hello World” in the web browser. And that will be shown in the web browser as a Heading 1 element.

The way in the example we have written the code, we have to show “Hello World” as a Heading 1 then we have written the content “Hello world” in the opening and closing tags.

And opening and closing tags contain the element name h1.

What is HTML Tag?

HTML Tag is surrounded with angle brackets like in the example of the above HTML Element. So in the example “<h1>” is an HTML Tag.

What is HTML Element?

The complete HTML code with opening and closing tags and with content is called the HTML element. So in the example “<h1>Hello World</h1>” is an HTML element. This HTML element is called the “Heading 1” element.

What is an opening tag?

In HTML, the opening tag is always written before the content. And that is always written in the angle bracket. So the opening tag in the above example is “<h1>”.

As you can see the h1 which is an element, is written in between the angle brackets. So that is an opening tag.

What is a closing tag?

In HTML, the closing tag is always written after the content. And that is always written in the angle brackets but with the slash “/”. So the closing tag in the above example is “</h1>”.

As you can see the h1 which is an element, is written between the angle brackets with a slash before the element name. So that is a closing tag.

What is a self-closing tag?

In “<h1>Hello world</h1>”, there are both tags opening and closing tag but some of the HTML elements don’t need the closing tag because they really don’t need that.

For example –

<hr>

This is an example of the self-closing tag which doesn’t need the closing tag.

The work of this tag is to show a horizontal line on the web browser. And it doesn’t need the content like an h1 element. So it is a self-closing tag.

What is an attribute?

An attribute is used to customize the element. So here is the example of an attribute for the hr element.

<hr size="3">

So here is the hr element and an attribute is also defined which is size and its value is 3. So size is for the hr‘s boldness or thickness that how much that line will be thick. So here in the example of the code will show and horizontal line with 3-pixel thickness.

Now you may have a question that how will you know all elements of HTML and their attributes and if they are self-closing tags or not? right!

Here is the answer:

How to know all HTML elements?

So there are many online documentations of HTML and one of them is DevDocs.io.

Visit DevDocs and on the right-hand side, you will see all the programming languages. Then choose the HTML and then choose elements.

Then you will see all the HTML element and their usage like how to use them and what is the HTML rule, is that a self-closing tag or not? which web browsers are supporting that element or which aren’t?

All the details are written and it’s very easy to understand.

for example here are some screenshots from Devdocs:

h1_doc
H1 documentation example

In the above screenshot, you can see that the h1 tag documentation. In the Tag omission section, they have told that the H1 tag requires both the starting (opening) and the ending (closing) tag.

h1_doc_do_dont
H1 documentation Dos and Don’ts

In the above screenshot, you can see and understand that what is the usage guidance for Heading tags.

h1_doc_example
Heading usage example in HTML

In the above screenshot, you can see and understand that how can you use the Heading tags to your web page coding. This is the screenshot of an example code of the Heading tags.

Now I think you have understood the structure of an HTML tag or element. That how can you open? how can you close and which doesn’t need the closing tag?

Watch the YouTube video for this post

So we’ll meet in another post. If you have any doubt, don’t hesitate to comment down and ask.

The source of all screenshots is – DevDocs

Leave a Reply

Your email address will not be published. Required fields are marked *