Enrich your knowledge with our informative blogs
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
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>
<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:
<html> </html>, <form> </form>, <h1> </h1>, <div> </div>
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.
<img src=”tags.jpeg” alt=” alternate text for this image”>
More examples of self-closing tags include:
<area />, <base />, <col />, <embed />, <link />
In older versions of HTML, the ending of the tag was accompanied by a forward slash such as
<img src=”tags.jpeg” alt=” alternate text for this image” />
These are also known as void tags.
Points to remember:
3). Utility-Based Tags
Here the tags are differentiated on the basis of their utility or function. They are further divided into three categories.
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.
<i> the text is italics </i>
<table> here starts the table </table>
Other examples include:
<div> </div>, <u> </u>, <p> </p>, <b> </b> etc
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.
|<html> </html>||It is the primary tag. It tells the browser that everything inside this tag is HTML code.|
|<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.|
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|
Read More – Coding and Programing Questions
View More – Useful links for Your Child’s Development