Courses & paths
One step at a time
HTML Fundamentals
Master HTML from scratch. Build real pages, understand how browsers work, and write clean, accessible markup.
Your path through the course
Open a module to explore its lessons-
Welcome to HTML5 lessons
What HTML is and how the browser reads it.
-
What is HTML?Video 8 min
-
How the Browser Reads Your CodeVideo · Complete the previous lesson first 7 min
-
Your First HTML FileLesson · Complete the previous lesson first
-
The Anatomy of an ElementLesson · Complete the previous lesson first
-
My First WebpagePractice · Complete the previous lesson first
-
-
Document Structure5 lessons
DOCTYPE, head, body, and what goes inside each.
-
DOCTYPE, html, head, bodyLesson · Complete the previous lesson first
-
The title TagLesson · Complete the previous lesson first
-
meta charset and viewportLesson · Complete the previous lesson first
-
Linking CSS and JS FilesLesson · Complete the previous lesson first
-
Comments in HTMLLesson · Complete the previous lesson first
-
-
Text & Headings5 lessons
Structuring and styling text content.
-
h1 to h6 — Hierarchy MattersVideo · Complete the previous lesson first 6 min
-
Paragraphs with pLesson · Complete the previous lesson first
-
strong, em, mark, and smallLesson · Complete the previous lesson first
-
br and hrLesson · Complete the previous lesson first
-
pre and codeLesson · Complete the previous lesson first
-
-
Links & Navigation5 lessons
Anchor tags, URLs, and building navigation.
-
The Anchor TagLesson · Complete the previous lesson first
-
Absolute vs Relative URLsLesson · Complete the previous lesson first
-
target="_blank" and rel="noopener"Lesson · Complete the previous lesson first
-
Linking to Page Sections with idLesson · Complete the previous lesson first
-
The nav ElementLesson · Complete the previous lesson first
-
-
Images & Media6 lessons
Images, video, audio, and embedded content.
-
The img TagLesson · Complete the previous lesson first
-
File Formats — When to Use WhatLesson · Complete the previous lesson first
-
figure and figcaptionLesson · Complete the previous lesson first
-
video and audioLesson · Complete the previous lesson first
-
iframe — Embedding External ContentLesson · Complete the previous lesson first
-
Media Gallery PagePractice · Complete the previous lesson first
-
-
Lists5 lessons
Organising content with ul, ol, and dl.
-
Unordered and Ordered ListsLesson · Complete the previous lesson first
-
ol type and startLesson · Complete the previous lesson first
-
List Items and Best PracticesLesson · Complete the previous lesson first
-
Description ListsLesson · Complete the previous lesson first
-
Nesting ListsLesson · Complete the previous lesson first
-
-
Tables5 lessons
Structured data with HTML tables.
-
table, tr, td, thLesson · Complete the previous lesson first
-
thead, tbody, tfootLesson · Complete the previous lesson first
-
colspan and rowspanVideo · Complete the previous lesson first 8 min
-
caption and AccessibilityLesson · Complete the previous lesson first
-
Pricing TablePractice · Complete the previous lesson first
-
-
Forms10 lessons
Building interactive forms.
-
form action and methodLesson · Complete the previous lesson first
-
input Types — text, email, password, number, dateLesson · Complete the previous lesson first
-
input Types — checkbox, radioLesson · Complete the previous lesson first
-
label and the for AttributeVideo · Complete the previous lesson first 6 min
-
select DropdownLesson · Complete the previous lesson first
-
textareaLesson · Complete the previous lesson first
-
button vs input type="submit"Lesson · Complete the previous lesson first
-
fieldset and legendLesson · Complete the previous lesson first
-
Form Validation AttributesLesson · Complete the previous lesson first
-
Registration FormPractice · Complete the previous lesson first
-
-
Semantic HTML7 lessons
Writing HTML that means something.
-
What is Semantic HTML and Why It MattersVideo · Complete the previous lesson first 9 min
-
header, footer, mainLesson · Complete the previous lesson first
-
section, article, asideLesson · Complete the previous lesson first
-
details and summaryLesson · Complete the previous lesson first
-
time, address, and abbrLesson · Complete the previous lesson first
-
div vs span vs Semantic ElementsVideo · Complete the previous lesson first 8 min
-
Blog Post Page — Semantic OnlyPractice · Complete the previous lesson first
-
-
Global Attributes5 lessons
Attributes that work on every HTML element.
-
id and classLesson · Complete the previous lesson first
-
style and titleLesson · Complete the previous lesson first
-
data-* Custom AttributesLesson · Complete the previous lesson first
-
hidden, tabindex, and contenteditableLesson · Complete the previous lesson first
-
lang and dir — RTL SupportLesson · Complete the previous lesson first
-
-
Accessibility6 lessons
Making the web usable for everyone.
-
What is Accessibility and Who It ServesLesson · Complete the previous lesson first
-
alt Text Done RightLesson · Complete the previous lesson first
-
ARIA Roles — role, aria-label, aria-hiddenVideo · Complete the previous lesson first 10 min
-
Keyboard Navigation and tabindexLesson · Complete the previous lesson first
-
Semantic HTML as the First Layer of AccessibilityLesson · Complete the previous lesson first
-
Audit and Fix an Inaccessible PagePractice · Complete the previous lesson first
-
-
HTML & the Browser — Deeper Look8 lessons
Understanding what the browser actually does with your HTML.
-
The DOM — What the Browser Actually BuildsVideo · Complete the previous lesson first 10 min
-
How Parsing Works — and What Breaks ItVideo · Complete the previous lesson first 8 min
-
Block vs Inline Elements RevisitedLesson · Complete the previous lesson first
-
The head in Depth — Favicons, OG Tags, CanonicalLesson · Complete the previous lesson first
-
script — defer, async, and PlacementVideo · Complete the previous lesson first 8 min
-
link rel — Preload, Prefetch, DNS-PrefetchLesson · Complete the previous lesson first
-
HTML Entities and Special CharactersLesson · Complete the previous lesson first
-
Void Elements vs Container ElementsLesson · Complete the previous lesson first
-
-
Capstone1 lessons
Put everything together.
-
Full Personal Portfolio Page — HTML OnlyPractice · Complete the previous lesson first
-
One lesson at a time, all the way through.