HTML Cheatsheet

Basics

Use this HTML reference while you build software engineering projects, review code for technical interview prep, or polish examples for a software engineer resume.

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>