Use this HTML cheatsheet to choose semantic tags, structure headings and sections, write accessible links, images, lists, tables and forms, then copy clean markup examples into your page.
<!doctype html><html lang="en"><meta name="description" content="..."><meta name="viewport" content="width=device-width, initial-scale=1"><header><nav aria-label="Main"><main><footer><label for="email">Email</label><input id="email" type="email" required><textarea name="message"></textarea><button type="submit">Send</button>Compare the syntax with a small rendered example so the reference is easier to scan and remember.
Use headings to describe hierarchy, then support them with readable text.
<h1>Page heading</h1>
<h2>Section heading</h2>
<p>Paragraph text gives the heading useful context.</p>Paragraph text gives the heading useful context.
Use descriptive link text and meaningful image alt text.
<img src="preview.png" alt="Dashboard preview">
<a href="/guide">Read the guide</a>img {
max-width: 100%;
border-radius: 14px;
}
a {
color: #2563eb;
text-decoration: underline;
}Use unordered lists for groups and ordered lists for sequences.
<ul>
<li>Plan content</li>
<li>Write markup</li>
<li>Check semantics</li>
</ul>Tables are for tabular data, not page layout.
<table>
<thead>
<tr><th>Tag</th><th>Use</th></tr>
</thead>
<tbody>
<tr><td>th</td><td>Header cell</td></tr>
<tr><td>td</td><td>Data cell</td></tr>
</tbody>
</table>table {
width: 100%;
border-collapse: collapse;
}
th,
td {
border: 1px solid #dbe3ec;
padding: 10px;
}| Tag | Use |
|---|---|
| th | Header cell |
| td | Data cell |
Pair labels and controls so forms work for screen readers and click targets.
<label for="email">Email</label>
<input id="email" type="email" placeholder="you@example.com">
<button type="submit">Subscribe</button>label {
display: block;
font-weight: 700;
}
input,
button {
min-height: 42px;
}Use landmark elements to make page structure easier to understand.
<header>Header</header>
<nav aria-label="Main">Navigation</nav>
<main>Main content</main>
<aside>Related</aside>
<footer>Footer</footer>Short notes to help you decide when to use each pattern, avoid common mistakes and copy the examples with confidence.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page title</title>
</head>
<body>
<main>Content</main>
</body>
</html>HTML Cheatsheet includes quick reference sections, practical examples, common mistakes, tips and links to related DevKitYard tools.
Yes. This cheatsheet includes visual examples with copyable code and lightweight controls where interaction helps explain the pattern.
Use it when you need to recall syntax, compare common patterns or avoid mistakes without opening a long tutorial.
Use related DevKitYard tools such as Meta Tag Generator when you need to format, validate, generate or inspect real output.