🌐
Web Dev
HTML5 Complete Cheat Sheet
All HTML5 elements, attributes, semantic markup, forms, and accessibility best practices.
Back to Notes Library
HTML5 Complete Cheat Sheet
Document Structure
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Page description for SEO">
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="/favicon.ico">
</head>
<body>
<!-- content here -->
<script src="app.js" defer></script>
</body>
</html>Semantic HTML5 Elements
html
<header> — Site/section header
<nav> — Navigation links
<main> — Main content (one per page)
<article> — Self-contained content (blog post, comment)
<section> — Grouped content with heading
<aside> — Related content, sidebar
<footer> — Site/section footer
<figure> — Media with caption
<figcaption> — Caption for figure
<time> — Machine-readable date/time
<address> — Contact information
<mark> — Highlighted text
<details> — Expandable content
<summary> — Toggle label for details elementText & Headings
html
<h1>Main Title</h1> <!-- only one per page -->
<h2>Section Title</h2>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>
<p>Paragraph text</p>
<strong>Bold important text</strong>
<em>Italic emphasized text</em>
<small>Fine print, disclaimers</small>
<del>Deleted text</del>
<ins>Inserted text</ins>
<sub>Subscript: H<sub>2</sub>O</sub>
<sup>Superscript: x<sup>2</sup></sup>
<code>Inline code</code>
<pre>Preformatted block</pre>
<kbd>Ctrl+C</kbd>
<abbr title="HyperText Markup Language">HTML</abbr>
<blockquote cite="https://source.url">Quoted text</blockquote>
<q>Short inline quote</q>
<hr> <!-- horizontal rule -->
<br> <!-- line break (use sparingly) -->Links
html
<!-- Basic link -->
<a href="https://example.com">Visit</a>
<!-- Open in new tab (always include rel for security) -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
External Link
</a>
<!-- Email link -->
<a href="mailto:hello@example.com">Email Us</a>
<!-- Phone link -->
<a href="tel:+1234567890">Call Us</a>
<!-- Anchor link (jump to section) -->
<a href="#section-id">Jump to Section</a>
<section id="section-id">...</section>
<!-- Download link -->
<a href="/file.pdf" download="my-file.pdf">Download PDF</a>Images
html
<!-- Basic image — alt is required! -->
<img src="photo.jpg" alt="Description of image" width="800" height="600">
<!-- Responsive image with srcset -->
<img
src="photo.jpg"
alt="Description"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
>
<!-- With figure and caption -->
<figure>
<img src="photo.jpg" alt="A sunset">
<figcaption>Beautiful sunset over the ocean</figcaption>
</figure>
<!-- Lazy loading (built-in) -->
<img src="photo.jpg" alt="..." loading="lazy">Lists
html
<!-- Unordered list -->
<ul>
<li>Item one</li>
<li>Item two
<ul>
<li>Nested item</li>
</ul>
</li>
</ul>
<!-- Ordered list -->
<ol start="1" type="1">
<li>First step</li>
<li>Second step</li>
</ol>
<!-- type: 1 (numbers), A (uppercase), a (lowercase), I (Roman) -->
<!-- Definition list -->
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>Forms
html
<form action="/submit" method="POST" enctype="multipart/form-data">
<!-- Text input -->
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Full name" required>
<!-- Email -->
<input type="email" name="email" required>
<!-- Password -->
<input type="password" name="password" minlength="8" required>
<!-- Number -->
<input type="number" name="age" min="0" max="120">
<!-- Textarea -->
<textarea name="message" rows="5" placeholder="Your message"></textarea>
<!-- Checkbox -->
<input type="checkbox" id="agree" name="agree" value="yes">
<label for="agree">I agree to terms</label>
<!-- Radio buttons -->
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<!-- Select dropdown -->
<select name="country">
<option value="">Select country</option>
<option value="us">United States</option>
<option value="uk" selected>United Kingdom</option>
<optgroup label="Asia">
<option value="jp">Japan</option>
</optgroup>
</select>
<!-- File upload -->
<input type="file" name="photo" accept="image/*" multiple>
<!-- Range slider -->
<input type="range" name="volume" min="0" max="100" step="5">
<!-- Hidden field -->
<input type="hidden" name="token" value="abc123">
<!-- Submit -->
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>Tables
html
<table>
<caption>Monthly Revenue</caption>
<thead>
<tr>
<th scope="col">Month</th>
<th scope="col">Revenue</th>
<th scope="col">Growth</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$10,000</td>
<td>+5%</td>
</tr>
<tr>
<td colspan="2">Subtotal</td>
<td>$10,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Total</th>
<td colspan="2">$120,000</td>
</tr>
</tfoot>
</table>Media
html
<!-- Video -->
<video controls width="640" height="360" poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support video.
</video>
<!-- Audio -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
</audio>
<!-- YouTube embed -->
<iframe
width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video"
allowfullscreen>
</iframe>Meta Tags for SEO
html
<meta name="description" content="Page description, 150-160 chars">
<link rel="canonical" href="https://example.com/page">
<!-- Open Graph (social sharing) -->
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page description">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:image" content="https://example.com/image.jpg">Accessibility Best Practices
html
<!-- Always use alt text on images -->
<img src="logo.png" alt="Company Logo">
<img src="decoration.png" alt="" role="presentation">
<!-- Use label with form inputs -->
<label for="email">Email Address</label>
<input id="email" type="email" name="email">
<!-- Landmark roles (use semantic HTML instead when possible) -->
<header role="banner">
<nav role="navigation" aria-label="Main navigation">
<main role="main">
<footer role="contentinfo">
<!-- ARIA attributes -->
<button aria-label="Close dialog">X</button>
<div aria-live="polite">Status updates here</div>
<nav aria-expanded="false">...</nav>
<!-- Skip link (for keyboard users) -->
<a href="#main" class="sr-only focus:not-sr-only">Skip to main content</a>10K+ Members Growing Daily
Get Free AI Notes Daily
Join AiTechWorlds on Telegram and get daily AI tips, prompt engineering templates, coding resources, and exclusive content — 100% free!
📚 Free Study Notes🤖 AI Tips Daily⚡ Prompt Templates💻 Coding Resources
Join Free Channel
No spam. Leave anytime.