HTML5 Tag Reference — Complete Element Cheatsheet

DodaTech Updated Jun 6, 2026 9 min read

This is a complete reference of all HTML5 elements, organized by category. Use it as a cheatsheet when building HTML pages — bookmark it and come back whenever you need to look up a tag.

How to Use This Reference

Categories — Tags are grouped by purpose (structure, metadata, forms, media, etc.)
HTML5 column — ✓ New marks elements added in HTML5 (not available in older HTML)
Deprecated section — Tags at the bottom that you should NOT use in modern HTML
Global attributes — Apply to every HTML element

Where This Fits

    flowchart LR
    A["MathML"] --> B["**HTML Tag Reference**"]
    B --> C["CSS Tutorials"]
    C --> D["Responsive Design"]
    D --> E["Frontend-Ready Developer"]
    style B fill:#f97316,stroke:#c2410c,color:#fff
    style A fill:#e5e7eb,stroke:#9ca3af,color:#374151
    style E fill:#22c55e,stroke:#16a34a,color:#fff

✅ = Standard since HTML4 or earlier ✓ = New in HTML5

Document Structure

Tag	Description	HTML5
`<!DOCTYPE html>`	Document type declaration (must be first line)	✅
`<html>`	Root element wrapping the entire page	✅
`<head>`	Container for metadata (title, links, styles)	✅
`<body>`	Visible page content	✅
`<title>`	Page title (browser tab, search results)	✅
`<base>`	Base URL for all relative links in the page	✅

Metadata

Tag	Description	HTML5
`<meta>`	Sets charset, viewport, description, and more	✅
`<link>`	Links external resources (CSS stylesheets, favicon)	✅
`<style>`	Internal (page-level) CSS styles	✅

Use these inside <head>. The most common <meta> tags:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Page description for search results">

Content Sections (Semantic Layout)

Tag	Description	HTML5
`<h1>` to `<h6>`	Headings (h1 = most important, h6 = least)	✅
`<header>`	Introductory content — logo, heading, nav	✓
`<nav>`	Navigation links	✓
`<main>`	Primary content (use exactly once per page)	✓
`<section>`	Thematic group of content within a page	✓
`<article>`	Self-contained, reusable content (blog post, news)	✓
`<aside>`	Sidebar / tangentially related content	✓
`<footer>`	Closing content — copyright, contact, links	✓
`<address>`	Contact information (author / organization)	✅

Text Content

Tag	Description	HTML5
`<p>`	Paragraph	✅
`<div>`	Generic block container (no semantic meaning)	✅
`<hr>`	Thematic break (horizontal rule)	✅
`<pre>`	Preformatted text (preserves spaces and line breaks)	✅
`<blockquote>`	Block-level quotation	✅
`<figure>`	Self-contained media (image, diagram, code) with caption	✓
`<figcaption>`	Caption for a `<figure>`	✓
`<details>`	Expandable disclosure widget	✓
`<summary>`	Visible label for `<details>`	✓

Inline Text Semantics

Tag	Description	HTML5
`<span>`	Generic inline container (no semantic meaning)	✅
`<a>`	Hyperlink (`href` attribute specifies destination)	✅
`<strong>`	Strong importance (renders bold)	✅
`<em>`	Emphasis (renders italic)	✅
`<b>`	Bold text (presentational only)	✅
`<i>`	Italic text (alternate voice, technical terms)	✅
`<u>`	Underlined text	✅
`<s>`	Strikethrough (no longer accurate/correct)	✅
`<small>`	Side-comments, fine print, disclaimers	✅
`<mark>`	Highlighted / search-highlighted text	✓
`<del>`	Deleted text (strikethrough)	✅
`<ins>`	Inserted text (underline)	✅
`<sub>`	Subscript (H₂O)	✅
`<sup>`	Superscript (x²)	✅
`<code>`	Inline code snippet	✅
`<kbd>`	Keyboard input (user typing)	✅
`<samp>`	Sample output from a program	✅
`<var>`	Variable name in math or programming	✅
`<q>`	Short inline quotation	✅
`<cite>`	Citation (title of a creative work)	✅
`<dfn>`	Defining instance of a term	✅
`<abbr>`	Abbreviation / acronym (`title` attribute expands it)	✅
`<time>`	Machine-readable date or time	✓
`<data>`	Machine-readable content linked to a value	✓
`<bdi>`	Bi-directional isolate (text direction isolation)	✓
`<bdo>`	Bi-directional override (force text direction)	✅
`<ruby>`	Ruby annotation (East Asian pronunciation guides)	✅
`<rt>`	Ruby text (pronunciation)	✅
`<rp>`	Ruby parentheses (for browsers without ruby support)	✅
`<wbr>`	Word break opportunity (where a line may break)	✓

