HTML Cheat Sheet

Updated 2026-04-27

HTML (HyperText Markup Language) is the standard markup language for creating web pages and web applications, serving as the foundation of all content on the World Wide Web. Developed by Tim Berners-Lee in the early 1990s, HTML structures documents through elements (tags) that define everything from headings and paragraphs to forms and multimedia. While HTML provides the skeleton of web content, it works alongside CSS for presentation and JavaScript for behavior. Understanding HTML's semantic elements, attributes, and best practices is crucial: properly structured HTML improves accessibility (screen readers can navigate content meaningfully), SEO (search engines index semantic markup more effectively), and maintainability. The HTML Living Standard continues to evolve, with features like the Popover API, the <search> element, and native exclusive accordions reaching full browser support in 2024–2025.

What This Cheat Sheet Covers

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

Table 1: Document StructureTable 2: Semantic Structure ElementsTable 3: Heading and Text ContentTable 4: Text Formatting ElementsTable 5: ListsTable 6: Links and NavigationTable 7: Images and MediaTable 8: TablesTable 9: FormsTable 10: Input TypesTable 11: Form Validation AttributesTable 12: Global AttributesTable 13: ARIA Attributes (Accessibility)Table 14: Link Relationship Types (rel)Table 15: Embedded ContentTable 16: Interactive ElementsTable 17: Scripting ElementsTable 18: Metadata ElementsTable 19: Character EntitiesTable 20: Event AttributesTable 21: Progress and MeasurementTable 22: Security and Resource AttributesTable 23: Microdata AttributesTable 24: Deprecated Elements (Legacy)

Table 1: Document Structure

Every HTML page is built on the same skeleton, and these are its bones — the doctype that switches the browser into standards mode, the <html> root, and the split between <head> (metadata the user never sees) and <body> (everything they do). Get this scaffolding right and the rest of your markup has somewhere to live.

Element	Example	Description
`<!DOCTYPE html>`	`<!DOCTYPE html>`	• Declaration that defines document as HTML5 • must be the first line to trigger standards mode.
`<html>`	`<html lang="en">`	• Root element containing all other elements • `lang` attribute specifies document language.
`<head>`	`<head>` `<meta charset="UTF-8">` `</head>`	Container for metadata — includes title, scripts, stylesheets, and other non-visible elements.
`<body>`	`<body>` `<h1>Hello</h1>` `</body>`	Main content container — all visible content goes inside body.
`<title>`	`<title>Page Title</title>`	• Document title displayed in browser tab • crucial for SEO and bookmarks.

Table 1: Document Structure

Element	Example	Description
`<!DOCTYPE html>`	`<!DOCTYPE html>`	• Declaration that defines document as HTML5 • must be the first line to trigger standards mode.
`<html>`	`<html lang="en">`	• Root element containing all other elements • `lang` attribute specifies document language.
`<head>`	`<head>` `<meta charset="UTF-8">` `</head>`	Container for metadata — includes title, scripts, stylesheets, and other non-visible elements.
`<body>`	`<body>` `<h1>Hello</h1>` `</body>`	Main content container — all visible content goes inside body.
`<title>`	`<title>Page Title</title>`	• Document title displayed in browser tab • crucial for SEO and bookmarks.