HTML Cheatsheet - HTML Tags & Attributes Reference
For anyone writing web pages by hand without a framework. HTML is the skeleton every page runs on, and choosing semantic tags over plain <div> affects SEO and accessibility. By the end you can lay out a complete page with structure, media, a real <form>, and correct table markup, and know when to prefer a <section>/<article>/<header> instead of <div>.
Document Structure 8
<!DOCTYPE html>HTML5 doctype declaration
<html lang="zh-CN">Root element, set the language
<head>...</head>Document head (metadata)
<meta charset="UTF-8">Character encoding
<title>Page Title</title>Page title (browser tab)
<link rel="stylesheet" href="style.css">Link an external stylesheet
<script src="script.js"></script>Link an external script
<body>...</body>Document body (visible content)
Text Formatting 9
<h1>~<h6>Headings (h1 largest, h6 smallest)
<p>Paragraph</p>Paragraph
<strong>Bold</strong>Important text (semantic bold)
<em>Italic</em>Emphasized text (semantic italic)
<br>Line break (self-closing)
<hr>Horizontal rule (self-closing)
<blockquote>Quote</blockquote>Block quotation
<code>Inline code</code>Inline code
<pre>Preformatted</pre>Preformatted text
Lists 3
<ul><li>List item</li></ul>Unordered list
<ol><li>List item</li></ol>Ordered list
<dl><dt>Term</dt><dd>Description</dd></dl>Description list
Links & Images 6
<a href="url">Link text</a>Hyperlink
<a href="url" target="_blank">Open in a new window
<a href="#id">Anchor</a>In-page anchor
<img src="image.jpg" alt="Description">Image (alt required)
<img src="..." width="300" height="200">Set dimensions
<figure><img><figcaption>Caption</figcaption></figure>Figure with caption
Tables 7
<table>...</table>Table container
<thead><tr><th>Header</th></tr></thead>Table header
<tbody><tr><td>Data</td></tr></tbody>Table body
<tr>Row</tr>Table row
<th>Header cell</th>Header cell (bold, centered)
<td>Data cell</td>Data cell
colspan="2" / rowspan="2"Column/row span
Forms 10
<form action="/submit" method="POST">Form container
<input type="text" name="username">Text input
<input type="password" name="pwd">Password input
<input type="email" name="email">Email input (auto-validated)
<input type="checkbox" name="agree">Checkbox
<input type="radio" name="gender">Radio button
<textarea name="message"></textarea>Textarea
<select><option>Option</option></select>Select dropdown
<button type="submit">Submit</button>Submit button
<label for="id">Label</label>Label (associates with input)
Semantic Tags 9
<header>Header</header>Header (page or section)
<nav>Nav</nav>Navigation links
<main>Main</main>Main content (unique)
<article>Article</article>Self-contained content (e.g. article)
<section>Section</section>Content section
<aside>Aside</aside>Sidebar / complementary
<footer>Footer</footer>Footer (page or section)
<div>Block container</div>Generic block container
<span>Inline container</span>Generic inline container
Tips
- img needs alt for accessibility and SEO.
- Associate inputs with label for accessibility.
- Prefer semantic tags (header/nav/main) over plain div.
Official References
Each command links to its official documentation below, so you can verify the latest usage and read deeper.
Maintained by LaoHand
Publicly updated on Jul 21, 2026, continuously proofread against official docs.
Contact Us
Wrong command or description? Send us corrections, business inquiries or product feedback by email.
Contact Us