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 HTML as a living standard, continuously evolving through WHATWG rather than through numbered releases. 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, 182 flashcards, 7 practice tests with 268 questions. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
A jump-to index of every table row in this cheat sheet.
An interactive map of every table and concept in this topic.
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> | • Switches the browser into standards mode; it does not select an HTML version • required as the very first line, or the page falls back to legacy quirks mode. | ||
<html lang="en"> | • Root element containing all content; only one per document • lang strongly recommended so screen readers pronounce the page correctly and search engines index it by language. | ||
<head> <meta charset="UTF-8"></head> | • Contains metadata, scripts, stylesheets • not visible to users but critical for SEO and functionality; unrelated to the visible <header> element. | ||
<body> <h1>Hello</h1></body> | • Contains all visible page content • only one per document, comes after <head>. | ||
<meta charset="UTF-8"> | • Specifies character encoding; must sit entirely within the first 1024 bytes, so put it first in <head>• UTF-8 required for HTML documents and supports every language and emoji. | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | • Controls layout on mobile browsers • essential for responsive design; without it phones lay out at a virtual ~980px width and shrink the result, so narrow media queries never fire. | ||
<title>My Page</title> | • Defines the document title shown in the browser tab and search results • SEO-critical; also the default bookmark name. Distinct from the <h1> heading. | ||
<link rel="stylesheet" href="style.css"> | • States a relationship to an external resource such as stylesheets, icons, or preloads • rel and href required; versatile rel values control resource type and behavior. | ||
<style> body { color: red; }</style> | • Embeds CSS directly in the document; goes inside <head>• use sparingly, since external stylesheets are cached across pages and easier to maintain. | ||
<script src="app.js" defer></script> | • Embeds or links JavaScript; never self-closing, it always needs a </script> end tag• defer recommended to avoid blocking HTML parsing; see Script Loading table. | ||
<noscript><p>Enable JS</p></noscript> | • Fallback content shown only when scripting is disabled or unsupported • does not fire when a script merely throws an error. | ||
<base href="https://example.com/"> | • Sets the base URL for all relative URLs in the document, including #fragment links• only one allowed per page; must appear before other URL-bearing elements. |