Learn HTML.
Build the skeleton of the web.
HTML is the structure under every page on the internet. Every heading, every paragraph, every button, every image — all HTML. It's the simplest language in the trinity (HTML, CSS, JavaScript), the fastest to learn, and the one you can't skip. This page is the map: what to learn, in what order, and the exact projects to build.
HTML is a markup language — it describes the structure and meaning of content, not its appearance. Learn the 20 elements that cover 90% of real pages, understand the difference between div and semantic elements (header, nav, article, section, footer), and use the right element for each job. That's the entire skill. No install, no compiler, no build step — just a text file and a browser.
Start here if: you've never written code, or you've written JavaScript/Python but never fully understood the HTML underneath it. Skip if: you already write semantic, accessible HTML confidently.
Why HTML first
HTML is the only language every website in existence is built on. React, Vue, Angular, Svelte — they all compile to HTML. Every server, every API that returns HTML, every email, every PDF viewer that renders web content — HTML. It's the foundation under every framework, every trick, every layer you'll add later.
It's also the fastest language to learn. There are only about 100 elements in total, and you'll use 20 of them for 90% of your work. A weekend of focused learning gets you to "I can build a page." Two weeks gets you to "I can build a page that works for everyone." Three weeks and you're done with the syntax — everything after that is repetition.
The trap: many people learn "just enough HTML" — enough to copy-paste a div soup — and then jump to CSS and JavaScript, always feeling slightly confused about the foundation. Spending two focused weeks on HTML pays dividends for every hour you spend after. It's the foundation.
🗺️ The 3-week path
Follow these in order. Do not skip ahead — each phase depends on the one before it.
Your first page
No install, no setup. Open a text editor, write your first HTML file, open it in a browser. Learn the boilerplate every page uses, then add a heading, paragraph, and image. That's the entire first day.
Semantic structure
Replace div soup with header, nav, main, article, section, aside, footer. Learn why it matters: accessibility, SEO, and code that future-you can read. This is the phase that separates "I know HTML" from "I don't really know HTML."
Lists, links, images
The three elements that appear on every page. Ordered and unordered lists, both kinds of links (internal and external), and images with proper alt text. Small elements, big impact on real pages.
Forms
Input fields, buttons, labels, checkboxes, radio buttons, select dropdowns. Forms are how users send data to servers — every login, every signup, every search box. This is the phase where HTML stops being static.
Accessibility basics
Alt text on every image. Labels on every form field. Heading hierarchy in order. Button, not div, for clickable things. Keyboard navigation. This phase teaches you to write HTML that works for everyone — the difference between a tutorial-quality page and a professional one.
Build a real page
Build a complete page from scratch: a personal site, a blog post, a product page, or a landing page. Use everything you've learned. Ship it. This is what turns "I read a tutorial" into "I can write HTML."
🎯 The 5 concepts that matter most
If you only truly understand five things about HTML, make it these.
1. HTML is structure, not style
HTML says "this is a heading" — CSS says "make it big and blue." Learn HTML without worrying about how it looks. Style comes later. This is the single biggest mental shift for beginners.
2. Semantic elements beat divs
header, nav, main, article, section, aside, footer — use them. Screen readers, search engines, and future-you all understand them. div is a fallback, not a default.
3. Every image needs alt text
alt="description" on every img. For decorative images: alt="". For meaningful images: describe what's shown. This is required for accessibility and helps SEO. No exceptions.
4. Heading order matters
One h1 per page. Then h2, then h3 — never skip levels for styling reasons. Headings define document outline, not font sizes. CSS controls size; HTML controls meaning.
5. Native elements come with free behavior
button has keyboard support, focus states, and click handling. a has navigation built in. input has validation. Don't rebuild them with div and onclick — use the native element.
⚠️ Common mistakes (from real beginners)
Each of these will cost you hours if you don't know it.
div class="header", div class="nav", div class="button" — this is "div soup." None of it means anything. Fix: use header, nav, button. div is a last resort when no semantic element fits.
h1 followed by h4 because h4 is "the right size" is a mistake. Use h2 for the second level, then style it with CSS. Headings define outline, CSS defines appearance.
img src="logo.png" without alt breaks screen readers and fails SEO. Always include alt — even if it's empty (alt="") for purely decorative images.
input placeholder="Email" without a label means screen readers announce "edit text" with no context. Always pair with a label: label for="email" Email /label.
div onclick="..." has no keyboard support, no focus indicator, no role. Fix: use button onclick="..." — it comes with all of that automatically. If it does something when clicked, it's a button.
p is a paragraph /p — the closing tag matters. Some elements are self-closing (img, br, hr, input), but most aren't. Unclosed tags break layout in ways that are hard to debug.
One h1 per page — the main topic. Everything else is h2 or deeper. Multiple h1s confuse screen readers and search engines about what the page is about.
br is a line break within text — not a spacing tool. Multiple br tags to push content down is a common beginner mistake. Use CSS margin and padding for spacing.
🔨 Projects by difficulty
Build these in order. Each one uses only concepts from the phases before it.
Personal bio page
Name, photo, short bio, list of hobbies, link to your favorite site. Uses phases 1-3. The classic first project.
Recipe page
Ingredients list, numbered steps, ingredient images, prep time. Uses headings, lists, images, and semantic elements. First "real page."
Contact form
Name, email, message textarea, submit button. Uses labels, input types, form. First form that actually does something.
Blog post page
Title, date, author, article body, sidebar with related posts, comments section. Uses semantic layout. First page with real structure.
Product page
Product images, title, price, description, reviews, "Add to cart" form. Uses figure, dl, and form. First ecommerce-style page.
Complete multi-page site
Home, About, Contact pages linked together. Shared nav, footer, semantic structure on every page. First real site — ready to show.
❓ Frequently asked questions
How long does it take to learn HTML?
For basic tags and structure: 1–2 weeks at 1 hour a day. To build complete, accessible, well-structured pages: 3–4 weeks. HTML itself is simple — the complexity comes from knowing which element is semantically correct for each situation, not from syntax.
Do I need to install anything to learn HTML?
No. HTML is just text files with a .html extension. You need a text editor (Notepad, VS Code, TextEdit) and a browser. Write the file, save it, double-click it — the browser renders it. No compilers, no servers, no terminal required.
What is the difference between HTML and HTML5?
HTML5 is the current version of HTML, standardized in 2014. When people say 'HTML' in 2026, they mean HTML5. Modern HTML has no version number in the doctype — just !DOCTYPE html.
What is semantic HTML and why does it matter?
Semantic HTML means using elements that describe their meaning: header instead of div class='header', nav instead of div class='nav'. It matters for accessibility, SEO, and maintainability. It's the single biggest quality difference between beginner and professional HTML.
Should I learn HTML before CSS and JavaScript?
Yes — absolutely. HTML is the structure, CSS is the styling, JavaScript is the behavior. You cannot style an element that doesn't exist, and you cannot interact with an element that hasn't been created. Learn HTML first (2-3 weeks), then CSS (4-6 weeks), then JavaScript (8-12 weeks).
What is the difference between div and section?
div is a generic container with no semantic meaning. section is a thematic grouping of content, usually with a heading. Use section when the content inside forms a coherent unit. If the content doesn't have a natural heading, it's probably a div, not a section.
What HTML elements should I use for accessibility?
Use button for clickable actions, a for links, label for form fields, alt on every image, heading tags in order, nav for navigation, main for primary content, and aria-label when text isn't visible. The principle: if a native element exists for the job, use it.
How do I make my HTML SEO-friendly?
Five things: one h1 per page with the main topic, heading tags in order, semantic elements (article, nav, main, aside), meta description under 160 characters, alt text on images. Also: internal links with descriptive anchor text, proper title tags, and clean URLs.