01 · Orientation

Welcome! This course is a single‑file interactive textbook built for clarity and depth. Each module includes annotated examples, gotchas, checklists, and an embedded code runner.

02 · Syntax & Anatomy

HTML is made of elements written as <tags> with optional attributes. Most elements have an opening tag, content, and a closing tag.

<p title="tooltip">Hello <strong>HTML</strong>!</p>
<!-- Opening tag -->  <p title="tooltip">
<!-- Content -->      Hello <strong>HTML</strong>!
<!-- Closing tag -->  </p>

03 · Text & Inline

<h1>Article Title</h1>
<p>HTML gives text structure. Use <strong>importance</strong> and <em>emphasis</em> consciously.</p>
<p>Quote:</p>
<blockquote cite="https://html.spec.whatwg.org">The standard defines the web.</blockquote>

04 · Structure & Semantics

Use semantic layout for meaning and accessibility.

<header>Site header</header>
<nav aria-label="Primary">…</nav>
<main id="main">
  <article>
    <h1>Post</h1>
    <section>…</section>
    <aside>Related</aside>
  </article>
</main>
<footer>Copyright</footer>

• Prefer <button> over clickable <div>.
• One <h1> per page/sectioning root is fine; maintain a logical hierarchy.

05 · Links & Navigation

• External link: <a href="https://example.com" target="_blank" rel="noopener">
• In‑page link: <a href="#forms">Go to forms</a>
• Download: <a href="/file.pdf" download>PDF</a>

06 · Images & Media

<img src="hero.webp" alt="Developer at laptop" width="1200" height="600"
     srcset="hero-600.webp 600w, hero-900.webp 900w, hero-1200.webp 1200w"
     sizes="(max-width: 800px) 100vw, 800px">

<figure>
  <img src="chart.avif" alt="Traffic chart">
  <figcaption>Figure 1. Weekly traffic</figcaption>
</figure>

<video controls width="480" preload="metadata" poster="poster.jpg">
  <source src="lesson.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English" default>
  Sorry, your browser doesn't support embedded videos.
</video>

07 · Lists & Tables

<ul><li>unordered</li><li>list</li></ul>
<ol start="3" reversed><li>third</li><li>second</li></ol>
<dl><dt>HTML</dt><dd>HyperText Markup Language</dd></dl>

<table>
  <caption>Monthly Revenue</caption>
  <thead><tr><th scope="col">Month</th><th scope="col">EUR</th></tr></thead>
  <tbody>
    <tr><th scope="row">Jan</th><td>3,200</td></tr>
    <tr><th scope="row">Feb</th><td>3,580</td></tr>
  </tbody>
  <tfoot><tr><th scope="row">Total</th><td>6,780</td></tr></tfoot>
</table>

08 · Forms (Deep Dive)

HTML forms collect user input. Always associate labels, use proper types, constraints, and accessible help.

<form action="/subscribe" method="post" novalidate>
  <fieldset>
    <legend>Newsletter</legend>

    <label for="email">Email</label>
    <input id="email" name="email" type="email" required autocomplete="email">

    <label for="name">Full name</label>
    <input id="name" name="name" type="text" minlength="2" maxlength="60">

    <label for="plan">Plan</label>
    <select id="plan" name="plan" required>
      <option value="">— Select —</option>
      <option>Free</option>
      <option>Pro</option>
    </select>

    <label>Topics (choose at least one)</label>
    <div role="group" aria-labelledby="topics">
      <label><input type="checkbox" name="t" value="html" required> HTML</label>
      <label><input type="checkbox" name="t" value="css"> CSS</label>
      <label><input type="checkbox" name="t" value="js"> JS</label>
    </div>

    <label for="bio">Short bio</label>
    <textarea id="bio" name="bio" rows="4" placeholder="Tell us about you…"></textarea>

    <button>Subscribe</button>
  </fieldset>
</form>

09 · Head, Meta & SEO

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="https://example.com/">
<meta name="description" content="Concise page summary up to ~155 characters.">
<meta property="og:title" content="Page Title">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/">
<meta property="og:image" content="https://example.com/preview.jpg">
<meta name="twitter:card" content="summary_large_image">

<script type="application/ld+json">{
  "@context":"https://schema.org",
  "@type":"Course",
  "name":"HTML Mastery",
  "description":"Structured HTML course with interactive runner and quizzes.",
  "provider":{"@type":"Organization","name":"Your Brand"}
}</script>

