What are the types of HTML tags?

Book A Demo Class

HTML is a simple and easy programming language used to create a website structure usually accompanied by CSS and JavaScript.

When an HTML file is loaded in the browser, it reads all the contents written in the file and displays them on the screen with all visual elements properly placed.

And what is that thing responsible for making the things appear structured and organized, it’s the HTML Tags.

HTML Tags are special keywords used in the code and are written using angle brackets.

Introduction to HTML Tags

HTML Tags are like instructions that are embedded in the code and direct the browser do display the things in the instructed manner rather than displaying just the content.

There are mainly three types of tags:

1). Paired and Unpaired Tags

Paired tags

HTML Tags are known as paired tags when they come in pairs i.e. an opening tag and a closing tag.

The paired tags starts with an opening tag written in angular brackets (< & >) and the tag name is enclosed in these brackets.

The closing tag is written in the same way by just adding a slash in the front.

For example: <b> This tag is used to mark that the content following will be written in bold till a closing tag is encountered which is </b>

Example #1:

<b> This text will be written in Bold. </b>

Output will be

This text will be written in Bold.

Here, <b> is opening tag and </b> is closing tag.

More examples include:

Unpaired Tags

The tags that do not have any closing tag or companion tag are called unpaired tags. They just have an opening tag.

These are also known as singular tags or standalone tags.

Example: <hr> (used to draw a horizontal line), <br> (introduce a line break), <meta> (include meta information), <input> (introduce input fields)

2). Self-Closing Tags

These tags don’t have partner tags as they are self sufficient. Here the opening tag itself is required for the formatting.

All the desired information is about its attributes is enclosed within the tag itself.

<img> tag is one of the best examples of self-closing tag.

More examples of self-closing tags include:

In older versions of HTML, the ending of the tag was accompanied by a forward slash such as

These are also known as void tags.

Points to remember:

In HTML 5: the slash is optional.
In XHTML: Slash is required.
In the previous version of HTML i.e. HTML4- the slash was technically not acceptable. However, W3C’s HTML Validator supported it.

3). Utility-Based Tags

Here the tags are differentiated on the basis of their utility or function. They are further divided into three categories.

Formatting Tags

These HTML tags help in formatting the text such as changing the size of text, changing to paragraphs, bold, italics, fonts etc.

Tables, span and division tags also fall under this category as they play a crucial role in formatting the web page or document and decide the layout.

Examples:

<i> the text is italics </i>

<table> here starts the table </table>

Other examples include:

<div> </div>, <u> </u>, <p> </p>, <b> </b> etc

Structure Tags

These tags are responsible for giving structure to the HTML document. The commonly used tags that you see in almost every HTML page come under structure tags.

These tags have nothing to do with the formatting of the text, rather they help to build the document from the root.

For example:

Structural Tags
<html> </html>	It is the primary tag. It tells the browser that everything inside this tag is HTML code.
<head> </head>	It contains all the meta things of the document and distinguishes head from rest of the body. The CSS/JS (javaScript) code or file is put here along with other meta data.
<title> </title>	The content written inside this tag is displayed on the browser tab.
<body </body>	All the actual content of the web-page is written here.
<!DOCTYPE>	This tag tells us the document type declaration (DTD) and is accompanied by the word html. It helps the browser the type of file and to detect the content of the file appropriately.

Control Tags

These tags are responsible for managing the content on the web page. These tags also help in managing scripts or any external libraries they are added to the HTML during run-time.

The entire drop down lists, form tags, input boxes etc that are used to interact with the user fall under this category.

Here is a list of newly added tags in HTML 5

Newly Added Tags in HTML 5
<video>	This tag is used to lay a video file.
<audio>	Audio files are embedded using this tag.
<section>	A section in a document is defined using this HTML tag.
<svg>	Used to display shapes
<nav>	Define a navigation link
<header>	Defines header section of the document
<footer>	Defined the footer section of the document
<dialog>	Defines a dialog box or a window