HTML Course

Lesson 1 • Setting Up Your Development Environment

Guides installation of a code editor and browser developer tools. Students leave with a working local setup ready for hands-on coding.

Lesson 2 • How the Web Works

Covers client-server communication, browsers, and HTTP basics. Provides context for why HTML structure matters in web delivery.

Lesson 3 • What HTML Is and Does

Defines HTML as a markup language and explains its relationship to CSS and JavaScript. Grounds students in HTML's specific responsibility: content structure.

Lesson 1 • Headings, Paragraphs, and Text Elements

Covers h1–h6, p, br, hr, strong, em, and related inline elements. Students structure readable text content with correct semantic choices.

Lesson 2 • Tags, Elements, and Attributes

Explains opening and closing tags, self-closing elements, and attribute syntax. Builds the mental model students apply to every element throughout the course.

Lesson 3 • Lists: Ordered, Unordered, and Description

Teaches ul, ol, li, dl, dt, and dd elements with proper nesting. Students choose the correct list type based on content meaning.

Lesson 1 • Essential Meta Tags

Covers charset, viewport, description, and author meta tags. Students configure the minimum required metadata for every page they publish.

Lesson 2 • Open Graph and Social Metadata

Introduces Open Graph and Twitter Card meta tags for rich social previews. Students configure metadata that controls how pages appear when shared.

Lesson 3 • Linking External Resources

Teaches the link element for stylesheets, icons, and preloading assets. Students connect CSS files and favicons correctly using rel and href.

Lesson 1 • Embedding Images

Teaches the img element, src, alt, width, and height attributes. Students embed accessible images with correct paths and meaningful alternative text.

Lesson 2 • Figures and Captions

Introduces figure and figcaption for semantically grouping images with descriptive text. Reinforces semantic HTML principles introduced in Chapter 2.

Lesson 3 • Hyperlinks with the Anchor Element

Covers the a element, href, target, and rel attributes for internal and external links. Students implement navigation between pages and to external sites.

Lesson 1 • Accessible and Semantic Tables

Applies ARIA roles and summary patterns to improve table accessibility. Reinforces the principle that HTML structure communicates meaning to all users.

Lesson 2 • Spanning Rows and Columns

Teaches colspan and rowspan attributes for complex data layouts. Students merge cells without breaking table structure or accessibility.

Lesson 3 • Basic Table Structure

Introduces table, tr, td, and th elements to create rows and columns. Students build a simple data table from scratch.

Lesson 1 • Input Types and Text Controls

Teaches text, email, password, number, date, and other input types. Students select the correct type to trigger appropriate keyboards and validation.

Lesson 2 • Selection Controls: Checkboxes, Radios, and Selects

Covers checkbox, radio, select, option, and optgroup elements. Students implement grouped choices with correct name and value attributes.

Lesson 3 • Labels, Fieldsets, and Accessible Forms

Teaches label, fieldset, and legend for associating controls with descriptions. Students build forms that are fully operable by keyboard and screen reader.

Lesson 4 • HTML5 Form Validation

Covers required, pattern, min, max, and minlength attributes for client-side validation. Students reduce invalid submissions without writing JavaScript.

Lesson 1 • Page-Level Landmark Elements

Covers header, nav, main, aside, footer, and section elements and their correct usage. Students map a full page layout to appropriate landmark regions.

Lesson 2 • Why Semantics Matter

Explains how semantic elements communicate meaning to browsers, search engines, and assistive technologies. Motivates the shift from div-heavy to semantic markup.

Lesson 3 • Inline Semantic Elements

Teaches time, mark, abbr, cite, code, kbd, and samp for precise inline meaning. Students annotate content with elements that convey specific semantic intent.

Lesson 4 • Article, Section, and Content Grouping

Distinguishes article, section, and div for grouping related content. Students apply the correct element based on whether content is self-contained or thematic.

Lesson 1 • Keyboard Accessibility and Focus Management

Teaches tabindex, focus order, and skip navigation links. Students verify that all interactive elements are reachable and operable without a mouse.

Lesson 2 • Web Accessibility Fundamentals

Introduces WCAG principles: perceivable, operable, understandable, and robust. Students identify which HTML decisions directly affect each accessibility principle.

Lesson 3 • HTML Validation and Error Correction

Uses the W3C validator and browser dev tools to find and fix markup errors. Students develop a validation habit that prevents cross-browser rendering issues.

Lesson 4 • HTML Coding Standards and Maintainability

Establishes consistent formatting, naming conventions, and commenting practices. Students write HTML that teammates can read, maintain, and extend confidently.