Short answer: An HTML page needs <!DOCTYPE html>, an <html lang> element, <meta charset="utf-8">, a viewport meta tag and a <title>. Inside the body, use semantic elements such as <main>, <nav> and <article>, label every form field, and give every image an alt. Modern HTML also has built-in widgets that need no JavaScript, such as <details>, <dialog> and the popover attribute. The tables below follow the WHATWG living standard.
The syntax in this HTML cheat sheet was checked against the WHATWG HTML Living Standard and MDN on 9 October 2026. The markup examples were run through the W3C Nu Html Checker with no errors on 9 October 2026, and the details, popover, dialog, inert and button examples were tested in headless Chromium 141.
Table of Contents
Document skeleton
Every page starts with the doctype, a language, the character encoding and a viewport tag. Put <meta charset> first in the head: the standard requires it within the first 1,024 bytes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Server status</title>
<meta name="description" content="Live status of our hosting servers.">
<link rel="canonical" href="https://example.com/status/">
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/site.css">
<script src="/js/app.js" defer></script>
</head>
<body>
<main>
<h1>Server status</h1>
</main>
</body>
</html>| Element or attribute | What it does |
|---|---|
<!DOCTYPE html> | Standards mode. Case-insensitive; there is no version number |
<html lang="en"> | Page language for screen readers, translation and hyphenation |
<script src="app.js" defer> | Download in parallel, run after parsing, in order |
<script type="module" src="app.js"> | ES module; deferred by default |
<link rel="preload" href="/f.woff2" as="font" type="font/woff2" crossorigin> | Fetch a critical file early |
<br>, <img ...>, <input ...> | Void elements have no closing tag; a trailing / is allowed but does nothing |
Text and page structure
| Element | Use it for |
|---|---|
<header>, <nav>, <main>, <footer> | Landmarks. Use one <main> per page |
<article>, <section>, <aside> | Self-contained content, a themed group with a heading, side content |
<search> | Wraps a search form; a newer landmark element |
<h1> to <h6> | Headings, in order, without skipping levels for styling |
<p>, <blockquote cite="...">, <hr> | Paragraph, quotation, thematic break |
<strong>, <em>, <mark> | Importance, stress, highlight |
<code>, <pre>, <kbd>, <samp> | Code, preformatted text, keyboard input, program output |
<time datetime="2026-10-09">9 October</time> | Machine-readable dates |
<abbr title="Domain Name System">DNS</abbr> | Abbreviations |
&, <, >, ", | Character references for &, <, >, a double quote and a non-breaking space |
Links, images and media
| Markup | What it does |
|---|---|
<a href="/guides/">Guides</a> | Relative link |
<a href="https://example.org" target="_blank" rel="noopener"> | New tab. Browsers now imply noopener for _blank, but stating it is harmless |
<a href="/backup.tar.gz" download> | Download instead of navigating (same-origin links) |
<a href="mailto:ops@example.com">, <a href="tel:+441234567890"> | Email and phone links |
<img src="chart.png" alt="CPU load over 24 hours" width="800" height="400" loading="lazy"> | Always set alt. width and height reserve space and stop layout shift |
<img srcset="a-400.jpg 400w, a-800.jpg 800w" sizes="(max-width: 600px) 100vw, 800px" src="a-800.jpg" alt="..."> | Responsive image: the browser picks the best file |
<picture><source srcset="a.avif" type="image/avif"><img src="a.jpg" alt="..."></picture> | Newer format with a fallback |
<figure><img ...><figcaption>...</figcaption></figure> | Image with a caption |
<video src="demo.mp4" controls muted playsinline></video> | Video with controls; autoplay generally only works when muted |
Lists and tables
| Markup | What it does |
|---|---|
<ul><li>...</li></ul> | Bulleted list |
<ol start="3" reversed> | Numbered list, with start value and reversed order |
<dl><dt>Port</dt><dd>443</dd></dl> | Term and description pairs |
<table><caption>Disk usage</caption>...</table> | Data table with a caption |
<thead>, <tbody>, <tfoot> | Row groups |
<th scope="col"> / <th scope="row"> | Header cells for a column or a row |
<td colspan="2">, <td rowspan="3"> | Merge cells |
Use tables for tabular data only, not for page layout. CSS grid handles layout.
Forms and input types
<form action="/login" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="username" required>
<label for="pw">Password</label>
<input id="pw" name="password" type="password" autocomplete="current-password" required minlength="12">
<label><input type="checkbox" name="remember"> Remember me</label>
<button type="submit">Sign in</button>
</form>| Markup | What it does |
|---|---|
type="email", "url", "tel", "number", "search" | Validation and the right mobile keyboard |
type="date", "time", "datetime-local", "month" | Native pickers |
type="checkbox", "radio", "range", "color", "file" | Other controls; add multiple or accept="image/*" to file inputs |
required, minlength, maxlength, min, max, step | Built-in validation |
pattern="[a-z0-9-]+" | Regex the whole value must match (no slashes, anchored automatically) |
autocomplete="new-password", "one-time-code" | Helps password managers and SMS code autofill |
inputmode="numeric" | Numeric keyboard without number-input behaviour |
<select>, <option>, <textarea>, <datalist> | Choices, multi-line text, suggestions |
<fieldset><legend>...</legend></fieldset> | Group related controls |
<button type="button"> | A button that does not submit; the default inside a form is submit |
Browser validation is a convenience, not security. Anyone can send any request to your server, so validate every field again on the server.
Interactive elements without JavaScript
<details name="info">
<summary>Which ports are open?</summary>
<p>22, 80 and 443.</p>
</details>
<button popovertarget="help">Help</button>
<div id="help" popover>Press Esc to close this.</div>
<dialog id="confirm">
<form method="dialog">
<p>Restart the service?</p>
<button value="no">Cancel</button>
<button value="yes">Restart</button>
</form>
</dialog>| Feature | What it does |
|---|---|
<details> and <summary> | Disclosure widget. Give several the same name for an accordion where only one stays open |
popover and popovertarget | Light-dismiss pop-up: closes on Esc or a click outside, and sits in the top layer |
<dialog> | Call showModal() from script for a modal; a <form method="dialog"> inside closes it |
inert | Makes a subtree unfocusable and unclickable |
hidden | Hides an element; hidden="until-found" lets find-in-page reveal it |
<template> | Markup that is parsed but not rendered, for cloning with script |
Security-related attributes
For server admins: most protection comes from HTTP headers such as Content-Security-Policy and Strict-Transport-Security, set in Apache, LiteSpeed or nginx. A few attributes in the markup help too:
<script src="https://cdn.example.com/lib.min.js"
integrity="sha384-REPLACE_WITH_REAL_HASH"
crossorigin="anonymous"></script>
<iframe src="https://widget.example.net/" sandbox="allow-scripts"
referrerpolicy="no-referrer" loading="lazy" title="Status widget"></iframe>| Attribute | What it does |
|---|---|
integrity with crossorigin="anonymous" | Subresource Integrity: the browser refuses a CDN file whose hash does not match |
sandbox on <iframe> | Blocks scripts, forms, pop-ups and same-origin access unless you allow each one |
referrerpolicy="no-referrer" | Do not send the page URL to the other site |
rel="noopener noreferrer" | Cut the link between tabs and hide the referrer |
<meta name="robots" content="noindex"> | Keep a staging or admin page out of search results (it does not protect it) |
Accessibility and validation checklist
| Check | Why |
|---|---|
Every <img> has alt; use alt="" for decoration | Screen readers announce the alt text, or skip the image when it is empty |
Every input has a <label> | Placeholder text is not a label |
Use <button> for actions and <a href> for navigation | Both get keyboard focus and roles for free; a clickable <div> does not |
Headings in order, one <h1> | Screen-reader users navigate by headings |
aria-label only when there is no visible text | Native elements and visible labels come first |
| Run the page through the W3C Nu Html Checker | Finds unclosed elements, duplicate IDs and invalid attributes |
Official documentation (checked 9 October 2026): HTML Living Standard (WHATWG) · MDN: HTML · MDN: HTML elements reference · W3C Nu Html Checker
HTML Cheat Sheet at a glance
Related: CSS Cheat Sheet: Selectors, Flexbox, Grid and Modern CSS · JavaScript Cheat Sheet: Modern Syntax for Browser and Node · Open Graph and Social Card Preview.
Reading a lot of our guides? Go ad-free with srvScripts Pro for $6 a month. It also pays for new guides. Cancel any time.