Learning overview
- Estimated time
- 4 minutes
- Difficulty
- Beginner
- Prerequisites
- No prior experience required
- Learning outcome
- Explain html using a clear mental model · Apply html in practical HTML work
- Last updated
- July 18, 2026
Document foundation
Declare standards mode, language, encoding, viewport behavior, a unique title, and a page-specific description.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Specific page title</title>
<meta name="description" content="A concise summary of this page.">
</head>
<body>
<main>
<h1>One clear page topic</h1>
</main>
</body>
</html>Semantic structure and text
Choose by meaning. Header and footer can belong to a page or section; nav identifies major navigation; main contains unique primary content.
- header — introductory content
- nav — major navigation links
- main — unique primary page content
- article — independently meaningful content
- section — a thematic group, usually with a heading
- aside — complementary content
- h1–h6 — hierarchical section names
- p, ul, ol, dl, blockquote, pre, code — text structures
Links and responsive media
Anchors navigate to URLs or fragments. Images need alternative text that matches their purpose; decorative images use empty alt text.
<a href="/guides/html-tutorial">Read the HTML tutorial</a>
<img
src="/images/dashboard-800.webp"
srcset="/images/dashboard-400.webp 400w,
/images/dashboard-800.webp 800w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Dashboard displaying weekly course completion"
width="800"
height="450">Data tables
Use tables for relationships between row and column headers, not page layout. Caption names the table and scope associates headers with rows or columns.
<table>
<caption>Course completion by week</caption>
<thead>
<tr><th scope="col">Week</th><th scope="col">Completed</th></tr>
</thead>
<tbody>
<tr><th scope="row">Week 1</th><td>12</td></tr>
</tbody>
</table>Accessible forms
Use visible labels, appropriate types, helpful autocomplete tokens, and buttons with explicit intent. Fieldset and legend group related controls.
<form action="/subscribe" method="post">
<label for="subscriber-email">Email address</label>
<input
id="subscriber-email"
name="email"
type="email"
autocomplete="email"
required>
<button type="submit">Subscribe</button>
</form>Production review checklist
Validation catches syntax errors; human testing confirms whether the structure and interactions make sense.
- Unique title, description, h1, and canonical for indexable pages
- Logical headings and landmarks
- Descriptive link text
- Visible labels for controls
- Purposeful alt text and explicit image dimensions
- Keyboard-operable controls with visible focus
- No duplicate IDs or invalid nesting
- No ARIA added where native HTML already supplies the behavior
Frequently asked questions
What HTML elements should beginners memorize first?
Learn the document shell, headings, paragraphs, lists, links, images, landmarks, labels, inputs, buttons, and the table elements. Learn uncommon elements as projects require them.
Can this cheatsheet replace HTML validation?
No. Use it while writing, then run a validator and manually test headings, links, controls, keyboard order, and media alternatives.
Topic graph
A taxonomy-generated path through this subject.
Related courses
Related learning
Recommended automatically from shared technologies, topics, intent, and difficulty.
Related Guides
Related Tutorials
Related Glossary
Related Cheatsheets
Related Projects
Related Interview Questions
Related reading
Hand-picked companion pages that deepen this topic.
Your next steps