Sign in Get started

Free tutorial · 34 lessons

HTML Tutorial

Learn HTML from scratch: page structure, headings, text, links, images, lists, tables, semantic elements, forms, input validation, media, meta tags for SEO and accessibility, then the HTML5 features: canvas, SVG, responsive images, dialog and popover, details, new form elements and the validation API, templates, data attributes, iframe sandboxing, web storage, drag and drop, ARIA, structured data and loading performance — with live previews you can edit in your browser.

Start learning →

HTML Basics

  1. HTML Introduction — What HTML is, how browsers read it and what an element looks like.
  2. HTML Get Started — Write HTML in an editor, save it as .html and open it in a browser.
  3. HTML Document Structure — DOCTYPE, html, head and body — the skeleton of every page.
  4. HTML Headings and Paragraphs — Structure text with h1–h6, paragraphs, line breaks and horizontal rules.
  5. HTML Text Formatting — Strong, emphasis, code, quotes and other inline text elements.
  6. HTML Links — Create links with <a>, absolute and relative URLs, new tabs and page anchors.
  7. HTML Images — Add images with alt text, sizes, lazy loading and responsive sources.
  8. HTML Lists — Unordered, ordered and description lists, and nesting.
  9. HTML Tables — Build accessible data tables with headers, captions and spanning cells.
  10. HTML History & Versions — How Tim Berners-Lee invented HTML for the World Wide Web, every version from the first 18 tags to HTML5 and today's Living Standard on one timeline, what HTML5 changed, and how new elements reach browsers now.

Page Structure

  1. HTML Block and Inline Elements — The difference between block and inline elements, and when to use div and span.
  2. HTML Classes and IDs — Name elements with class and id for styling, scripting and linking.
  3. HTML Semantic Elements — header, nav, main, article, section, aside and footer.
  4. HTML Head and Meta Tags — Title, meta description, viewport, Open Graph tags and favicons — the SEO essentials.
  5. HTML Forms — Collect user input with form, label, input, select, textarea and button.
  6. HTML Input Types and Validation — email, number, date, range and more — plus built-in validation attributes.
  7. HTML Audio, Video and Iframes — Embed audio, video and other pages.
  8. HTML Entities and Accessibility — Reserved characters, symbols, and the accessibility basics every page needs.

HTML5 Features

  1. HTML5 Overview — What HTML5 added to the web: semantic elements, native media, graphics, richer forms, interactive elements and browser APIs.
  2. HTML Canvas — Draw shapes, text and simple charts with the canvas element and its 2D drawing API.
  3. HTML Inline SVG — Draw scalable vector graphics with svg, use viewBox to scale them, and make them accessible.
  4. HTML Responsive Images — Serve the right image size and format with srcset, sizes and picture, and avoid layout shifts.
  5. HTML Dialog and Popover — Build accessible modal dialogs with <dialog> and lightweight popups with the popover attribute, without a library.
  6. HTML Details and Summary — Create accordions and disclosure widgets with <details> and <summary>, keyboard-accessible with no JavaScript.
  7. HTML5 Form Elements — Suggest values with datalist, show results with output, and display progress and measurements with progress and meter.
  8. HTML Form Validation API — Use built-in validation attributes, custom messages with setCustomValidity, and the :user-invalid style, then still validate on the server.
  9. HTML Templates and Data Attributes — Store custom data on elements with data-* attributes and reuse markup with the <template> element.
  10. HTML Iframes and the sandbox Attribute — Embed other pages safely with iframe, sandbox, allow, title and lazy loading.
  11. HTML Web Storage — Save small amounts of data in the browser with localStorage and sessionStorage, and know their limits.
  12. HTML Drag and Drop — Make elements draggable and handle drops with the HTML Drag and Drop API, plus a keyboard alternative.
  13. HTML ARIA Essentials — Use native elements first, then ARIA roles, states and live regions where HTML alone can't express what's happening.
  14. HTML Structured Data (JSON-LD) — Describe products, articles and FAQs to search engines with JSON-LD and schema.org.
  15. HTML Loading and Performance — Load scripts with defer, async and type=module, preload critical resources, and prioritise what matters for the first view.

Next Steps

  1. HTML Next Steps — Style your pages with CSS and make them interactive with JavaScript.