Chapter 1

HTML

HTML (HyperText Markup Language) structures the content of a web page: text, images, links, forms, and more. Every website, no matter what framework sits on top of it, is built on HTML underneath.

Browsers read your HTML and turn it into the page people see. Screen readers, search engines, and other tools also read your HTML, so how you structure it matters beyond how the page looks.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Page Title</title>
  </head>
  <body>
    <header>
      <h1>Site Name</h1>
      <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
      </nav>
    </header>

    <main>
      <section>
        <h2>Latest posts</h2>
        <article>
          <h3>Post title</h3>
          <p>This is a paragraph.</p>
          <a href="/posts/1">Read this post</a>
        </article>
      </section>

      <aside>
        <blockquote>A related quote or callout.</blockquote>
      </aside>
    </main>

    <footer>
      <p>&copy; 2026 Site Name</p>
    </footer>
  </body>
</html>

Notice that styling like font size or colour is not in this HTML at all. That belongs in CSS. HTML’s job is structure and meaning, not appearance.

Before you start

You don’t need any prior experience to start here. A text editor and a browser are enough.

Where to start

Work through these pages in order if you’re new to HTML:

  1. Basics : doctype, the html/head/body structure, elements, attributes, and comments
  2. Headings and Document Outline : structuring content with h1-h6
  3. Text and Formatting : paragraphs, emphasis, line breaks, and quotes
  4. Links : the <a> element, and buttons vs links
  5. Lists : ordered, unordered, and description lists
  6. Images : the <img> element and writing good alt text
  7. Responsive Images : srcset, sizes, and <picture>
  8. Tables : tabular data, <caption>, and accessible tables
  9. Forms : inputs, labels, and form structure
  10. Form Validation : required, pattern, and built-in validation
  11. Semantic HTML : header, nav, main, section, article, aside, footer
  12. Page Landmarks : how semantic elements help screen reader users navigate
  13. Meta Tags : charset, viewport, title, description, and Open Graph
  14. Media : <audio> and <video>
  15. Iframe : embedding other pages safely
  16. ARIA Basics : when semantic HTML isn’t enough
  17. Best Practices Checklist : a quick reference before you ship

After HTML

Once you’re comfortable with HTML, move on to the CSS section to style your pages, then JavaScript to make them interactive.