HTML tags are the Lego bricks that make up all web pages! They tell the browser how to render text, images, and other content on the page. Essentially, anything you see in your browser is defined by some HTML tag.
According to MDN, there are 142 HTML tags in total. The most common ones are <html>,<head>,<body>,<h1>…<h6>, <p>, <div>, <span>, and the <li> tags. Other more popular HTML tags include <img>, <table>, <form>, and <a> tags.
But how many tags are there in HTML? And what do they all do?! Let’s dive deeper into the world of HTML tags and discover the most commonly used tags and the exact number of HTML tags to date!
Table of Contents
The Most Prevalent HTML Tags
Let’s go through the common ones to answer just how many HTML tags there are.
The <html> tag
Let’s start with the Big Picture. Any HTML file has a <html> tag, which contains everything. We have a <head> tag and a <body> tag within that.
The <head> tag
The <head> contains info about our page, like the title.
The <body> tag
The <body> is where the good stuff lives – headings, paragraphs, images, etc. Think of the <head> as the playbook and the <body> as where the game happens.
The <h1>, <h2>, and other heading tags
Headings define the structure of our content and make it scannable. <h1> is the main heading, followed by <h2> then <h3> and so on.
Read also: Non-Breaking Hyphen In HTML: A Quick And Easy Guide
Headings can be used to create a hierarchy of information. The <h1> tag is at the top of the hierarchy, followed by the <h2> tag, then the <h3> tag, and so on.
You can also use the <h4>, <h5>, and <h6> tags to create even smaller headings. However, these tags are not used as often as the <h1>, <h2>, and <h3> tags.
The <h1> tag is used to create a heading.
<h1>This is the main heading</h1> <h2>This is a subheading</h2> <h3>This is a sub-sub heading</h3> <h4>This is a fourth-level heading</h4> <h5>This is a fifth-level heading</h5> <h6>This is a sixth-level heading</h6>
The <p> tag – For paragraphs
The trusty <p> tag wraps paragraph text. No fancy stuff, just a plain old paragraph!
<p> This is now a paragraph! </p>
The <div> tag
<div> stands for “division,” and it’s a generic container you can use to group related elements. It has no default meaning, so you give it meaning by adding a class or ID. For example:
<div class="header"> <h1>My Website</h1> </div>
The <span> tag
<span> is similar to <div>, but for inline elements instead of block elements. You use it to group inline elements like words, images, or links. For example:
<span class="important">This is important!</span>
The list tags
HTML allows you to create and define ordered or unordered lists. Bullet lists use <ul>, and number lists use <ol>. Then we have <li> tags for each list item. Nice and straightforward.
<ul> <li>Apples</li> <li>Oranges</li> <li>Pears</li> </ul> <ol> <li> Wake up. </li> <li> Eat breakfast. </li> <li> Go to work. </li> </ol>
Pretty straightforward, right? The <ul> and <ol> give semantic meaning, and the <li> contains the actual list of items.
See also: Mastering HTML Non-Breaking Hyphen: Best Practices And Uses
What are some of the other HTML tags?
There is a huge number of total HTML tags, but many of them aren’t commonly used. We must see more commonly used ones to answer how many HTML tags there are. In addition to the basic tags, there are several other HTML tags that you can use to create more complex and interactive web pages. These include tags for images, tables, forms, and links.
The <img> tag
For example, the following tag tells the browser to display an image:
<img src="cat.jpg" alt=”image of an orange cat”>
The <img> tag has several attributes that you can use to control how the image is displayed. For example, you can use the src attribute to specify the URL of the image and the alt attribute to specify a text description of the picture.
The <table> tag
The <table> element is used to create tables in HTML. Note that the <table> element contains <tr> elements representing table rows. In turn, the <tr> elements hold <td> elements that represent table data. Aside from that, <tr> elements can also hold <th> elements which hold table headers.
Here’s a basic example
<table> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>John</td> <td>30</td> </tr> <tr> <td>Jane</td> <td>25</td> </tr> </table>
You can also use attributes like:
border – specifies border width
cell padding – specifies padding inside each cell
cell spacing – specifies the spacing between cells
The handy <form> tag
This HTML tag allows you to create HTML forms used for user input. For example,
<form> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"> </form>
Attributes of <form> tag can be action, method, enctype, and target. And the <form> tag can contain tags for user input like <input>, <select>, <button>, and <textarea>
The <a> tag
The <a> tag simply defines a hyperlink, which is something clickable to link one page to another. A simple example,
<a href="https://google.com">Google</a>
It will create a link to Google.
The <a> tag can accept attributes like href, target, download, rel
Now, what is the total number of HTML tags?
So we conclude, just how many HTML tags are there? According to MDN, there are 142 HTML total tags.
Semantic vs. Non-Semantic Tags
Alright, so now that we’ve got an answer for just how many HTML tags there are and know all the basic tags like <p>, <div>, <span>, <table>, etc.
It’s time to think about the difference between tags like <p> and <div>
The main difference is that <p> is a semantic tag while <div> is a non-semantic tag. Semantic tags describe the meaning of what they contain, while non-semantic tags provide a generic container.
Congratulations, now you know how many tags are in HTML. You are on your way to becoming a great web developer!
FAQs
Where can I learn more about HTML tags?
Several resources are available online if you're interested in learning more about HTML tags. You can find tutorials, articles, and books that will teach you everything you need about HTML. W3Schools, Mozilla Developer Network, and sites like Codecademy are good sources to learn from! We went to Mozilla Developer Network to research the total number of tags in HTML.
What Are Semantic Tags Used For?
Semantic tags are better for accessibility, search engine optimization, and the cleanliness of your code. Since screen readers and search engines can understand the tags' meaning.
What Are Non-Semantic Tags Used For?
They give you more flexibility to structure your HTML. But it's good practice to use semantic tags wherever possible and only use non-semantic tags when needed.
Summing Up
Embrace the boundless possibilities of HTML tags as you craft stunning and interactive web experiences with confidence and creativity.
Read also: How Many HTML Tags Are There: Full List