Lists

Tag	Description	HTML5
`<ul>`	Unordered list (bullets)	✅
`<ol>`	Ordered list (numbers or letters)	✅
`<li>`	List item (inside `<ul>`, `<ol>`, or `<menu>`)	✅
`<dl>`	Description list (terms + definitions)	✅
`<dt>`	Description term	✅
`<dd>`	Description details / definition	✅

Tables

Tag	Description	HTML5
`<table>`	Table container	✅
`<caption>`	Table title / caption	✅
`<thead>`	Table header group (column headings)	✅
`<tbody>`	Table body group (data rows)	✅
`<tfoot>`	Table footer group (summary rows)	✅
`<tr>`	Table row	✅
`<th>`	Table header cell (bold, centered by default)	✅
`<td>`	Table data cell	✅
`<col>`	Column properties (used inside `<colgroup>`)	✅
`<colgroup>`	Group of columns for styling	✅

Forms

Tag	Description	HTML5
`<form>`	Form container (collects user input)	✅
`<input>`	Input field (text, email, password, number, checkbox, radio, etc.)	✅
`<textarea>`	Multi-line text input	✅
`<button>`	Clickable button (`type="submit"` / `"reset"` / `"button"`)	✅
`<select>`	Dropdown list	✅
`<option>`	Individual option in a `<select>` or `<datalist>`	✅
`<optgroup>`	Group of `<option>` elements with a label	✅
`<label>`	Label for a form control (`for` attribute links to `id`)	✅
`<fieldset>`	Groups related form controls with a border	✅
`<legend>`	Caption / title for a `<fieldset>`	✅
`<datalist>`	Autocomplete suggestions for an `<input>`	✓
`<output>`	Display the result of a calculation	✓
`<progress>`	Progress bar for a task (value/max)	✓
`<meter>`	Gauge / scalar measurement (disk usage, rating)	✓

Images & Graphics

Tag	Description	HTML5
`<img>`	Image (`src` + `alt` required)	✅
`<map>`	Image map with clickable regions	✅
`<area>`	Clickable area within an image map	✅
`<picture>`	Art direction / responsive images (with `<source>`)	✓
`<canvas>`	Pixel-based 2D drawing with JavaScript	✓
`<svg>`	Scalable vector graphics (inline or external)	✓
`<math>`	Mathematical notation (MathML)	✓

Media

Tag	Description	HTML5
`<audio>`	Audio player (with `controls` attribute)	✓
`<video>`	Video player (with `controls` attribute)	✓
`<source>`	Multiple media source formats (inside `<audio>`, `<video>`, `<picture>`)	✓
`<track>`	Captions / subtitles / chapters for `<video>`	✓
`<embed>`	Embedded external content (deprecated, use `<iframe>`)	✅
`<object>`	Embedded object (PDF, Flash, applets)	✅
`<param>`	Parameter for an `<object>`	✅

Scripting

Tag	Description	HTML5
`<script>`	JavaScript code (inline or `src` attribute)	✅
`<noscript>`	Fallback content shown when JavaScript is disabled	✅
`<template>`	Reusable HTML template (not rendered until cloned via JS)	✓
`<slot>`	Placeholder in a Web Component for external content	✓

Interactive

Tag	Description	HTML5
`<details>`	Expandable disclosure widget (click to show/hide)	✓
`<summary>`	Visible label for `<details>`	✓
`<dialog>`	Modal or non-modal dialog box	✓
`<menu>`	Menu / toolbar (semantic container for commands)	✓

