Foundations01
Build your foundation
Understand elements, document structure, meaningful text, links, and the browser’s role.
Start with the essentialsYOUR NEXT SKILL STARTS HERE
Learn HTML.
Build with
confidence.
Go from your first tag to thoughtful, accessible websites. Clear explanations, hands-on practice, and the details that make you a better developer.
Free to explore. No account needed.
your-first-page.htmlHTML
01
<main>02
<h1>Hello, possibilities.</h1>03
<p>Every great website starts04
with a little HTML.</p>05
<a href="/html/introduction/">Keep learning</a>06
</main> THE RESULT From markup to meaning
Understand it. Change it. Make it yours.
34guided lessons
56reference entries
8runnable examples
At your pacefrom foundations to advanced
A CLEAR WAY FORWARD
Start where you are.
Know where you’re going.
Build your understanding in layers. Each stage connects the markup you write to the experience you create.
Practical HTML02
Create useful experiences
Make forms, tables, media, and page structure work together for real people.
Put HTML into practiceBeyond the basics03
Think like a developer
Explore accessibility, resilient markup, browser behavior, and production decisions.
Build a real projectONE WORKSPACE. MANY WAYS TO LEARN.
More than a list of tags.
HTML course
Understand the structure, semantics, and everyday decisions behind well-built pages.
34 lessonsHTML reference
Find the syntax, attributes, constraints, and accessibility details you need.
56 referencesCode examples
Change the source, run it, and connect the markup to the result.
8 examplesPractice exercises
Turn a concept into a skill with focused tasks and explained solutions.
5 exercisesKnowledge checks
Check your understanding and learn why an answer is correct.
5 quizzesReal-world projects
Bring the pieces together with practical briefs and review criteria.
4 projectsDeveloper tools
Inspect your markup and catch the small details that make a meaningful difference.
1 toolMAKE THE CONNECTION
Read a little. Try a little.
Example01
A reading journal with a clear heading
Build a small reading journal and see how a heading, paragraph, and main landmark work together.
Example02
From document scaffold to visible content
Separate head metadata from body content, then inspect the difference between a tab title and a visible heading.
Example03
A fragment link that reaches its section
Connect a meaningful link label to a unique section ID and inspect how fragment navigation behaves.
GOOD HABITS, FROM DAY ONE
Build for the web.
And everyone on it.
Knowing which tag to use is the beginning. Understanding its meaning, its limits, and how people interact with it is what comes next.
Find your next lessonUnderstand the reason
Learn what browsers do, why a pattern works, and when to choose another approach.
Practice the real details
Inspect the output, handle common mistakes, and compare your solution.
Keep accessibility close
Consider keyboard users, meaningful structure, readable labels, and helpful feedback as you build.
A SECOND PAIR OF EYES
Meet the Markup Lab.
Spot missing labels, duplicate IDs, and structural issues in your HTML. Explore the findings, understand the tradeoffs, and make your next revision better.
PUT THE PIECES TOGETHER
Make something worth sharing.
Project↗
Build a complete community event page
Create a responsive event page with a schedule, access information, clear navigation, and native FAQ disclosures.
Project↗
Build a booking form with a local review step
Build a labeled booking form that validates native constraints and displays a safe local summary without sending data.
Project↗
Build an honest product comparison page
Compare three fictional library plans with a semantic table, clear qualifications, and useful native disclosures.