HTML References
Complete HTML5 Elements
HTML5 made everyday markup more expressive. It gave familiar parts of a webpage meaningful names and added native tools for media, forms, and interactive interfaces.
Use this page as a quick reference. Select any tag to open its lesson, where you’ll find the syntax, practical examples, browser notes, and guidance on when to use it.
Structural & Semantic Elements
These elements give a page a meaningful outline, making its sections easier to understand for readers, browsers, and assistive technology.
| Element | What it is used for |
|---|---|
<article> | A self-contained article, post, comment, or other reusable piece of content. |
<aside> | Supporting content that sits beside the main subject, such as a sidebar or related note. |
<details> | A disclosure section that users can open and close. |
<dialog> | A dialog box or modal window that can be controlled with HTML and JavaScript. |
<figcaption> | The caption attached to a figure. |
<figure> | Self-contained content such as an image, diagram, illustration, or code sample. |
<footer> | Closing information for a page or section. |
<header> | Introductory content for a page or section. |
<hgroup> | A heading grouped with a subtitle, tagline, or other supporting heading text. |
<main> | The page’s unique primary content. |
<mark> | Text highlighted because it is relevant in the current context. |
<menu> | A semantic list of commands or menu items. |
<nav> | A section containing the page’s important navigation links. |
<search> | A section containing search or filtering controls. |
<section> | A themed section of a document, normally introduced by a heading. |
<summary> | The visible label for a collapsible details section. |
<time> | A human-readable date or time with an optional machine-readable value. |
Text & Internationalization Elements
Use these elements when text needs machine-readable data, language annotations, direction isolation, or a safe place to wrap.
| Element | What it is used for |
|---|---|
<bdi> | Isolates text whose writing direction may differ from the surrounding content. |
<data> | Connects visible text with a machine-readable value. |
<ruby> | Wraps base text and the pronunciation or annotation shown with it. |
<rt> | Contains the pronunciation or annotation for ruby text. |
<rp> | Provides fallback parentheses when ruby annotations are not supported. |
<wbr> | Marks a suitable place where a long word or string may wrap. |
Media & Graphics Elements
HTML can handle common media directly, without the plugin-heavy workarounds older websites once needed.
| Element | What it is used for |
|---|---|
<audio> | Adds sound with native playback controls and multiple source options. |
<canvas> | Provides a bitmap drawing surface controlled through JavaScript. |
<embed> | Embeds supported external content when a dedicated HTML element is not available. |
<picture> | Supplies different images for screen sizes, formats, or display conditions. |
<source> | Provides an alternative media or image source for a parent element. |
<track> | Adds captions, subtitles, descriptions, or chapters to audio and video. |
<video> | Adds video with native playback controls, captions, and fallback sources. |
Form & Measurement Elements
These controls make forms more useful and let a page communicate suggestions, results, measurements, and progress clearly.
| Element | What it is used for |
|---|---|
<datalist> | Supplies suggested values for a compatible input control. |
<meter> | Displays a value within a known range, such as a score or storage level. |
<output> | Shows the result of a calculation or user action. |
<progress> | Shows how much of a task has been completed. |
Templates & Modern UI Elements
These elements support reusable interface patterns, web components, and newer customizable controls.
| Element | What it is used for |
|---|---|
<slot> | Marks where outside content should appear inside a web component. |
<template> | Stores markup that remains inactive until it is cloned or rendered. |
<selectedcontent> | Displays a copy of the selected option inside a customizable select button. |