Section · 01

The minimum viable HTML page

The shortest valid HTML5 page is shorter than most people think:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>My first page</title>
  </head>
  <body>
    <h1>Hello, web.</h1>
  </body>
</html>

That’s a complete, valid web page. Save it as index.html and open it in your browser. Every page from yorksims.com to youtube.com is some variant of this shape.

Section · 02

The DOCTYPE — telling the browser to behave

The <!doctype html>line at the top tells the browser “render this as modern HTML.” Without it, browsers fall into quirks mode— a backward-compat rendering engine from the 90s where margins are different, width calculations are different, and your CSS won’t work how you expect.

Always include it. Always make it the first line. That’s the rule.

Section · 03

The <html> element and its lang attribute

<html> wraps the entire document. The lang attribute tells the browser, screen readers, and search engines what language the page is in. lang="en" for English, lang="es" for Spanish, and so on.

This is a 5-character accessibility win. Setting it correctly lets screen readers pronounce words right and lets translators (and Google Translate) work properly.

Section · 04

The <head> — metadata for everyone but the reader

The <head> holds stuff that isn’t shown on the page — but matters enormously for how the page works, ranks, and shares.

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>YorkSims — Learn Web Development</title>
  <meta name="description" content="A practical free path from how the internet works to JavaScript and databases." />
  <link rel="icon" href="/favicon.ico" />
  <link rel="stylesheet" href="/styles.css" />

  <!-- Open Graph (social sharing) -->
  <meta property="og:title" content="YorkSims — Learn Web Development" />
  <meta property="og:description" content="A practical free path..." />
  <meta property="og:image" content="https://yorksims.com/og.png" />
</head>

The four meta tags that matter most

<meta charset="utf-8">                — text encoding (must be utf-8)
<meta name="viewport" ...>              — controls mobile rendering (Unit 1, lesson 6)
<title>...</title>                      — browser tab + Google search result title
<meta name="description" ...>           — Google search result snippet

Section · 05

The <body> — what the user actually sees

Everything visible on the page goes inside <body>. Inside it, HTML5 gives you semantic elements — tags whose names describe what the content is, not what it looks like.

<body>
  <header>
    <h1>YorkSims</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/learn">Learn</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>How the web works</h2>
      <p>The web works because of one repeated transaction...</p>
    </article>
    <aside>
      <h3>Related</h3>
      <a href="/dns">DNS</a>
    </aside>
  </main>

  <footer>
    <p>© 2026 YorkSims</p>
  </footer>
</body>

Section · 06

Semantic HTML — why it matters

A <div> and a <nav> can be styled to look identical. So why use one over the other? Because tags carry meaning:

<header>   — top section, usually contains site title + nav
<nav>      — navigation links (any kind)
<main>     — the primary content; exactly one per page
<section>  — a thematic grouping
<article>  — self-contained content (blog post, product card, comment)
<aside>    — sidebar content, related but secondary
<footer>   — bottom section
<h1>-<h6>  — headings in order of importance (only one h1 per page)

Who benefits

Screen readers use these tags to let blind users skip directly to “main content” or “navigation”. Search engines use them to figure out what part of the page is important. Other devs reading your code use them to understand the structure without running it. Use semantic tags, not endless <div>s.

Section · 07

Block vs inline

HTML elements come in two flavors by default:

Block      — take full available width, stack vertically
             (p, div, h1, section, article, ul, li...)

Inline     — flow with the text, only as wide as their content
             (a, span, strong, em, code, img...)

You can override these defaults in CSS with display: block, inline, inline-block, flex, or grid— see lesson 6 of this unit. But knowing the default flow tells you why a paragraph takes a full line and a link doesn’t.

Section · 08

What's next

You can now write a complete, valid HTML page. The next three lessons add the things that actually fill a page — links and media, then forms, then how CSS targets the elements you just learned to write.

HTML document structure, the skeleton every page is built on.