What HTML actually is, and how the browser turns it into a page
HTML (HyperText Markup Language) isn't a programming language — it has no variables, no loops, no logic. It's a markup language: plain text with tags wrapped around it that describe what each piece of content is. A browser reads that description and decides how to display it. This series builds that skill the same way every other series here does — with a real, complete project, not disconnected snippets.
The real project this series builds
Every part from here builds one real, working website: Bright Leaf Coffee's marketing site — the same business referenced throughout the Google Ads, Meta Ads, Content Marketing, and SEO series. By the end of this series, that business has a real homepage, product page, and contact page — hand-written, semantic, and genuinely SEO-ready, not scaffolded by a framework or generator.
Your first real HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Bright Leaf Coffee</title>
</head>
<body>
<h1>Bright Leaf Coffee</h1>
<p>Small-batch coffee, roasted weekly and shipped fresh.</p>
</body>
</html>Save this as index.html in any folder, then open that file directly in a browser (double-click it, or drag it into a browser window). No server, no build step, no installation — this is the entire barrier to entry for HTML, and it's real: what you just saw in the browser is exactly what every website starts as underneath everything else layered on top of it.
What the browser is actually doing
1. Reads the raw text of the .html file, top to bottom
2. Builds a tree of elements from the tags it finds — this tree is
called the DOM (Document Object Model)
3. Applies default browser styles to each element type (headings are
bold and large by default, paragraphs have spacing, links are blue
and underlined — before a single line of CSS is written)
4. Paints the resulting tree to the screenThis DOM tree is the same structure every other technology touches later — CSS selects elements from it to style them, JavaScript modifies it to make pages interactive, and screen readers walk it to describe a page to someone who can't see it. Getting this structure right in HTML is the foundation everything else in web development sits on top of.
A page with visually correct-looking styling but structurally wrong HTML (a <div> styled to look like a heading instead of an actual <h1>) looks identical to a sighted user but is functionally broken for search engines and screen readers, which both read the underlying structure, not the visual result. This series treats getting the structure right as the actual skill, not an afterthought — that's also the entire reason later parts on SEO and accessibility exist directly in an HTML series rather than being treated as separate concerns.
What HTML is not
HTML has no concept of color, layout, or spacing — a <h1> tag means "this is the most important heading on the page," not "this text is big and bold." The bold, large appearance is just the browser's default styling for that meaning, and CSS (covered in the parts on styling later in this series) is what actually controls appearance. Keeping this distinction clear from the start — structure in HTML, appearance in CSS — is what keeps a real site's markup clean and genuinely reusable instead of collapsing into a pile of generic <div>s the moment styling needs get more complex.
Next: the document skeleton every HTML page needs — <!DOCTYPE html>, <html>, <head>, and <body> — and what each one actually does.