HTML5 Cheat Sheet

Updated 2026-04-28

Next Topic: htmx Hypermedia-Driven Approach Cheat Sheet

HTML5 is the fifth major version of the Hypertext Markup Language — the standard markup language for creating web pages and applications. It introduced semantic elements, multimedia support, form enhancements, and powerful APIs that transformed the web from a document platform into a full application ecosystem. Modern browsers implement HTML5 as a living standard, continuously evolving through WHATWG. One critical insight: HTML5's true power lies not in replacing JavaScript frameworks but in reducing reliance on them — native features like <dialog>, <details>, popover, and form validation eliminate thousands of lines of custom code while improving accessibility and performance.

What This Cheat Sheet Covers

This topic spans 21 focused tables and 257 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.

Table 1: Document Structure ElementsTable 2: Semantic Structural ElementsTable 3: Text Content and Semantic MarkupTable 4: Inline Text Semantic ElementsTable 5: HTML Table ElementsTable 6: Form Input TypesTable 7: Form Validation AttributesTable 8: Form Elements and ControlsTable 9: Multimedia ElementsTable 10: Interactive and Advanced ElementsTable 11: Script Loading and EmbeddingTable 12: Global AttributesTable 13: Link and Resource HintsTable 14: Responsive Image AttributesTable 15: Form and Input AttributesTable 16: Media Element AttributesTable 17: Iframe Security and EmbeddingTable 18: ARIA Accessibility Roles and AttributesTable 19: Web Storage APIsTable 20: Advanced JavaScript APIsTable 21: Meta Tags for SEO and Social Media

Table 1: Document Structure Elements

Every HTML page starts with the same scaffolding — the doctype, the <html>/<head>/<body> skeleton, and the metadata that lives in the head. These elements rarely show anything on screen, but they decide character encoding, mobile scaling, what loads first, and how search engines read the page. Get them right once and the rest of the document has something solid to stand on.

Element	Example	Description
`<!DOCTYPE html>`	`<!DOCTYPE html>`	• Declares HTML5 document type • required at the top of every HTML5 page to trigger standards mode.
`<html>`	`<html lang="en">`	• Root element containing all content • `lang` attribute required for accessibility and search engines.
`<head>`	`<head>` `<meta charset="UTF-8">` `</head>`	• Contains metadata, scripts, stylesheets • not visible to users but critical for SEO and functionality.
`<body>`	`<body>` `<h1>Hello</h1>` `</body>`	• Contains all visible page content • only one per document, comes after `<head>`.
`<meta charset>`	`<meta charset="UTF-8">`	• Specifies character encoding • UTF-8 recommended to support all languages and symbols.
`<meta viewport>`	`<meta name="viewport" content="width=device-width, initial-scale=1">`	• Controls layout on mobile browsers • essential for responsive design, sets initial zoom and width.

Table 1: Document Structure Elements

Element	Example	Description
`<!DOCTYPE html>`	`<!DOCTYPE html>`	• Declares HTML5 document type • required at the top of every HTML5 page to trigger standards mode.
`<html>`	`<html lang="en">`	• Root element containing all content • `lang` attribute required for accessibility and search engines.
`<head>`	`<head>` `<meta charset="UTF-8">` `</head>`	• Contains metadata, scripts, stylesheets • not visible to users but critical for SEO and functionality.
`<body>`	`<body>` `<h1>Hello</h1>` `</body>`	• Contains all visible page content • only one per document, comes after `<head>`.
`<meta charset>`	`<meta charset="UTF-8">`	• Specifies character encoding • UTF-8 recommended to support all languages and symbols.
`<meta viewport>`	`<meta name="viewport" content="width=device-width, initial-scale=1">`	• Controls layout on mobile browsers • essential for responsive design, sets initial zoom and width.