Global Attributes (Every Element)

These attributes work on all HTML elements:

Attribute	Purpose
`class`	CSS class selector (multiple classes: `class="foo bar"`)
`id`	Unique identifier (one per page, used for CSS and anchors)
`style`	Inline CSS styles
`title`	Tooltip text shown on hover
`lang`	Language code (`"en"`, `"es"`, `"fr"`)
`dir`	Text direction (`"ltr"` default, `"rtl"` for Arabic/Hebrew)
`hidden`	Hides the element (like `display: none`)
`tabindex`	Keyboard focus order (`0` = natural, `-1` = script only)
`data-*`	Custom data attributes (`data-user-id="42"`)
`role`	ARIA role for accessibility (`role="navigation"`)
`aria-*`	ARIA states and properties (`aria-label`, `aria-expanded`)
`contenteditable`	Makes element editable by the user (`"true"` / `"false"`)
`draggable`	Enables drag and drop (`"true"` / `"false"`)
`spellcheck`	Enable or disable spell checking

Deprecated Tags (DO NOT Use)

These tags are removed or discouraged. Use CSS or modern HTML5 alternatives instead:

Tag	What to Use Instead
`<center>`	CSS `text-align: center` or flexbox
`<font>`	CSS `font-family`, `font-size`, `color`
`<basefont>`	CSS font properties
`<big>`	CSS `font-size: larger`
`<strike>`	`<del>` (deleted text) or `<s>` (no longer accurate)
`<tt>`	`<code>`, `<kbd>`, `<samp>`, or `<pre>`
`<u>`	CSS `text-decoration: underline` (use only if meaning is not better served by `<ins>`)
`<frame>`	`<iframe>` for embedding, CSS for layout
`<frameset>`	CSS grid or flexbox for layout
`<noframes>`	No longer needed (frames are obsolete)
`<acronym>`	`<abbr>` (abbreviations)
`<applet>`	`<object>` or `<embed>`
`<isindex>`	`<input type="search">`
`<dir>`	`<ul>` (unordered list)
`<marquee>`	CSS animations (`@keyframes`)

Quick Tips

Always use <!DOCTYPE html> — without it, browsers enter quirks mode
One <main> per page — screen readers use it to skip to content
<h1> once per page — defines the main topic
<img> must have alt — accessibility and SEO requirement
Form inputs need <label> — linked via for/id
Use semantic <nav>, <article>, <aside> — not generic <div>s
Avoid deprecated tags — they may stop working in future browsers

Practice Challenge

Create a one-page reference card for yourself:

Pick 10 tags you use most often
For each tag, write one sentence describing when to use it
Include a small code example for each
Organize by category

Common Mistakes Beginners Make

1. Skipping the Fundamentals

Many beginners jump straight to advanced topics without mastering the basics. Take time to understand the core concepts before moving on.

2. Not Practicing Enough

Reading tutorials without writing code leads to shallow understanding. Code along with every example and experiment on your own.

3. Ignoring Error Messages

Error messages tell you exactly what went wrong. Read them carefully — they usually point to the line and type of issue.

4. Copy-Pasting Without Understanding

It’s tempting to copy code from tutorials, but typing it yourself and understanding each line builds real skill.

5. Giving Up Too Early

Every developer hits frustrating bugs. Take breaks, ask for help, and remember that struggling is part of learning.

FAQ

{< faq >}

What is Html Reference?: Html Reference refers to the core concepts and practices used to build and manage modern web applications. Understanding it is essential for web developers.
Do I need prior experience to learn Html Reference?: Basic familiarity with web development concepts helps, but Html Reference can be learned step by step even as a beginner.
How long does it take to learn Html Reference?: With consistent practice, you can grasp the fundamentals in a few days to a week. Mastery takes ongoing practice and real-world projects.
Where can I use Html Reference in real projects?: Html Reference is used in a wide range of applications — from simple websites to complex enterprise systems, depending on the specific tools and technologies involved.
What are common tools used with Html Reference?: The specific tools depend on the technology stack, but version control (Git), package managers, and testing frameworks are commonly used alongside most development topics.

{< /faq >}