Master HTML. Build the foundation of the web.
A structured path from your first HTML document to semantic, accessible, SEO-friendly and production-ready markup.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width"
/>
<title>My Website</title>
</head>
<body>
<h1>Hello, Web!</h1>
</body>
</html>No previous HTML experience is required.
Learn consistently and build alongside the roadmap.
Structure, semantics, accessibility and the platform.
Ready to continue into CSS and frontend development.
More than tags. Real web fundamentals.
HTML is the foundation on which the rest of the web platform is built. Learn it properly before moving into CSS, JavaScript and frameworks.
Semantic HTML
Meaningful document structure
Forms
User input and validation
Accessibility
Inclusive web experiences
SEO
Search-friendly documents
Media
Images, audio and video
Security
Safer HTML practices
Performance
Faster document delivery
Web Platform
Modern browser capabilities
Choose where you want to begin.
Already know the basics? Jump directly to the area you need.
The HTML roadmap from zero to production.
Follow the phases in order if you are a beginner. Experienced developers can jump to the areas they need.
Web & HTML Foundations
Understand how HTML fits into the webStart with the mental model behind websites, documents, browsers, URLs and HTML before writing more complex markup.
How the Web Works
Understand the basic request-response model behind websites.
Introduction to HTML
Understand HTML documents, elements, tags and attributes.
HTML Document Structure
Learn the standard structure of a modern HTML document.
Core HTML Elements
Learn the building blocks of web pagesMaster the everyday elements used to structure text, content, links, images and documents.
Text & Headings
Create well-structured readable content using semantic text elements.
Links & Navigation
Build internal, external and accessible navigation systems.
Lists
Organize related information using semantic list elements.
Images
Use images correctly while considering performance and accessibility.
Semantic HTML
Write meaningful and maintainable markupMove beyond generic div-based layouts and learn how semantic HTML improves accessibility, SEO and maintainability.
Semantic Elements
Learn the structural elements that communicate meaning to browsers and assistive technologies.
Content Structure
Organize complex pages using meaningful document hierarchy.
div & span
Understand when generic containers are appropriate and when semantic elements are better.
Forms & User Input
Build usable web formsLearn how browsers collect, validate and submit user input.
HTML Forms
Understand form structure, submission and common form patterns.
Form Controls
Master the most common HTML input controls.
Input Types
Use appropriate input types for different kinds of user data.
Form Validation
Use built-in browser validation to create safer and better forms.
Tables & Structured Data
Represent tabular information correctlyLearn accessible and semantic table markup for structured data.
Media & Embedding
Work with modern web mediaLearn how to embed audio, video, external content and responsive media.
Audio & Video
Use native browser media capabilities.
Embedding Content
Embed external content responsibly.
Responsive Images
Serve appropriate images for different screens and resolutions.
Metadata & SEO
Make documents discoverableUnderstand how HTML metadata affects search engines, browsers, sharing and page behavior.
HTML Metadata
Understand metadata placed inside the document head.
SEO-Friendly HTML
Use semantic structure and metadata to create search-friendly pages.
Social Sharing Metadata
Understand metadata used when pages are shared on social platforms.
Accessibility
Build websites for everyoneLearn accessible HTML patterns so your interfaces work better for keyboard users, screen readers and users with different needs.
Accessibility Fundamentals
Understand the core principles behind accessible web content.
ARIA
Understand when ARIA is useful and when native HTML should be preferred.
Accessible Forms
Build form experiences that are understandable and usable.
Modern HTML APIs
Go beyond basic markupExplore modern platform features that HTML provides directly or exposes through browser APIs.
Dialog
Create native modal and non-modal dialog experiences.
Details & Summary
Create native disclosure components without JavaScript.
Template
Understand reusable inert HTML templates used by web applications.
Web Components
Understand the HTML platform features behind reusable custom elements.
HTML Security
Write safer markupUnderstand important security considerations when HTML interacts with user input and external content.
HTML Security Fundamentals
Learn the security boundaries surrounding HTML documents.
Cross-Site Scripting
Understand how unsafe HTML handling can create XSS vulnerabilities.
Safe Embedding
Understand safer patterns for third-party embedded content.
Professional HTML
Write production-quality markupDevelop the habits expected from professional frontend engineers.
HTML Code Quality
Create readable, consistent and maintainable HTML.
HTML Validation
Learn how to detect invalid and problematic markup.
HTML Performance
Understand how document structure affects loading and rendering.
Professional Workflow
Integrate HTML development into a modern Git-based workflow.
Projects & Industry Readiness
Turn HTML knowledge into real skillsFinish the roadmap by building increasingly realistic websites and demonstrating production-ready frontend fundamentals.
Personal Portfolio
Build a semantic, responsive personal portfolio.
Blog Website
Build a multi-page blog structure using production-quality HTML.
Product Landing Page
Create a professional product landing page ready for CSS styling.
Industry-Ready HTML
Apply semantic structure, accessibility, SEO and professional workflow together.
Projects turn HTML knowledge into real skills.
Don't finish the roadmap without building. Use projects to prove that you can apply what you learned.
Personal Profile
Create a semantic profile page with headings, links, images, lists and contact information.
Multi-page Blog
Build a structured blog with navigation, articles, metadata, images and accessible markup.
Product Website
Create a realistic product website with pricing, forms, FAQ, testimonials and strong document structure.
HTML is the beginning. CSS brings it to life.
Once you are comfortable with HTML structure, move into CSS to learn layouts, responsive design, animations, design systems and visual interfaces.
Ready to build your first web page?
Start with the fundamentals, practice every concept, build projects and keep moving forward.
<main>
<h1>Keep learning.</h1>
<p>Keep building.</p>
<a href="/next">
Keep growing →
</a>
</main>