Web

HTML Cheat Sheet — Elements and Attributes Reference

The HTML elements and attributes you actually use, grouped by purpose, with the semantic and accessible choice for each.

Put it into practice with the matching tool.

Escape HTML entities →

Document structure

<!doctype html>Standards mode — always the first line

<html lang="en">Root element; lang helps screen readers and translation

<meta charset="utf-8">Character encoding, early in the head

<meta name="viewport" content="width=device-width, initial-scale=1">Make the page responsive on phones

<link rel="stylesheet" href="x.css">Load a stylesheet

<script type="module" src="x.js"></script>Load a script (modules are deferred)

Semantic layout

<header> / <footer>Intro and closing content of a page or section

<nav>A major block of navigation links

<main>The page's main content — one per page

<article>Self-contained content such as a post

<section>Thematic group, usually with a heading

<aside>Tangential content such as a sidebar

<h1>…<h6>Headings in order; do not skip levels

Text

<p>Paragraph

<strong> / <em>Strong importance / stress emphasis

<code> / <pre>Inline code / preformatted block

<ul> <ol> <li>Unordered and ordered lists

<blockquote cite="url">Quoted block

<time datetime="2026-10-29">Machine-readable date

<abbr title="...">Abbreviation with its expansion

Links and media

<a href="url">Link

target="_blank" rel="noopener"Open in a new tab safely

<img src alt width height loading="lazy">Image with alt text, size to prevent layout shift, lazy loading

<picture><source srcset type>Serve different formats or crops

<video controls src>Video player

<figure><figcaption>Media with a caption

Forms

<form action method="post">Form submitting to a URL

<label for="email">Label tied to an input id — clickable and accessible

required minlength patternBuilt-in validation attributes

autocomplete="email"Help browsers autofill correctly

<select> <textarea> <button>Other form controls

<fieldset><legend>Group related controls with a caption

Interactive and accessibility

<details><summary>Native disclosure widget

<dialog>Native modal dialog (showModal())

popoverNative popover toggled by popovertarget

aria-label="Close"Accessible name for an icon-only control

hiddenHide from everyone, including screen readers

tabindex="0"Make a custom element focusable (prefer real buttons)

Related guides

HTML Entities and Escaping: Preventing XSS

More cheat sheets

HTTP Headers →Regex →Git →Markdown →Cron →Flexbox →