# HTML Cheat Sheet: Elements, Attributes and Forms

Source: https://srvscripts.com/guides/html-cheat-sheet/
Updated: 2026-10-09
Publisher: srvScripts (https://srvscripts.com/)

**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.

## Document skeleton

Every page starts with the doctype, a language, the character encoding and a viewport tag. Put `&lt;meta charset&gt;` first in the head: the standard requires it within the first 1,024 bytes.

```

  Server status

-

-

-

    Server status

```

| Element or attribute | What it does |
| --- | --- |
|  | Standards mode. Case-insensitive; there is no version number |
|  | Page language for screen readers, translation and hyphenation |
|  | Download in parallel, run after parsing, in order |
|  | ES module; deferred by default |
|
-  | Fetch a critical file early |
| , ,  | Void elements have no closing tag; a trailing / is allowed but does nothing |

## Text and page structure

| Element | Use it for |
| --- | --- |
| , , ,  | Landmarks. Use one  per page |
| , ,  | Self-contained content, a themed group with a heading, side content |
|  | Wraps a search form; a newer landmark element |
|  to  | Headings, in order, without skipping levels for styling |
| , ,  | Paragraph, quotation, thematic break |
| **, ,  | Importance, stress, highlight |
| , , ,  | Code, preformatted text, keyboard input, program output |
| 9 October | Machine-readable dates |
| DNS | Abbreviations |
| &, <, >, ",   | Character references for &, , a double quote and a non-breaking space |

## Links, images and media

| Markup | What it does |
| --- | --- |
| [Guides](/guides/) | Relative link |
| [ | New tab. Browsers now imply noopener for _blank, but stating it is harmless |
|  | Download instead of navigating (same-origin links) |
| ,  | Email and phone links |
|  | Always set alt. width and height reserve space and stop layout shift |
|  | Responsive image: the browser picks the best file |
|  | Newer format with a fallback |
| ... | Image with a caption |
|  | Video with controls; autoplay generally only works when muted |

## Lists and tables

| Markup | What it does |
| --- | --- |
| ... | Bulleted list |
|  | Numbered list, with start value and reversed order |
| Port443 | Term and description pairs |
| Disk usage... | Data table with a caption |
| , ,  | Row groups |
|  /  | Header cells for a column or a row |
| ,  | Merge cells |

Use tables for tabular data only, not for page layout. CSS grid handles layout.

## Forms and input types

```

  Email

  Password

   Remember me
  Sign in

```

| 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 |
| , , ,  | Choices, multi-line text, suggestions |
| ... | Group related controls |
|  | 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

```

  Which ports are open?
  22, 80 and 443.

Help
Press Esc to close this.

    Restart the service?
    Cancel
    Restart

```

| Feature | What it does |
| --- | --- |
|  and  | 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 |
|  | Call showModal() from script for a modal; a  inside closes it |
| inert | Makes a subtree unfocusable and unclickable |
| hidden | Hides an element; hidden="until-found" lets find-in-page reveal it |
|  | 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:

```

```

| Attribute | What it does |
| --- | --- |
| integrity with crossorigin="anonymous" | Subresource Integrity: the browser refuses a CDN file whose hash does not match |
| sandbox on  | 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 |
|  | Keep a staging or admin page out of search results (it does not protect it) |

## Accessibility and validation checklist

| Check | Why |
| --- | --- |
| Every  has alt; use alt="" for decoration | Screen readers announce the alt text, or skip the image when it is empty |
| Every input has a  | Placeholder text is not a label |
| Use  for actions and  for navigation | Both get keyboard focus and roles for free; a clickable  does not |
| Headings in order, one  | 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)](https://example.org) · [MDN: HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) · [MDN: HTML elements reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) · [W3C Nu Html Checker](https://validator.w3.org/nu/)

## HTML Cheat Sheet at a glance

In short: Current HTML at a glance: the page skeleton, semantic elements, media, forms, built-in interactive elements and security attributes.

HTML Cheat Sheet: what this guide covers.

Related:** [CSS Cheat Sheet: Selectors, Flexbox, Grid and Modern CSS](https://srvscripts.com/guides/css-cheat-sheet/) · [JavaScript Cheat Sheet: Modern Syntax for Browser and Node](https://srvscripts.com/guides/javascript-cheat-sheet/) · [Open Graph and Social Card Preview](https://srvscripts.com/tools/open-graph-preview/).