<!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>

<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 element

<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) -->

<!-- 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>

<!-- 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">

<!-- 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>

<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>

<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>

<!-- 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 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">

<!-- 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>