HTML Tags

HTML tags are the main building blocks of the webpages. Certain tags come up with opening as well as closing tags while few consist of no closing tags.

There are more than 100 tags in HTML. I recommend you to learn all the tags that help you to easily develop webpages. If you want to learn the uses of all the tags one by one, see the complete list of tags in our HTML Reference in detail.

Syntax of HTML Tags

Tags are the key elements of all the webpages. The tag names are surrounded by the opening angle bracket(<) and the closing angle bracket(>).

Details of parameters

Parameter name Description
tagname It is the HTML tagname you have to enter in both opening and closing( if available).
attribute It is the available attribute you can use for the selected tagname.
value It is the value you have to provide for the attribute you are using.

HTML Tags Example with Explanation

Let’s find out the starting and closing tag in the example given below.

Test it Live

Closing and Opening Tags in the Example

The above example contains the following tags in which few have both opening and closing while few have not.

<!DOCTYPE>: has no closing tag.
<html>: It has closing tag </html>.
<head>: It has closing tag </head>.
<title>: It has closing tag </title>.
<body>: It has closing tag </body>.
<h1>: It has closing tag </h1>.
<p>: It has closing tag </hpead>.

Always Use Small Letters For HTML Tags

W3C always recommends using small letters for HTML tags. However, we can use capital letters also to develop webpages. Using capital letters for tags in webpages is not developers-friendly coding to understand.

Don’t use capital letters

Use small letters

So, I recommend you always use lowercase or small letters for tags and attributes in HTML. This makes your webpages more developer-friendly.

Nested HTML Elements

A nested HTML element is the element in which one element added inside the other HTML element. You can add as many elements as you want inside the other element as per your requirement.

Output

This is a bold text.

In the above example, the <strong> elements are nested inside the <p> element.

Let’s take another example of adding an emphasized text inside the paragraph.

Output

This is an emphasized text.

The <em> tag nested inside the <p> tag. It can be used to add an emphasized text content as you can check in the output given below.

Empty Elements Without Content and Closing Tags

Empty elements have no closing tags and content inside it. These elements can say are the self-closing tags. <br>, <hr>, <img>, etc are the empty elements without any closing tags.

Output

This is my paragraph
content.

The above example showing the empty element <br> without closing tag. However, you can make it as a self-closing tag by placing the trailing slashes(/) before the closing angle bracket(>). For example: if you write empty element <br>, you can make it as closing tag by writing it as <br/>.