10 · Accessibility (a11y)

• Provide skip links: <a href="#main" class="pill">Skip to content</a>
• Contrast ≥ 4.5:1 for text
• Focus states visible; no keyboard traps
• Use semantic elements and ARIA only when needed
• Announce dynamic updates with aria-live where appropriate

11 · Performance

• Optimize images (responsive, modern formats)
• Inline critical CSS for small pages; defer non‑critical scripts
• Preload critical assets; preconnect to third‑party origins
• Minimize DOM size; avoid layout thrashing

12 · Colors

Use color keywords, HEX, RGB, HSL. Prefer CSS for styling, not HTML attributes.

<p style="color:#3b82f6; background:hsl(220 50% 10%)">Readable contrast matters.</p>

13 · Formatting

Semantic inline elements for meaning: <strong>, <em>, <mark>, <small>, <del>, <ins>, <sup>, <sub>.

<p>Water: H<sub>2</sub>O; E = mc<sup>2</sup></p>

14 · Comments

<!-- This is a comment. Use to annotate structure or TODOs. -->

15 · Class vs ID

• id: unique per page, used for anchors and JS hooks.
• class: reusable, used for styling groups of elements.

<div id="hero" class="card primary">…</div>

16 · Block vs Inline

Block elements start on a new line (e.g., <div>, <p>). Inline flow within a line (e.g., <span>, <a>).

17 · Favicon

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

18 · File Paths

<img src="./img/pic.jpg">  <!-- relative -->
<img src="/img/pic.jpg">   <!-- root-relative -->
<a href="https://example.com">external</a>

19 · Iframes (Safely)

<iframe src="/guide.html" loading="lazy" referrerpolicy="no-referrer" sandbox="allow-scripts allow-same-origin"></iframe>

20 · Entities & Symbols

< > & © ™   🚀 (🚀)

21 · Emojis & Charset

<meta charset="utf-8">  <!-- enables emojis: 😊 -->

22 · Responsive Layout

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
</style>
<div class="grid"><div class="card">A</div><div class="card">B</div></div>

23 · HTML5 Semantics

Prefer meaningful elements: <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure>, <figcaption>.

24 · Graphics: Canvas & SVG

<svg viewBox="0 0 100 10" width="300">
  <circle cx="5" cy="5" r="4" fill="currentColor" />
  <text x="12" y="8">SVG text</text>
</svg>
<canvas id="c" width="200" height="80"></canvas>
<script>const ctx=c.getContext('2d');ctx.fillRect(10,10,60,40)</script>

25 · Geolocation API

<button onclick="navigator.geolocation.getCurrentPosition(p=>alert(p.coords.latitude+','+p.coords.longitude))">Locate Me</button>

Note Requires HTTPS and user permission.

26 · Web Storage (localStorage/sessionStorage)

<script>localStorage.setItem('theme','dark');alert(localStorage.getItem('theme'))</script>

27 · Web Workers (basic)

// main.js
const w = new Worker(URL.createObjectURL(new Blob([`onmessage=e=>postMessage(e.data*2)`])));
w.onmessage = e => alert(e.data); w.postMessage(21);

28 · Server-Sent Events (concept)

<script>const es=new EventSource('/events');es.onmessage=e=>console.log(e.data)</script>

29 · YouTube & Embeds

<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID" title="YouTube video" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

30 · <template> & Slots

<template id="row"><tr><td></td></tr></template>
<script>const t=row.content.cloneNode(true);t.querySelector('td').textContent='Hi';document.body.append(t);</script>

31 · Microdata & RDFa (alt to JSON-LD)

<div itemscope itemtype="https://schema.org/Course">
  <span itemprop="name">HTML Mastery</span>
</div>

32 · Best Practices Checklist

• Valid, semantic markup; no duplicate IDs
• Accessible names/roles/values; alt text; form labels
• Responsive meta & layout; images optimized
• Content‑first titles, headings, and meta descriptions
• Security: sandbox iframes, rel="noopener" for target="_blank"

33 · Live Code Runner

34 · Quick Quiz

35 · Glossary

36 · Roadmap & Resources

1. HTML Foundations (this page)
2. CSS Essentials → layout, flexbox, grid
3. Accessible Components (buttons, dialogs, nav)
4. Forms UX & validation (client & server)
5. Performance & SEO playbook

Bookmarks: MDN Web Docs, WHATWG HTML Standard, a11yproject.com.