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
|
1 |
<tagname attribute="value">Enter your content here...</tagname> |
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.
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html lang="en"> <head> <title>Simple HTML Example</title> </head> <body> <h1>This is my First Heading</h1> <p>This is my First Paragraph.</p> </body> </html> |
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
|
1 |
<P>This is the paragraph.</P> |
Use small letters
|
1 |
<p>This is the paragraph.</p> |
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.
|
1 |
<p>This is a <strong>bold</strong> text.</p> |
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.
|
1 |
<p>This is an <em>emphasized</em> text.</p> |
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.
|
1 |
<p>This is my paragraph <br>content.</p> |
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/>.