How Many HTML Tags There Are: All Listed and Categorized by Type

To create a truly semantic webpage, it is important to review and understand all the different types of tags in HTML that are currently supported. Doing so will allow you to utilize HTML tags correctly and avoid the usage of deprecated tags to develop quality HTML documents and or webpages. Therefore, in this article, we have uncovered how many HTML tags there are. We have also provided all the currently supported HTML tags as well as the deprecated/obsolete ones.

How Many HTML Tags Are There?

According to Mozilla Developer Network(MDN), there are 142 HTML tags. However, only 115 are functional with the other 27 being deprecated or obsolete. Each of the HTML tags has different functionalities across semantic purposes that help define the structure of HTML documents designed to be displayed in a web browser.

Of the 142 HTML tags that exist, all of them serve their purpose across different levels within the HTML document, some of them become full elements and some become empty elements. Full elements have permitted content while empty elements don’t have any permitted content.

How Many Heading Tags Are There in HTML?

There are 6 heading tags in HTML which are also referred to as levels of HTML headings. <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> are the 6 HTML heading tags with h1 being the largest and most important level and h6 being the smallest and the least important.

An HTML tag indicates the beginning and end of an HTML element which helps web browsers convert HTML documents into web pages. Therefore, upon encountering a tag within an HTML document, the browser understands the tag’s element properties and renders that content based on those properties.

All HTML Tags List

As stated earlier, there are 142 HTML tags. However, only 115 of those tags are not deprecated or obsolete. Therefore, below we have listed all 115 tags with descriptions each grouped according to 16 types of tags in HTML.

Main Root

<html> - represents and defines the HTML document.

Metadata

<base> - defines the base URL that dictates the relative URLs for the document.
<head> - contains all the metadata of the HTML document
<link> - describes the relationship between the document and external resources such as CSS files, favicons, or SVGs.
<meta> - represents the metadata of the HTML document that other elements can’t describe.
<style> - as an element, its content contains CSS style rulesets.
<title> - dictates the content that should be displayed in the title or page tab of your browser

Sectioning Root

<body> - represents and contains the visible content of the HTML

Content sectioning

<address> - renders contact information of a person or people, or for an organization
<article> - describes a separate and independent composition of content within a web resource
<aside> - defines a separate and indirectly related composition of content
<footer> - represents a footer section that holds relevant information
<header> - renders introductory content which often serves as navigational aids.
<h> - h1 to h6 serves as a six-level sectional heading to head over a content section
<main> - represents the main content of the document body
<nav> - defines the page section that provides navigation links
<section> - defines independent and sectional content for the HTML document.

Text Content

<blockquote> - renders the content as a quotation via indentation
<dd> - describes and defines the preceding term, <dt> - another element, within a description list.
<div> - serves as a container for different content within an HTML document, often a layout or flow.
<dl> - renders a description list
<dt> - defines a term within a description list.
<figcaption> - defines a caption that describes the content of the figure element.
<hr> - represents a thematic break between elements
<li> - defines an item within an ordered or unordered list
<menu> - it serves as a semantic alternative to ul, which is an unordered list of items.
<ol> - renders an ordered list of items
<p> - defines a paragraph of text based on the content between the tags
<pre> - describes a preformatted text as written in the file with no changes to the whitespaces.
<ul> - renders an unordered list of items

Inline Text Semantics

<a> - serves as a hyperlink to other resources and makes use of the href attribute to dictate the resource link
<abbr> - denotes an abbreviation
<b> - renders the content it contains to be more important than other texts, and is often presented as a bold text.
<bdi> - interprets the text it contains to use the browser’s bidirectional algorithm.
<bdo> - dictates that the contained content overrides the current text directionality.
<br> - connotates a line break in the text
<cite> - defines a reference that has been cited within the HTML document
<code> - renders the contents in contains in a program code fashion, and often uses the monospace font specified by default or the CSS code
<data>
<dfn> - defines the terms within its tags are a definition phrase or sentence.
<em> - marks its content with a stress emphasis often with the use of a default styling or CSS-specified styling.
<i> - serves as a set-off of the typical text arrangement to show some difference.
<kbd> - renders its inline text as a textual user input
<mark> - renders its contents as marked and highlighted.
<q> - describes a short inline quotation
<rp> - defines fall-back parentheses for use cases where certain display annotations are not supported.
<rt> - dictates the ruby text component of a ruby annotation
<ruby> - renders its contents as small annotations
<s> - displays the content with a strikethrough
<samp> - renders inline text with an enclosure
<small> - used to reduce the size of the content to show it as a comment or small print information
<span> - describes an inline container for textual content
<strong> - renders the content as one with strong importance
<sub> - renders the content as a subscript
<sup> - renders the content as a superscript
<time> - renders a time period that has been specified
<u> - defines the inline content as one with no textual annotation
<var> - describes the variable name of a mathematical expression
<wbr> - defines a word break opportunity

Image and Multimedia

<area> - connotates an image map area
<audio> - defines an embed for an audio content
<img> - defines an embed for an image content
<map> - renders a clickable image map
<track> - child element which works with audio and video to define the time text tracks
<video> - defines an embed for a video content

Embedded Content

<embed> - defines an embed for an external content
<iframe> - describes an embedded or nested browsing context within the current HTML document
<object> - defines an embedded or nested external resource
<picture> - defines zero or more source elements and one img element for alternative images for different resolutions.
<portal> - renders an embedding of another HTML page into a current one.
<source> - dictates multiple media resources for the picture, audio, and video element

SVG and MathML

<svg> - renders a container that holds a coordinate system for SVG files.
<math> - serves as the top-level element in MathML.

Scripting

<canvas> - renders graphics and animations using the canvas and WebGL API
<noscript> - defines an HTML content that can be inserted if a particular script type isn’t supported by the browsers
<script> - links or contains JavaScript code

Demarcating Edits

<del> - renders text that has been deleted from the HTML document
<ins> - renders text that has been inserted into the HTML document

Table Content

<caption> - defines a table caption
<col> - renders a table column
<colgroup> - renders a table’s group of column
<table> - defines a table that holds tabular data
<tbody> - renders a set of table rows
<td> - defines a cell of a table
<tfoot> - renders a row set that’s held within the table’s column
<th> - describes the table’s header over a cell group.
<thead> - renders a row set that’s held within the head of the table’s column
<tr> - defines a row of cells in a table

Forms

<button> -renders an interactive medium that allows a user to perform a particular action
<datalist> - defines a set of options to select from
<fieldset> - defines a grouping of labels and controls
<form> - renders a form within an HTML document that contains interactive mediums to submit information and useful data.
<input> - renders an interactive input medium that can take in different forms of data depending on its attribute or type
<label> - defines a caption for form input
<legend> - defines a caption for fieldset content
<meter> - renders a scalar value within a range value
<optgroup> - defines a grouping of select options
<option> - defines an item within a select, optgroup, and a datalist element
<output> - defines a container element where results can be displayed
<progress> - renders an indicator showing completeness
<select> - defines a menu control to select options
<textarea> - renders an interactive multi-line text form field.

Interactive Elements

<details> - renders a disclosure widget
<dialog> - defines a dialog box
<summary> - describes a summary text within the details element

Web Components

<slot> - serves as a placeholder within a web component
<template> - serves as a mechanism within the HTML document when certain sections are not rendered immediately.

Final Thoughts

There are 142 HTML tags within the latest HTML version, HTML 5.2. Only 115 tags are deemed functional and usable within any HTML code. These tags indicate the beginning and end of an HTML element that serves as a node within the DOM to define the structure of a webpage.