HTML::DOCS
⌂
Web Fundamentals

HTML Complete Guide

HTML (HyperText Markup Language) is the markup language that structures every web page — headings, paragraphs, links, images, forms, tables, and media all get their shape from HTML tags. It doesn't style anything and it doesn't add behavior; it's the skeleton that CSS paints and JavaScript animates on top of. This doc walks through the 10 HTML topics every developer actually needs, in a sensible learning order, with a diagram, a "where to use it" guide, and concrete implementation steps for every single one.

10 topics 12 diagrams 2 priority levels

Use the sidebar to jump straight to any topic — each one opens its own page with a full explanation, a diagram of how it fits together, and the concrete steps to actually write it. If you're starting from zero, work through Document Structure, Semantic Elements, and Headings & Text Fundamentals first: everything else in this guide assumes you already know how an HTML document is put together.

Diagram · How HTML Fits Into the Page
HTML Source .html file Parser reads top to bottom DOM Tree the structural layer CSS / CSSOM styles it JavaScript manipulates it Rendered Page what users see HTML — THE STRUCTURAL LAYER EVERYTHING ELSE ATTACHES TO

The browser parses raw HTML source into a DOM tree — a live, structured representation of the document. CSS then styles that tree and JavaScript can read or rewrite it, but both are reacting to structure HTML already put in place. Get the structure wrong and no amount of styling or scripting fixes it cleanly — this is why HTML always comes first.

All 10 topics in this guide

Summary & Patterns

Once the individual topics make sense on their own, these two references tie them together: the order to learn them in, and the rendering pipeline every one of them ultimately feeds into.

Recommended Learning Order

How a Browser Renders a Page

Every topic in this guide ends up somewhere in this pipeline — this is the mental model worth keeping above all the individual tags.

Diagram · HTML → DOM → CSSOM → Render Tree → Paint
HTML parsed first DOM document tree CSSOM style tree Render Tree DOM + styles merged Layout + Paint pixels on screen Missing/invalid HTML breaks the DOM before CSS or JS ever run.

HTML is parsed into the DOM; CSS is parsed separately into the CSSOM. The browser merges the two into a render tree — only the nodes that will actually be visible — then computes layout (where everything goes) and paints the final pixels. Every topic in this guide is upstream of this pipeline: get the HTML wrong and everything downstream inherits the mistake.

Official Documentation Reference URLs

Every topic covered in this guide, with a direct link to its official MDN documentation.