HTML Cheatsheet

Basics

Use this HTML reference while you build software engineering projects, review code, or refresh the syntax you reach for most.

What is HTML

HTML (HyperText Markup Language) is the standard markup language for web pages. Elements are defined by tags — most come in pairs (<tag> ... </tag>); a few are void elements with no closing tag.

Anatomy of an Element

<a href="https://example.com" target="_blank">Link text</a>
<!--
  <a           — opening tag
  href="..."   — attribute (name="value")
  target="_blank" — second attribute
  Link text    — content
  </a>         — closing tag
-->

Attribute syntax:

<input type="text" disabled />          <!-- boolean attr: presence = true -->
<input type="text" disabled="disabled"> <!-- equivalent (legacy style) -->
<div id="main" class="card active">     <!-- multiple attrs -->
<div data-user-id="42">                 <!-- data-* custom attribute -->

DOCTYPE Declaration

Must be the first line of every HTML document. Tells the browser to use standards mode.

<!DOCTYPE html>

Older doctypes (HTML4, XHTML) are lengthy — HTML5's is just <!DOCTYPE html>.

Void Elements (Self-Closing)

These elements have no content and no closing tag. The trailing / is optional in HTML5.

Element	Purpose
`<br>`	Line break
`<hr>`	Thematic break (horizontal rule)
`<img src="" alt="">`	Image
`<input type="">`	Form input
`<link rel="" href="">`	External resource (CSS, favicon)
`<meta name="" content="">`	Metadata
`<source src="" type="">`	Media source
`<track src="" kind="">`	Text track for media
`<wbr>`	Word-break opportunity
`<area>`	Image map area
`<col>`	Table column
`<embed src="">`	External content plugin
`<param name="" value="">`	Object parameter
`<base href="">`	Base URL for relative links

Comments

<!-- Single-line comment -->

<!--
  Multi-line comment.
  Visible in source but not rendered.
-->

Comments cannot be nested.  --> is invalid.

Character Entities

Use entities when you need to display reserved HTML characters as literal text, or for special symbols.

Character	Named Entity	Numeric	Description
`<`	`<`	`<`	Less-than
`>`	`>`	`>`	Greater-than
`&`	`&`	`&`	Ampersand
`"`	`"`	`"`	Double quote
`'`	`'`	`'`	Single quote
(non-break)	` `	` `	Non-breaking space
`©`	`©`	`©`	Copyright
`®`	`®`	`®`	Registered trademark
`™`	`™`	`™`	Trademark
`—`	`—`	`—`	Em dash
`–`	`–`	`–`	En dash
`…`	`…`	`…`	Ellipsis
`→`	`→`	`→`	Right arrow
`←`	`←`	`←`	Left arrow
`€`	`€`	`€`	Euro sign
`£`	`£`	`£`	Pound sign
`¥`	`¥`	`¥`	Yen sign
`°`	`°`	`°`	Degree sign
`±`	`±`	`±`	Plus-minus
`×`	`×`	`×`	Multiplication
`÷`	`÷`	`÷`	Division

<p>Use &lt;div&gt; to create a block element.</p>
<p>Price: &euro;9.99 &mdash; limited time offer</p>
<p>Copyright &copy; 2025 &amp; All Rights Reserved</p>

Global Attributes

Applicable to every HTML element.

Attribute	Description	Example
`id`	Unique identifier	`id="header"`
`class`	Space-separated class names	`class="card active"`
`style`	Inline CSS	`style="color: red;"`
`title`	Tooltip text	`title="More info"`
`lang`	Language of element content	`lang="fr"`
`dir`	Text direction (`ltr`, `rtl`, `auto`)	`dir="rtl"`
`hidden`	Hides element (display:none)	`hidden`
`tabindex`	Tab order (`-1` removes, `0` natural, `n` explicit)	`tabindex="0"`
`accesskey`	Keyboard shortcut	`accesskey="s"`
`contenteditable`	Makes element editable	`contenteditable="true"`
`draggable`	Drag-and-drop (`true`/`false`)	`draggable="true"`
`spellcheck`	Spellcheck (`true`/`false`)	`spellcheck="false"`
`translate`	Whether content should be translated	`translate="no"`
`data-*`	Custom data attributes	`data-price="9.99"`
`aria-*`	Accessibility attributes	`aria-label="Close"`
`role`	ARIA role	`role="button"`
`slot`	Web component slot	`slot="header"`
`part`	Shadow DOM part	`part="label"`
`is`	Customized built-in element	`is="my-button"`
`nonce`	Cryptographic nonce (CSP)	`nonce="abc123"`
`inert`	Makes subtree non-interactive	`inert`
`popover`	Marks element as a popover	`popover`

<div id="main" class="container card" lang="en" data-section="intro" tabindex="-1">
  Content
</div>

Data Attributes

Embed custom data in the DOM; read in JS via dataset (camelCase keys).

<button data-action="delete" data-item-id="42" data-confirm-message="Sure?">
  Delete
</button>

<script>
  const btn = document.querySelector('button');
  console.log(btn.dataset.action);          // "delete"
  console.log(btn.dataset.itemId);          // "42"  (kebab → camelCase)
  console.log(btn.dataset.confirmMessage);  // "Sure?"
</script>

URL Syntax in Attributes

<!-- Absolute URL -->
<a href="https://example.com/page">Link</a>

<!-- Root-relative (from domain root) -->
<a href="/about">About</a>

<!-- Relative to current page directory -->
<a href="page.html">Same-dir page</a>
<a href="../parent/page.html">Parent dir</a>

<!-- Fragment (anchor on same page) -->
<a href="#section-id">Jump</a>

<!-- Fragment on another page -->
<a href="/about#team">Team section</a>

<!-- mailto / tel / sms schemes -->
<a href="mailto:hi@example.com">Email</a>
<a href="tel:+15551234567">Call</a>
<a href="sms:+15551234567">Text</a>

Case Sensitivity

HTML tags and attributes are case-insensitive, but lowercase is the universal convention.

<DIV CLASS="bad">avoid uppercase tags</DIV>   <!-- valid but wrong style -->
<div class="good">use lowercase always</div>  <!-- correct -->

Attribute values are often case-sensitive (IDs, URLs, CSS class names).

Whitespace Handling

Multiple spaces / newlines in source collapse to a single space when rendered.
Use   for non-collapsible spaces.
Use <pre> to preserve whitespace verbatim.

<p>Hello       World</p>        <!-- renders: "Hello World" -->
<p>Hello&nbsp;&nbsp;&nbsp;World</p>  <!-- renders: "Hello   World" -->
<pre>
  Preserved
    indentation
</pre>

Nesting Rules

Elements must be properly nested — a child element must close before its parent closes.

<!-- CORRECT -->
<p><strong>Bold text</strong></p>

<!-- WRONG — overlapping tags -->
<p><strong>Bold</p></strong>

Block-level elements (<div>, <p>, <h1>…) cannot be nested inside inline elements (<span>, <a>, <em>…) — except <a> wrapping block content in HTML5.

<!-- Valid in HTML5 — <a> wrapping block content -->
<a href="/page">
  <div class="card">
    <h2>Title</h2>
    <p>Description</p>
  </div>
</a>