Topolearn

Learn HTML

The markup language that gives every web page its structure and meaning

21 lessons · 4 hours · 4 levels · covers HTML HTML Living Standard (2026)

HTML (HyperText Markup Language) describes the content of a web page: headings, text, links, images, forms and the regions of a layout. Browsers parse it into the DOM that CSS styles and JavaScript scripts. Writing clean, semantic HTML is the foundation of accessible, fast and search-friendly websites.

Sign in free to track progressOfficial docs ↗

How deep do you want to go?

1. EssentialsRead and write simple code, do the everyday basics7 lessons · 56 min in total
2. PracticalUse it productively at work, with the usual idioms14 lessons · 2 hours in total
3. AdvancedThe less common features, performance and trade-offs18 lessons · 3 hours in total
4. ExpertInternals and the edge cases experts know21 lessons · 4 hours in total

The HTML tree

HTMLDocument structureDocument structureElements and attributesElements andattributesHeadings, paragraphs and listsHeadings,paragraphs and listsLinksLinksImagesImagesBlock, inline and generic containersBlock, inline andgeneric containersForms, inputs and labelsForms, inputs andlabelsSemantic page layoutSemantic page layoutTablesTablesInput types and built-in validationInput types andbuilt-in validationHead metadata and SEOHead metadata andSEOAccessibility fundamentalsAccessibilityfundamentalsResponsive imagesResponsive imagesVideo, audio and embedsVideo, audio andembeds
Essentials and Practical shown (14 of 21 lessons); the full list is below. Click a lesson to read it.

All 21 lessons, in order

Document basics

  1. Document structure · Essentials · 8 min

    Every page starts from the same skeleton: a doctype, an html element with a language, a head for metadata and a body for content.

  2. Elements and attributes · Essentials · 8 min

    Elements are built from tags that wrap content and nest inside each other; attributes add extra information to an element.

  3. Block, inline and generic containers · Essentials · 7 min

    Understand block versus inline flow and when the generic div and span containers are the right choice.

Text, links and media

  1. Headings, paragraphs and lists · Essentials · 8 min

    Structure text with h1 to h6 headings, paragraphs, ordered and unordered lists, and inline elements for emphasis and code.

  2. Links · Essentials · 8 min

    The a element with href links to other pages, sections of the same page, email addresses and downloads.

  3. Images · Essentials · 7 min

    Embed pictures with img, always describing them with alt text and giving width and height to avoid layout shifts.

  4. Tables · Practical · 10 min

    Present tabular data with table, caption, thead, tbody, th and td, using scope so headers are announced correctly.

  5. Responsive images · Practical · 12 min

    Serve the right image file for each screen with srcset and sizes, and switch formats or crops with picture.

  6. Video, audio and embeds · Practical · 10 min

    Embed media with video and audio elements, add captions with track, and embed other pages safely with iframe.

Forms

  1. Forms, inputs and labels · Essentials · 10 min

    Collect user input with form, input, label and button, and send it to a server with name/value pairs.

  2. Input types and built-in validation · Practical · 12 min

    Pick specialised input types and use required, pattern, min, max and length limits to validate without JavaScript.

Semantics and accessibility

  1. Semantic page layout · Practical · 10 min

    Use header, nav, main, article, section, aside and footer to describe the regions of a page instead of anonymous divs.

  2. Accessibility fundamentals · Practical · 12 min

    Make pages usable for everyone: native elements, keyboard access, visible focus, text alternatives and correct names for controls.

  3. ARIA roles, states and live regions · Advanced · 12 min

    Use ARIA attributes to describe custom widgets and dynamic changes that native HTML can't express, and know when not to.

Metadata and loading

  1. Head metadata and SEO · Practical · 10 min

    Fill the head with the viewport, description, icons, canonical URL and social-preview tags that browsers and crawlers rely on.

  2. Loading scripts: defer, async, module · Advanced · 12 min

    Control when JavaScript downloads and runs with defer, async and type=module, and hint important resources with preload.

Interactive and reusable elements

  1. Dialog, details and popover · Advanced · 12 min

    Build modals, disclosures and popups with native dialog, details/summary and the popover attribute instead of custom scripts.

  2. Templates and custom elements · Advanced · 14 min

    Reuse markup with template and slot, and define your own tags with custom elements and shadow DOM.

Parsing and performance

  1. How browsers parse HTML · Expert · 14 min

    Understand the HTML parser's error recovery, implied tags and tree construction, and how it differs from the DOM you write.

  2. Loading performance in markup · Expert · 14 min

    Tune how the browser prioritises and renders with fetchpriority, lazy loading, decoding hints and the critical rendering path.

  3. Form submission and constraint validation API · Expert · 14 min

    Know exactly how forms encode and send data, and drive validation from JavaScript with the constraint validation API and FormData.