HTML5 Elements Reference
On this page, you are going to find the complete reference of standard elements belonging to the latest specification HTML5 and read their brief descriptions.
HTML5 is a set of technologies for building more diverse and powerful web sites and applications, which support multimedia, interact with software interfaces, structure documents, etc.
This page is a quick reference to the elements that HTML5 added (or formally standardized). Each entry links to a dedicated chapter with attributes, browser support, and runnable examples.
Why HTML5 added semantic elements
Before HTML5, page structure was built almost entirely from generic <div> and <span> containers, distinguished only by class or id names that meant something to the author but nothing to the machine. HTML5 introduced semantic elements — tags whose names describe the meaning of the content they wrap (<header>, <nav>, <article>, <footer>, …) rather than just its appearance. This matters for three concrete reasons:
- Accessibility. Screen readers and other assistive technologies expose landmarks like "main", "navigation", and "complementary" so users can jump straight to the part they want. A
<nav>is announced as navigation; a<div class="nav">is not. - SEO and machine readability. Search engines and other crawlers use the structure to understand what a page is about and which part is the primary content, instead of guessing from class names.
- Maintainability. Semantic markup reads like an outline of the page, so the next developer (or future you) understands the layout without decoding CSS hooks.
For a fuller walkthrough of structuring a page semantically, see Semantic Elements in HTML5.
Note: A few elements listed below — such as
<embed>and<wbr>— existed in browsers long before HTML5 and were merely standardized (formally specified) in it, rather than being brand-new.
New Structural/Semantic Elements
| Elements | Description |
|---|---|
<article> | Defines an independent, self-contained content. |
<aside> | Defines a section with additional information related to the content around the aside element. |
<details> | Contains additional details that the user can open and view. |
<dialog> | Specifies a dialog box or window. |
<figcaption> | Adds a caption or explanation to the contents of the <figure> tag. |
<figure> | Specifies a self-contained content. |
<footer> | Defines the footer of a web page or a section. |
<header> | Defines a header of a page or a section. |
<main> | Specifies a document’s main content. |
<nav> | Defines a block of navigation links, either within the current document or to other documents. |
<section> | Creates standalone sections within a webpage containing logically connected content. |
<summary> | Defines the visible header for the <details> element. |
Typographic & Internationalization (i18n) Elements
These elements describe text-level meaning, annotations, and the handling of mixed-direction or East Asian scripts.
| Elements | Description |
|---|---|
<bdi> | Isolates bidirectional text (when a language with right-to-left directionality, such as Arabic or Hebrew, is used in line with left-to-right languages). |
<data> | Links the visible content to a machine-readable value (added in HTML 5.1). |
<mark> | Marks a part of the text which has relevance. |
<rp> | Defines alternative text displayed in browsers that do not support the <ruby> tag. |
<rt> | Adds the pronunciation/annotation text shown above (or beside) the base text inside a <ruby> element. |
<ruby> | Defines a ruby annotation (furigana) — phonetic guides used with Japanese and other East Asian languages. |
<time> | Defines a human-readable time on a 24-hour clock or a precise date in the Gregorian calendar. |
<wbr> | Marks a position where the browser may add a line break if needed (a "word break opportunity"). |
New Form Elements
| Elements | Description |
|---|---|
<datalist> | Creates a list of input options predefined by the <input> tag. |
<output> | Defines a place for representing the result of a calculation performed by a script or user’s interaction with a form element (<form> tag). |
New Media & Graphics Elements
| Elements | Description |
|---|---|
<audio> | Embeds audio content in an HTML document. |
<canvas> | Defines an area on the web page where we can draw objects, images, animations, and photo compositions via scripts. |
<embed> | Acts as a container for external applications and interactive content (standardized in HTML5). |
<picture> | Provides multiple image sources so the browser can pick the best one for the viewport or format. |
<source> | Defines multiple media resources in different formats for <audio>, <video>, or <picture>. |
<svg> | Draws scalable vector graphics (see SVG in HTML5). |
<track> | Specifies text tracks (captions, subtitles) for media elements. |
<video> | Embeds video in an HTML document. |
Other New Elements
| Elements | Description |
|---|---|
<meter> | Defines a scalar measurement within a known range (for example, disk usage). |
<progress> | Displays the completion progress of a task (a progress bar). |
<template> | Holds inert HTML that is not rendered on load but can be cloned and inserted by script. |
Removed / Obsolete in HTML5
These elements were once part of the specification but have since been removed. Browsers no longer support them reliably, and you should not use them in new code.
| Elements | Description |
|---|---|
<keygen> | Generated a public/private key pair on form submission. Removed from the standard — use the Web Crypto API instead. |
<menuitem> | Defined a command in a context menu. Removed from the standard; never widely supported. |
A quick semantic example
The fragment below shows how the structural elements fit together to describe a typical page layout — note that it reads like an outline even without any CSS:
<body>
<header>
<h1>My Blog</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h2>Why semantic HTML matters</h2>
<p>Semantic tags describe meaning, not just appearance.</p>
<figure>
<img src="diagram.png" alt="Page structure diagram" />
<figcaption>A semantic page outline.</figcaption>
</figure>
</article>
<aside>
<h2>Related</h2>
<p>Links to other posts.</p>
</aside>
</main>
<footer>
<p>© 2024 My Blog</p>
</footer>
</body>