Compile Academy Start learning
</> Course · 71 lessons · approx. 420 minutes

Learn HTML

One new element per lesson. First understand, then practise with support and finally build your own web pages.

Start the HTML courseOpen compiler
  • Paragraphs
  • Headings
  • Important text
  • Document structure
  • Links & images
  • Lists
  • Accessibility
  • Your own programs & going deeper
  • details: an expandable explanation
  • time: a date for humans and machines
  • An understandable data table
  • figure: an image with a caption
  • abbr: making abbreviations understandable
  • progress: showing progress
  • dl: terms and explanations
  • header, nav, main, footer: the page structure
  • select: a choice in a form
  • video: embedding explainer videos
  • blockquote and cite: marking a quotation
  • aria-label: naming icon buttons
  • Details without your own JavaScript
  • Grouping form fields that belong together
  • Connecting terms with descriptions
  • Marking times in a machine-readable way
  • Marking a calculated result
  • Naming a data table clearly
  • Marking a download link
  • Skipping the navigation with a skip link
  • Tables
  • Forms
  • Semantics & accessibility
  • Media: images, sound and embeds

What you’ll learn

  1. Chapter 1Your first building blocks – One tag after another. Three minutes are enough for one step.
    Your first paragraph: <p> · Your main heading: <h1> · Sections with <h2>
  2. Chapter 2Bringing text to life – Every new element gets its own explanation and exercises.
    Important words: <strong> · Emphasising a word: <em> · Putting tags inside each other · A new line: <br> · A change of topic: <hr>
  3. Chapter 3A whole web page – Get to know all the parts one by one and then put them together.
    The whole page: <html> · Visible content: <body> · Information about the page: <head> · The browser tab: <title> · Language and character set · Your first whole page
  4. Chapter 4Links & images – Connect pages and include images accessibly.
    Links · Images & alternative texts · Boss: your mini profile page
  5. Chapter 5Lists & navigation – Bullet lists, numbered lists and menus.
    Lists
  6. Chapter 6Workshop: understand and build it yourself – Practise new building blocks with short explanations and your own programs.
    Form: a field for a name · Email and required fields · Boss: an understandable sign-up page
  7. Chapter 7New tools for your own ideas – Understand new concepts, fill them in and use them yourself.
    details: an expandable explanation · time: a date for humans and machines · An understandable data table
  8. Chapter 8Level up: your next practice chapter – Understand four new building blocks in small steps and use them yourself.
    figure: an image with a caption · abbr: making abbreviations understandable · progress: showing progress · dl: terms and explanations
  9. Chapter 9Master chapter: how real programs are built – Five building blocks from real projects – explained, connected, filled in and written by you.
    header, nav, main, footer: the page structure · select: a choice in a form · video: embedding explainer videos · blockquote and cite: marking a quotation · aria-label: naming icon buttons
  10. Chapter 10Project tools: understand and apply – Eight more building blocks with explanation pages and four exercises per lesson.
    Details without your own JavaScript · Grouping form fields that belong together · Connecting terms with descriptions · Marking times in a machine-readable way · Marking a calculated result · Naming a data table clearly · Marking a download link · Skipping the navigation with a skip link
  11. Chapter 11Tables – Data in rows and columns – with a header row, a caption and merged cells.
    Rows and cells: tr and td · Header rows with th, thead and tbody · Labelling a table: caption · Merging cells: colspan · Boss: a complete data table
  12. Chapter 12Forms – Labelled fields, fitting input types, selections and text areas.
    Labels with label and for · The fitting input types · Selection lists with select and option · Longer texts: textarea · Boss: a contact form
  13. Chapter 13Semantics & accessibility – Meaning instead of mere boxes: article, section, aside, good alternative texts and a clear order of headings.
    article: a self-contained article · section and aside · Good alternative texts · A clear order of headings · Boss: an accessible card
  14. Chapter 14Meta tags & SEO – Descriptions, preview images and best practices.
    The page description: meta description · For phones: meta viewport · A nice preview when sharing: Open Graph · The little symbol in the tab: favicon · Boss: a complete head section
  15. Chapter 15Media: images, sound and embeds – Play sound, images for every device, fast loading and embedding outside content safely.
    Playing sound: <audio> · The right picture for every device: <picture> · Loading faster: width, height and loading="lazy" · Embedding outside content: <iframe> · Boss: a media page
  16. Chapter 16Final project – Your personal portfolio page – in the projects area.
    Portfolio 1: the page skeleton · Portfolio 2: the “About me” section · Portfolio 3: projects as cards · Portfolio 4: the contact form · Boss: your finished portfolio

Final project: Personal portfolio page

Your own page with texts, links and images.

How it works

Every lesson starts with short explanation pages. Then you practise with multiple-choice questions, fill-in-the-gap tasks, putting code in order and writing your own code – with hints and instant feedback. Free, without ads, on phone, tablet and PC.

Learn HTML now