Complete List of Essential HTML5 Tags Every Developer Should Know

Last updated 3 months, 3 weeks ago · 6 min read

This article will list most HTML5 elements and what you can use them for in your HTML5 document.

Before we list them let's define what HTML is.
HTML (Hypertext Markup Language) forms the foundation of web development, defining the structure and content of web pages. This means that all the web pages you view on a browser are structured by HTML, including this website.
Over the years HTML has advanced starting from its first version HTML1 HTML2, HTML3, HTML4, and now HTML5.
HTML5 has brought many new elements and features, and in this article, we will highlight and explore most of these important elements.

Here's a comprehensive list of HTML elements:

<html>: Defines the root of an HTML document.

<head>: Contains metadata and other information about the document.

<title>: Defines the title of the document.

<body>: Contains the content of the document.

<header>: Represents introductory content at the beginning of a document or section.

<footer>: Represents footer content at the end of a document or section.

<nav>: Represents a section of navigation links.

<article>: Represents an independent piece of content.

<section>: Represents a generic section of content.

<aside>: Represents content aside from the content it is placed in.

<main>: Represents the main content of the document.

<figure>: Represents self-contained content, such as images, diagrams, or code snippets.

<figcaption>: Represents a caption or legend for the content of a <figure> element.

<p>: Represents a paragraph.

<div>: Represents a generic container for other elements.

<span>: Represents a section in a document for styling purposes.

<strong>: Represents strong importance, typically displayed in bold.

<em>: Represents emphasized text, typically displayed in italics.

<blockquote>: Defines a section that is quoted from another source.

<cite>: Defines the title of a work.

<q>: Defines a short inline quotation.

<abbr>: Defines an abbreviation or acronym.

<address>: Defines contact information for the author or owner of a document.

<time>: Defines a specific time or a duration.

<code>: Defines a piece of computer code.

<kbd>: Defines keyboard input.

<mark>: Defines marked or highlighted text.

<sub>: Defines subscript text.

<sup>: Defines superscript text.

<hr>: Defines a thematic break or horizontal rule.

<a>: Defines a hyperlink.

<img>: Defines an image.

<video>: Defines a video.

<audio>: Defines audio content.

<ul>: Defines an unordered list.

<ol>: Defines an ordered list.

<li>: Defines a list item.

<dl>: Defines a description list.

<dt>: Defines a term/name in a description list.

<dd>: Defines a description of the term/name in a description list.

<table>: Defines a table.

<thead>: Defines the header of a table.

<tbody>: Defines the body content of a table.

<tfoot>: Defines the footer content of a table.

<tr>: Defines a row in a table.

<th>: Defines a header cell in a table.

<td>: Defines a standard cell in a table.

<form>: Defines an HTML form for user input.

<button>: Defines a clickable button.

<figure>: Represents self-contained content, such as images, diagrams, or code snippets.

<figcaption>: Represents a caption or legend for the content of a <figure> element.

<time>: Represents a specific time or a duration.

<video>: Defines a video.

<audio>: Defines audio content.

<canvas>: Represents a region that can be used to draw graphics on the fly via scripting.

<progress>: Represents the completion progress of a task.

<meter>: Represents a scalar measurement within a known range.

<details>: Represents a disclosure widget from which the user can obtain additional information or controls.

<summary>: Represents a summary, caption, or legend for the content of a <details> element.

<datalist>: Represents a set of predefined options for other controls.

<dialog>: Represents a dialog box or other interactive component.

<template>: Represents a fragment of HTML that can be cloned and inserted in the document by script.

<script>: Is used to add inline script into a web page.

<style>: Is used to add inline styling to a web page.

Complete List of Essential HTML5 Tags Every Developer Should Know

In HTML, most elements have both opening and closing tags. However, some elements do not follow this rule.
These are known as void elements.
Void HTML elements are self-closing, meaning they do not have closing tags and cannot contain any content or child elements.
Here is a list of HTML void elements:

<input>: Defines an input control. Input control has the type attribute which will define the type of input it will accept, Ex: type="text", accepts text input, type="email" accepts email input, type="password", accepts password, etc.
<br>: This element is used to break to a new line.
<hr>: Is used to create a horizontal line.
<meta>: Defines the title of the document.
<link>: Contains the content of the document.
<area>: Defines clickable areas in image maps.
<col>: Defines styles for table columns.
<embed>: Embeds external content (e.g., videos, plugins).
<img>: Used to embed an image content into a webpage.
<input>: Creates input fields for forms, commonly used within the <form> element. It includes a special attribute, type, with values such as type="text", type="email", type="tel", etc., allowing the input fields to have different formats and functionalities.
<source>: Specifies alternative resources for media elements.
<track>: Adds subtitles or captions for media content.
<wbr>: Suggests line break opportunities for long words/URLs.

In conclusion, HTML tags serve as the foundation of web development,
defining the structure and content of web pages. Void elements, such as <img> (for embedding images) and
(for line breaks), are self-closing and fulfill specific roles without requiring closing tags.
Meanwhile, non-void elements, like <p> (for paragraphs), <div> (for containers), and <h1> to <h6> (for headings), utilize both opening and closing tags to encapsulate content and add meaning or organization to a webpage.

To master HTML, it's essential to delve deeper into each element. Select a specific tag, study its documentation across multiple resources,
and experiment with it practically to gain a comprehensive understanding of how it works in various contexts.
With that, we bid you farewell for now. Be sure to explore the articles below to continue expanding your knowledge.