Types of Tags in HTML

Tags can be defined as the instructions which are being directly embedded in the text of an HTML document. The types of tags used in the HTML document are responsible to tell a web browser to do something (follow the instruction) instead of just displaying text. In an HTML document, all tag names are differentiated from other simple text. The tag names are enclosed in between angle brackets or a ‘less than’ and a ‘greater than’ symbol, ().

Top 3 Types of Tags in HTML

An HTML document is created using different types of tags. HTML tags can be defined and divided based on a different basis. Let’s see them in the coming parts of this article. We have divided HTML tags based on the following classifications:

1. Paired and Unpaired Tags

Following are the paired and unpaired tags in HTML explained in detail with the help of examples.

Paired Tags

An HTML tag is known as a paired tag when the tag consists of an opening tag and a closing tag as its companion tag. An HTML Paired tag starts with an opening tag: the tag name enclosed inside the angle brackets; for example, a paragraph opening tag is written as ‘

’. The content follows the opening tag, which ends with an ending tag: the tag name starting with a forward slash; for example, an ending paragraph tag is written as ‘

’. The first tag can be referred to as the ‘Opening Tag’, and the second tag can be called Closing Tag.

Example #1:

<p> This text is a paragraph . </p>

Output:

NOTE: Here, the opening tag is, and the closing tag is

.

Example #2:

Another example of a paired tag is italic and/or bold tags:

<i> <b> This is a bold and italicized text </b> </i>

Output:

Note: These paired tags are also called Container Tags.

Unpaired Tags

An HTML tag is called an unpaired tag when the tag only has an opening tag and does not have a closing tag or a companion tag. The Unpaired HTML tag does not require a closing tag; an opening tag is sufficient in this type. Unpaired tags are sometimes also named as Standalone Tags or Singular Tags since they do not require a companion tag.

Example:

 This is a paragraph 

<i> <b> This is a bold and italicized text </b> </i>

Output:

Note: Here, the

---

is the unpaired tag used to create a horizontal line. In older versions, you might see hr tag written as

---

instead of

---

. These tags are also called Empty Tag.

2. Self-Closing Tags

Self-Closing Tags are those HTML tags that do not have a partner tag, where the first tag is the only necessary tag that is valid for the formatting. The main and important information is contained WITHIN the element as its attribute. An image tag is a classic example of a self-closing tag. Let’s see it in action below:

Example:

<img src="/static/imghwm/default1.png" data-src="a.jpg" class="lazy" alt="This is an alternate text">

Note: In the older versions, the self-closing tags use a ‘forward slash’ before the ending or closing ‘greater than’ sign/symbol, as written below:

3. Utility-Based Tags

The HTML tags can be widely differentiated on the basis of their utility, that is, on the basis of the purpose they serve. We can divide them basically into three categories as discussed below:

Formatting Tags

The HTML tags that help us in the formatting of the texts like the size of the text, font styles, making a text bold, etc. This is done using tags like , , , etc. Tables, divisions, and span tags are also those tags that help format a web page or document and set the layout of the page. Below is a small program using divisions for formatting the page along with some other formatting tags.

Example:

<div class="container">
<div class="row">
<div class="col-25">
<label for="email"><b>Name</b></label>
</div>
<div class="col-35">
<input type="text" placeholder="First" name="fname" required>
</div>
<div class="col-35">
<input type="text" placeholder="Last" name="lname" required>
</div>
</div>
</div>

Output:

Structure Tags

The HTML tags that help in structuring the HTML document are called Structure Tags. Description, head, html, title, body, etc., form the group of the page structure tags. The structure tags only assist in creating or forming the basic html page from the root; that is, they do not affect or has any hand in the formatting of texts. So a basic HTML program is the basic group of structural tags:

Example:

<meta charset="utf-8">
<title>Types of Tags Demo</title>


<p> This is a paragraph </p>
<i><b> This is a bold and italicized text </b></i>

Output:

Control Tags

Another category of tags that can be created is ‘Control Tags’. The Script tags, radio buttons or checkboxes, the Form tags, etc., forms the control tags. These are the tags that are used in managing content or managing scripts or libraries that are external. All the form tags, drop-down lists, input text boxes, etc., are used in interacting with the visitor or the user.

The above distinction of the HTML tags is based on the type of tags and their utility. The HTML tags can also be simply divided based on basic categories like Basic HTML Root Tags, Formatting tags, Audio and Video Tags, Form and Input Tags, Frame Tags, Link Tags, List Tags, Table Tags, Style Tags, Meta Tags, etc.

The above is the detailed content of Types of Tags in HTML. For more information, please follow other related articles on the PHP Chinese website!