HTML Cheat Sheet
HTML reference: structure, semantics, forms, accessibility, and common elements.
HTML describes document structure and meaning; CSS handles presentation and JavaScript handles behavior. Prefer native semantic elements because they improve navigation, accessibility, and browser behavior without extra scripting.
Document skeleton
A modern document declares HTML5, sets the language, and includes responsive viewport metadata. The body contains the content rendered to the user.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example page</title>
</head>
<body>
<h1>Page heading</h1>
</body>
</html>
| Element | Role |
|---|---|
<!doctype html> | Enables standards mode. |
<html lang="en"> | Root element and document language. |
<head> | Metadata and resource links. |
<meta charset="utf-8"> | Character encoding declaration. |
<body> | Visible document content. |
Semantic structure
Use landmarks to communicate page regions. A page may contain multiple articles and sections, but headings should form a logical outline for readers.
<header>
<a href="/">Site name</a>
</header>
<nav aria-label="Primary">
<a href="/docs">Docs</a>
<a href="/about">About</a>
</nav>
<main>
<article>
<h1>Guide title</h1>
<section>
<h2>First topic</h2>
<p>Content belongs here.</p>
</section>
</article>
<aside>Related links</aside>
</main>
<footer>Copyright information</footer>
| Element | Use |
|---|---|
<header> | Introductory content for a page or section. |
<nav> | Major navigation links. |
<main> | The document’s primary content; normally one per page. |
<article> | Self-contained, distributable content. |
<section> | Thematic group with a heading. |
<aside> | Complementary content. |
<footer> | Closing information for a page or section. |
Text and lists
Headings communicate hierarchy; strong and em communicate importance and emphasis rather than merely visual weight. Use lists for related items and pre for whitespace-sensitive text.
<h1>Title</h1>
<h2>Section</h2>
<p>Use <strong>strong importance</strong> and <em>emphasis</em>.</p>
<blockquote cite="https://example.com/source">
A quoted passage.
</blockquote>
<ul>
<li>One item</li>
<li>Another item</li>
</ul>
<ol>
<li>First step</li>
<li>Second step</li>
</ol>
<pre><code>npm run build</code></pre>
Links and images
Links should identify their destination. Images need useful alternative text unless they are purely decorative, in which case an empty alt is appropriate.
<a href="/docs">Read the documentation</a>
<a href="https://example.com" target="_blank" rel="noopener">External site</a>
<img src="chart.png" alt="Monthly traffic increased from January to June">
<img src="decorative-line.svg" alt="">
Use loading="lazy" for below-the-fold images when appropriate, and provide intrinsic dimensions or aspect-ratio styling to reduce layout shifts.
Forms and controls
Associate every form control with a label. Choose the input type that matches the data so browsers can provide validation, keyboards, and autofill behavior.
<form action="/subscribe" method="post">
<label for="email">Email address</label>
<input id="email" name="email" type="email" required autocomplete="email">
<label for="topic">Topic</label>
<select id="topic" name="topic">
<option value="support">Support</option>
<option value="feedback">Feedback</option>
</select>
<label for="message">Message</label>
<textarea id="message" name="message" rows="5"></textarea>
<button type="submit">Send</button>
</form>
| Type | Useful for |
|---|---|
email | Email address entry and validation. |
url | Web addresses. |
number | Numeric values with constraints. |
date | Calendar dates. |
search | Search fields. |
checkbox | Independent boolean choices. |
radio | One choice from a named group. |
file | File selection. |
Accessibility essentials
Use semantic HTML before adding ARIA. Provide labels, keyboard-operable controls, visible focus, appropriate heading order, and text alternatives for meaningful media.
<button type="button" aria-expanded="false" aria-controls="filters">
Filters
</button>
<nav id="filters" aria-label="Product filters"></nav>
aria-label, aria-labelledby, and state properties such as aria-expanded can fill genuine semantic gaps, but incorrect ARIA can make a native control harder to use.