Write HTML like a professional: fast, findable, shareable pages that work in every language.
- 28 lessons
- 7 units
- 5 h 37 m in all
- £0, for good
what’s inside.
For people who build things on their own and want code that others trust and can change.
HTML Level 3 is for people who have finished Levels 1 and 2. In 28 lessons you learn what professionals put into every page: fast pictures, a hard-working head, search and share tags, structured data, widgets that need no script and support for every language and direction. It ends with a level check: a launch-ready landing page, tested like a real one.
every lesson goes the same way.
- meet it
- guess first
- your turn
- fix it
- nailed it
unit 1
Fast pictures
Make pictures load quickly and keep the page still.
- Lazy pictures11 minMake pictures far down the page wait until someone scrolls near them.
- Save the space11 minStop the page jumping about while its pictures arrive.
- Sharp on every screen12 minSend sharper pictures to the screens that can show them, and only those.
- The right size for the space13 minLet the browser pick a file that fits how wide the picture will appear.
unit 2
First things first
Choose the best picture and fetch what matters most first.
- A different picture for each screen12 minShow a wide picture on big screens and a close-up on phones.
- Fetch it early12 minTell the browser about an important file before it would find it.
- Warm up the connection11 minStart talking to another server before the page needs its files.
- Most important first12 minTell the browser which picture matters most, and which can wait.
unit 3
A hard-working head
Fill the head with facts that browsers and phones use.
- Meta tags and characters11 minMake sure every letter, accent and symbol arrives in one piece.
- Fit the phone11 minStop phones from shrinking your page into a tiny copy of the desktop one.
- Icons for tabs10 minGive your site a little picture of its own for browser tabs and bookmarks.
- Colour the browser12 minTint the browser around your page, with a darker shade for dark mode.
unit 4
Found by search
Help search engines find your page and describe it well.
- How search engines read pages12 minLearn what search engines read first, and write a title that wins the click.
- Describe the page11 minWrite the short description people read under your link in search results.
- One address per page12 minTell search engines which address is the real one when a page has several.
- Looking good when shared13 minChoose the picture, title and words people see when they share your link.
unit 5
Facts for machines
Describe your page so search engines and screen readers understand it.
- Structured data13 minTell search engines exactly what your page is about, fact by fact.
- Facts inside facts14 minDescribe an event with a date and a place, each nested in the right spot.
- A clear outline12 minShape your headings into an outline that screen readers and search engines can follow.
- Other languages, same page13 minPoint search engines to every translation of a page, so each reader finds theirs.
unit 6
Open and close, no script
Build parts that open and close with HTML alone.
- Show more with details12 minHide answers until people ask for them, and build an accordion with no script.
- Pop-up notes12 minPop a note up on top of the page at the press of a button.
- Dialogue boxes13 minOpen a box that sits on top of the page and waits for an answer.
- Templates on standby11 minKeep a piece of HTML ready to copy, without showing or loading it.
unit 7
Every language, ready to launch
Handle any language and direction, then ship a page that is ready.
- Words from other languages11 minMark words from another language, and keep names safe from translation tools.
- Right to left12 minBuild pages for languages like Arabic and Hebrew, which read from the right.
- Mixed directions13 minStop names and words you do not control from scrambling the line around them.
- The launch checklist15 minCheck a whole page against a professional list before it goes live.