HTML Cheatsheet

One-page reference for HTML5 — semantics, forms, tables, media, metadata. Copy-ready snippets.

100% in your browser. Files never uploaded.

Document

HTML5 boilerplate

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title</title>
</head>
<body></body>
</html>

Meta description

<meta name="description" content="…">

Stylesheet

<link rel="stylesheet" href="style.css">

Script (deferred)

<script src="main.js" defer></script>

Semantic

Header / Nav

<header>
  <nav>…</nav>
</header>

Main / Article

<main>
  <article>…</article>
</main>

Section

<section><h2>Title</h2>…</section>

Aside / Footer

<aside>…</aside>
<footer>…</footer>

Figure

<figure>
  <img src="…" alt="…">
  <figcaption>Caption</figcaption>
</figure>

Forms

Form

<form action="/submit" method="post">…</form>

Input + label

<label for="name">Name</label>
<input id="name" name="name" type="text" required>

Email / number / date

<input type="email">
<input type="number" min="0" max="100">
<input type="date">

Textarea

<textarea rows="4"></textarea>

Select

<select name="country">
  <option value="qa">Qatar</option>
  <option value="ae">UAE</option>
</select>

Submit

<button type="submit">Send</button>

Tables

Basic

<table>
  <thead><tr><th>Name</th><th>Score</th></tr></thead>
  <tbody>
    <tr><td>Alice</td><td>42</td></tr>
  </tbody>
</table>

Media

Image

<img src="path.jpg" alt="…" width="300" height="200">

Picture (responsive)

<picture>
  <source srcset="hi.webp" type="image/webp">
  <img src="hi.jpg" alt="…">
</picture>

Video

<video controls src="movie.mp4"></video>

Audio

<audio controls src="song.mp3"></audio>

Lists & links

Unordered list

<ul>
  <li>One</li>
  <li>Two</li>
</ul>

Ordered list

<ol>
  <li>First</li>
</ol>

Definition list

<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
</dl>

Link

<a href="https://…">Text</a>

New tab

<a href="…" target="_blank" rel="noopener noreferrer">…</a>

How to use

1
Browse the snippets
Document, semantic, forms, tables, media, lists.
2
Copy any
One click per row.