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, (<) and (>).
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:
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, theis 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="a.jpg" 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:
<body> <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> </body>
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:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Types of Tags Demo</title> </head> <body> <p> This is a paragraph </p> <i><b> This is a bold and italicized text </b></i> </body> </html>
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Table Border in HTML
Sep 04, 2024 pm 04:49 PM
Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.
Nested Table in HTML
Sep 04, 2024 pm 04:49 PM
This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.
HTML margin-left
Sep 04, 2024 pm 04:48 PM
Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.
HTML Table Layout
Sep 04, 2024 pm 04:54 PM
Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.
HTML Input Placeholder
Sep 04, 2024 pm 04:54 PM
Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.
HTML Ordered List
Sep 04, 2024 pm 04:43 PM
Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively
Moving Text in HTML
Sep 04, 2024 pm 04:45 PM
Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.
HTML onclick Button
Sep 04, 2024 pm 04:49 PM
Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.
