Learn HTML5 —
From Beginner to Professional

No prior knowledge required. You will write your first web page in lesson 1 and understand exactly how browsers render HTML by lesson 2.

1. 01Introduction to HTML
   • What is HTML? How the web works: browsers, HTTP, rendering
   • HTML document structure: DOCTYPE, html, head, body
   • Your first HTML page: writing and opening in a browser
   • HTML syntax: elements, tags, attributes, and nesting rules
   • HTML comments, whitespace, and best coding practices
2. 02Basic HTML Elements
   • Headings h1 through h6 — hierarchy and SEO importance
   • Paragraphs, line breaks (br), horizontal rules (hr)
   • Block vs inline elements: div, span, strong, em, code
   • HTML entities: &, <, >,  , ©
   • The head element: title, meta charset, viewport, description
3. 03HTML Lists
   • Unordered lists (ul) with li elements — bullet lists
   • Ordered lists (ol) with type and start attributes
   • Definition lists (dl, dt, dd) for glossaries and descriptions
   • Nested lists — lists inside lists
4. 04Links and Images
   • Anchor tag (a): href, target, rel (noopener, nofollow)
   • Absolute vs relative URLs — internal and external links
   • The img element: src, alt, width, height, loading
   • figure and figcaption for semantic image captions
   • Image formats: JPEG, PNG, WebP, AVIF, SVG — when to use each
5. 05HTML Tables
   • Table structure: table, thead, tbody, tfoot, tr, th, td
   • colspan and rowspan for merged cells
   • caption element for table titles
   • scope attribute for accessible tables (row/col/rowgroup/colgroup)

The HTML features used in every professional web page — forms that collect data, semantic elements that improve SEO, and multimedia that creates rich user experiences.

6. 06Forms and Input Elements
   • The form element: action, method (GET vs POST)
   • Input types: text, email, password, number, checkbox, radio
   • select, option, optgroup — dropdown menus
   • textarea for multiline input
   • label element and the for attribute — accessibility essential
   • button element: submit, reset, and button types
7. 07Semantic HTML5 Elements
   • Why semantics matter: SEO, accessibility, and maintainability
   • Page structure: header, nav, main, footer
   • Content grouping: article, section, aside
   • Inline semantics: time, mark, abbr, cite, kbd, samp
   • Landmark roles and how semantic HTML maps to ARIA
8. 08Multimedia Elements
   • The audio element: src, controls, autoplay, loop, preload
   • The video element with multiple sources and fallback text
   • track element for subtitles, captions, and descriptions (WebVTT)
   • The picture element and art-directed responsive images
   • The canvas element — drawing 2D graphics with JavaScript
   • Inline SVG — scalable vector graphics in HTML

Accessibility, PWA, and performance — the three advanced HTML skills that separate professional developers from beginners, and that directly impact real-world user experience and SEO.

9. 09Web Accessibility (a11y)
   • What is web accessibility? WCAG 2.2: perceivable, operable, understandable, robust
   • ARIA roles: banner, navigation, main, contentinfo, complementary
   • ARIA attributes: aria-label, aria-labelledby, aria-describedby, aria-hidden
   • Keyboard navigation: focus order, tabindex, skip links
   • Screen reader compatibility: testing with NVDA and VoiceOver
   • Color contrast requirements and accessible form error messaging
10. 10Responsive Web Design Basics
    • The viewport meta tag — essential for mobile responsiveness
    • Responsive images with srcset and sizes attributes
    • The picture element for art direction and format switching
    • loading="lazy" for below-fold images
    • How HTML structure supports CSS media queries and Grid/Flexbox
11. 11Advanced Forms
    • HTML5 input types: date, time, range, color, search, tel, url
    • Native HTML5 validation: required, min, max, pattern, minlength
    • datalist element for autocomplete suggestions
    • File upload with input type="file", accept, and multiple
    • fieldset and legend for grouping related form controls
    • progress and meter elements for visual indicators
12. 12Progressive Web Apps (PWA)
    • What is a PWA? installability, reliability, and capability
    • Web app manifest (manifest.json): name, icons, display, start_url
    • Service workers: registration, install, fetch events, offline caching
    • Cache strategies: Cache First, Network First, Stale While Revalidate
    • Install prompt (beforeinstallprompt) and PWA on iOS/Android
13. 13Performance Optimization
    • The critical rendering path: HTML parsing, CSSOM, render tree
    • Resource hints: preload, prefetch, preconnect, dns-prefetch
    • Lazy loading images and iframes with loading="lazy"
    • fetchpriority attribute for LCP image optimization
    • Core Web Vitals: LCP, FID/INP, CLS — what HTML can control

The skills used in professional web development teams — tooling, collaboration, debugging, modern features, and getting your site live on the internet.

14. 14Integrating HTML with CSS and JavaScript
    • Linking external CSS stylesheets: link rel="stylesheet"
    • script tag: src, defer, async, type="module"
    • The DOM (Document Object Model): what it is and how JS reads HTML
    • HTML data attributes (data-*) for JavaScript interop
15. 15Version Control and Collaboration
    • Git basics for web projects: git init, add, commit, push
    • GitHub repository setup and managing HTML projects
    • Branches, pull requests, and collaborating on HTML files
    • .gitignore for web projects — what to exclude
16. 16Testing and Debugging HTML
    • Browser DevTools: Elements panel, inspect, edit HTML live
    • W3C HTML validator — checking for invalid markup
    • Google Lighthouse: audit performance, accessibility, best practices
    • Accessibility testing tools: axe DevTools, WAVE, screen readers
17. 17Modern HTML Features (2025–2026)
    • The dialog element — native modal dialogs without JavaScript libraries
    • details and summary — native accordion/disclosure widget
    • The Popover API — lightweight tooltips and overlays
    • Declarative Shadow DOM for server-side Web Components
    • The search element — semantic search landmark
18. 18Deployment
    • GitHub Pages — free hosting for HTML/CSS/JS websites
    • Netlify and Vercel — drag-and-drop or Git-connected deployment
    • Custom domain setup and HTTPS with Let's Encrypt
    • Continuous deployment: auto-deploy on Git push

Two specialized skills used in professional contexts — HTML for email campaigns and international audiences.

• 19HTML Email
  • Why HTML email is different: table-based layouts, inline CSS
  • Email client compatibility: Gmail, Outlook, Apple Mail, Yahoo
  • Responsive email with media queries and fluid tables
  • Testing with Litmus, Email on Acid, and Gmail preview
• 20Internationalization (i18n)
  • The lang attribute — declaring page language for browsers and assistive tech
  • dir attribute — left-to-right (ltr) and right-to-left (rtl) text
  • charset UTF-8 for universal character support
  • hreflang links for multilingual SEO
  • Unicode, emoji, and character references in HTML