HTMLHTML · Lesson 8 of 8
HTML Cheatsheet
Document structure, semantic tags, and forms on one page.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>
</head>
<body>
<!-- ── Semantic layout ─────────────── -->
<header>site banner / nav</header>
<nav><a href="/about">About</a></nav>
<main>
<article>self-contained content</article>
<section>thematic grouping</section>
<aside>sidebar</aside>
</main>
<footer>copyright etc.</footer>
<!-- ── Text ────────────────────────── -->
<h1>One per page</h1> <h2>…</h2> … <h6>…</h6>
<p>paragraph with <strong>important</strong>,
<em>emphasized</em>, <code>inline code</code></p>
<ul><li>bullet</li></ul>
<ol><li>numbered</li></ol>
<blockquote>quotation</blockquote>
<!-- ── Media & links ───────────────── -->
<a href="https://x.com" target="_blank" rel="noopener">link</a>
<img src="cat.jpg" alt="describe it — required" width="300">
<video src="clip.mp4" controls></video>
</body>
</html>HTML
<!-- ── Forms ───────────────────────────── -->
<form action="/submit" method="post">
<label for="name">Name</label>
<input id="name" name="name" required minlength="2">
<input type="email" name="email" placeholder="you@example.com">
<input type="password" name="pw" required>
<input type="number" min="0" max="10" step="1">
<input type="date"> <input type="checkbox"> <input type="radio">
<input type="file" accept="image/*">
<input type="range" min="0" max="100">
<select name="size">
<option value="s">Small</option>
<option value="l" selected>Large</option>
</select>
<textarea name="bio" rows="4"></textarea>
<button type="submit">Send</button>
</form>
<!-- ── Tables ──────────────────────────── -->
<table>
<thead><tr><th>Name</th><th>Grade</th></tr></thead>
<tbody><tr><td>Ada</td><td>95</td></tr></tbody>
</table>
<!-- ── Accessibility quick rules ───────── -->
<!-- every img: alt | every input: label | one h1 -->
<!-- buttons for actions, links for navigation -->
<!-- use semantic tags before reaching for ARIA -->