HTML5 Course

Lesson 1 • HTML5 vs. Earlier HTML Versions

Contrasts HTML5 with HTML 4 and XHTML to clarify what changed and why. Sets expectations for modern syntax rules used throughout the course.

Lesson 2 • How Browsers Render Web Pages

Explains the request-response cycle and DOM construction. Grounds all subsequent HTML authoring in real browser behaviour.

Lesson 3 • Setting Up a Development Environment

Guides students through installing a code editor and browser dev tools. Ensures every student has a working workspace before writing any code.

Lesson 1 • HTML Entities and Special Characters

Covers named and numeric character references for symbols and reserved characters. Prevents common rendering bugs caused by unescaped characters.

Lesson 2 • Sectioning and Landmark Elements

Introduces header, nav, main, article, section, aside, and footer. Students restructure a flat document into a semantically meaningful layout.

Lesson 3 • Lists: Ordered, Unordered, and Description

Explains ol, ul, li, dl, dt, and dd and when to use each type. Reinforces semantic choice over visual preference.

Lesson 4 • Headings, Paragraphs, and Text Flow

Covers h1–h6, p, br, and hr and their impact on document outline. Connects proper heading hierarchy to accessibility and SEO outcomes.

Lesson 1 • Hyperlinks and URL Fundamentals

Explains absolute vs. relative URLs, anchor attributes, and link targets. Enables students to wire multi-page sites together correctly.

Lesson 2 • Images and Responsive Techniques

Covers img, alt text, srcset, sizes, and the picture element. Students implement resolution-switching and art-direction patterns.

Lesson 3 • Figures and Captions

Teaches figure and figcaption to associate images with descriptive text. Reinforces semantic grouping introduced in the previous chapter.

Lesson 4 • Embedding Audio and Video

Introduces audio and video elements, source fallbacks, and track for captions. Students embed accessible media with multiple format support.

Lesson 1 • Table Structure Fundamentals

Covers table, tr, th, and td and their required nesting order. Establishes correct markup before introducing accessibility enhancements.

Lesson 2 • When Not to Use Tables

Clarifies the misuse of tables for layout and its accessibility consequences. Reinforces semantic decision-making established in earlier chapters.

Lesson 3 • Accessible Table Markup

Introduces scope, headers, and id attributes for screen reader compatibility. Connects table semantics to assistive technology behaviour.

Lesson 1 • Labels, Fieldsets, and Accessibility

Teaches label, fieldset, legend, and aria-describedby for accessible forms. Ensures every control is programmatically associated with its label.

Lesson 2 • Form Structure and Submission

Covers form, action, method, and enctype attributes and how data is sent. Provides the structural foundation for all form-related sections.

Lesson 3 • Core Input Types and Controls

Introduces text, password, email, number, checkbox, radio, and select. Students build a variety of controls and understand their default behaviours.

Lesson 4 • HTML5 Input Types and Pickers

Explores date, time, colour, range, file, and search input types. Students leverage native browser UI to reduce custom JavaScript needs.

Lesson 1 • Accessibility Testing and Auditing

Introduces automated tools, manual testing, and screen reader testing workflows. Students produce an accessibility audit report for a sample page.

Lesson 2 • ARIA Roles, States, and Properties

Covers role, aria-label, aria-labelledby, aria-hidden, and live regions. Students add ARIA only where native semantics are insufficient.

Lesson 3 • Web Accessibility Fundamentals

Introduces WCAG principles—perceivable, operable, understandable, robust—and their practical implications. Frames accessibility as a design requirement, not an afterthought.

Lesson 4 • Keyboard Navigation and Focus Management

Teaches tabindex, focus trapping, and skip navigation links for keyboard users. Students verify full keyboard operability of interactive components.

Lesson 1 • Geolocation API

Covers getCurrentPosition, watchPosition, and error handling for location data. Students build a feature that displays the user's coordinates on request.

Lesson 2 • Canvas Element and 2D Drawing

Introduces the canvas element and its 2D rendering context for programmatic drawing. Students draw shapes, text, and images using JavaScript context methods.

Lesson 3 • History API and Single-Page Navigation

Covers pushState, replaceState, and the popstate event for URL management. Students update the browser URL without full page reloads.

Lesson 4 • Drag and Drop API

Teaches draggable, dragstart, dragover, and drop events for native DnD. Students build a sortable list using only HTML5 drag-and-drop events.

Lesson 1 • Image Optimisation Strategies

Covers format selection, compression, and next-gen formats like WebP and AVIF. Students reduce image payload while maintaining visual quality.

Lesson 2 • Security Considerations in HTML

Identifies XSS vectors, unsafe iframe embeds, and insecure form targets. Students apply HTML-level mitigations to harden a sample application.

Lesson 3 • Resource Loading and Critical Path

Explains how script, link, and meta placement affects page load speed. Students reorder document resources to minimise render-blocking.

Lesson 4 • SEO Fundamentals Through HTML

Covers title, meta description, Open Graph tags, and structured data markup. Students add metadata that improves search engine and social media visibility.