# HTML From Zero

You know HTML, CSS, and JavaScript have separate jobs - HTML for structure, CSS for looks, JavaScript for
behavior. Now it's time to actually write some. This guide teaches HTML by building one real page: a personal
"About Me" page, starting from nothing and ending with a complete, semantic document.

Every phase adds to the same file. By the end you'll have a page with a heading, a bio, a photo, a list of
skills, links to your other profiles, and proper document structure - and you'll understand why each tag is
the right one for the job.

## How to read this

- **New to HTML?** Read in order. Phase 1 gives you the skeleton every page needs, phase 2 fills it with
  content, phase 3 makes it semantic and complete.
- **Know some HTML already?** Skip to [Phase 3: Semantic HTML and Document Structure](03-semantic-html-and-document-structure.md)
  for `<header>`/`<main>`/`<footer>` and why they beat `<div>` soup.

## The phases

1. **[Your First Page: Elements, Tags, and Structure](01-your-first-page-elements-tags-and-structure.md)** -
   what a tag, element, and attribute actually are, the doctype and the `<html>`/`<head>`/`<body>` skeleton,
   nesting rules, and void elements like `<br>` and `<img>`.
2. **[Text, Lists, Links, and Images](02-text-lists-links-and-images.md)** - headings, paragraphs, semantic
   emphasis with `<strong>`/`<em>`, lists, links, and images with real `alt` text.
3. **[Semantic HTML and Document Structure](03-semantic-html-and-document-structure.md)** - `<header>`,
   `<nav>`, `<main>`, `<section>`, `<footer>` instead of generic `<div>`s, why it matters for screen readers
   and search engines, and the finished, annotated About Me page.

> This guide stops at structure. It doesn't touch colors, fonts, or layout - that's
> [CSS Without Tears](/guides/css-without-tears), linked again at the end once you have something worth
> styling.
