HTML: From Basics to Expert
Thirty topics, five modules, every example runnable in the browser
HTML is the language every web page is written in. It is not a programming language: it does not calculate or decide anything. It says what the things on a page are - this is a heading, this is a link, this is a table of sales figures - and the browser, the search engine and the screen reader all work from that answer.
Overview
It is also the smallest useful thing you can learn in web development. By the end of the first module you can build a page that works. Nothing else on this site has that ratio.
Introduction
Module 1, Foundations, covers the eight topics every page is built from: what HTML is, the document structure, text, attributes, links, images, lists and tables. Module 2 covers forms in three topics, then semantics, the modern HTML feature set and media. Module 3 is graphics, embedded content, metadata, responsive HTML, accessibility and entities. Module 4 is the advanced half: advanced forms and media, performance, security, how HTML meets CSS and JavaScript, SEO, the modern APIs and the standards that hold it all together. Module 5 is a real project and a set of interview questions.
This course assumes nothing. If you have never written a tag, the first topic starts with the nine lines every page begins with and explains what each one is for. If you already write HTML every day, treat Module 1 as revision and start at Module 3: most working developers have never read the rules on landmarks, labelling or what a screen reader does with a div, and that is where the hours here pay for themselves.
Each module ends with a quiz drawn from its own topics, and the course ends with a final exam. A topic is one sitting - a short explanation, complete examples, then the edge cases that bite in real pages.
Every example is a document you can paste into a file and open. Press the "Try yourself!" button under any of them and it opens in the playground, where you can edit it on the left and watch the rendered result on the right. Every example in this course was loaded in a real browser and checked to parse into the structure it is written as, which matters more than it sounds: a browser silently repairs invalid markup, so an example with a mis-nested tag still renders something and teaches a structure the parser never built.
What you will be able to do
- Write a valid, accessible HTML5 document from memory
- Choose the right element for text, lists, tables and media every time
- Build forms the browser validates, labels and autofills for you
- Structure a page with landmarks a screen reader can navigate
- Control how a page is previewed, indexed and shared
- Cut load time with preloads, lazy images and correct script attributes
- Recognise the HTML-level causes of common security problems
- Ship a multi-page site that passes a real accessibility and quality review
What each level covers
5 levels · 36 lessons
-
Module 1 - Foundations
The eight topics every page is built from. What HTML is and is not, the document skeleton, the text elements and what each one means, attributes, links, images, lists and tables. By the end you can build a page that validates and reads well with no CSS and no JavaScript at all.
9 lessons 59 min of reading
Start with Introduction to HTML → -
Module 2 - Forms, Semantics and Media
The parts of HTML that most often go wrong in real projects. Three topics on forms, from the first label to constraint validation and why none of it is security; then semantic structure, the modern HTML feature set, and audio and video with the captions track that is usually missing.
7 lessons 46 min of reading
Start with HTML Forms: Introduction → -
Module 3 - Graphics, Metadata and Access
Six topics on everything around the content. Graphics in markup, embedded content from other origins, the head metadata that decides how a link previews, responsive HTML, accessibility as a set of concrete decisions, and the entities you need when the character you want is also syntax.
7 lessons 46 min of reading
Start with HTML Graphics → -
Module 4 - Advanced HTML
Nine topics that separate a page which works from one which holds up. Advanced forms and media, loading performance, the security problems that start in markup, how HTML meets CSS and JavaScript, what search engines and answer engines actually read, the modern APIs, and the standards and habits behind all of it.
10 lessons 1 hr 4 min of reading
Start with Advanced HTML Forms → -
Module 5 - Project and Practice
Everything applied. A multi-page site built from semantic markup with a quality checklist to measure it against, and the interview questions an HTML role actually asks, grouped from beginner to advanced with the answers worked through.
3 lessons 24 min of reading
Start with Real-World HTML Project →
Guides and articles
Longer reading about this subject, written alongside the course.
Before you start
- A text editor and a browser
- No previous HTML required
Common questions
- What does the HTML: From Basics to Expert course cover?
- It is 5 levels and 36 lessons: Module 1 - Foundations; Module 2 - Forms, Semantics and Media; Module 3 - Graphics, Metadata and Access; Module 4 - Advanced HTML; Module 5 - Project and Practice. Each level ends with a quiz, and the last one is an exam over the whole course.
- How long does it take?
- About 239 minutes of reading and exercises - roughly 4 hours. It is self-paced with no cohort and no start date, so you can leave and come back and the site remembers where you were.
- What do I need to know first?
- A text editor and a browser. No previous HTML required.
- Is it free?
- Yes. Every lesson, example and quiz in this course is free to read, and you do not need an account to read them. Signing in only adds progress tracking and quiz results.
- What will I be able to do afterwards?
- Write a valid, accessible HTML5 document from memory. Choose the right element for text, lists, tables and media every time. Build forms the browser validates, labels and autofills for you. Structure a page with landmarks a screen reader can navigate. Control how a page is previewed, indexed and shared. Cut load time with preloads, lazy images and correct script attributes. Recognise the HTML-level causes of common security problems. Ship a multi-page site that passes a real accessibility and quality review.