THE HTML LEARNING LIBRARY

HTML course

Understand the structure, semantics, and everyday decisions behind well-built pages.

34 resources to explore

24 on this page

Lesson01

HTML introduction: describe your first page

Recognize an element; distinguish structure from presentation; save a local HTML file.

Beginner5 min read

Lesson02

Build a complete HTML document

Use a doctype; separate metadata from visible content; declare language and character encoding.

Beginner5 min read

Lesson03

Elements, attributes, and the document tree

Understand nesting, content models, boolean attributes, and the difference between source HTML and the parsed DOM.

Beginner4 min read

Lesson04

Headings, paragraphs, and meaningful text formatting

Choose headings, emphasis, quotations, code, and dates by meaning, and build a readable document outline.

Beginner5 min read

Lesson05

Create meaningful links and fragment targets

Write a hyperlink; connect a fragment to a unique ID; distinguish relative and absolute URLs.

Beginner5 min read

Lesson06

Images, useful alternatives, and reliable file paths

Write context-aware image alternatives, reserve layout space, and diagnose broken image URLs after deployment.

Beginner5 min read

Lesson07

Choose ordered, unordered, and description lists

Choose a list by meaning; nest a sublist inside an item; associate terms with descriptions.

Beginner4 min read

Lesson08

Build an accessible data table

Identify data that belongs in a table; add a caption; associate simple row and column headers.

Beginner6 min read

Lesson09

Classes, IDs, colors, and maintainable styles

Connect HTML to reusable CSS with classes, unique IDs, predictable colors, and a clean separation of structure and styling.

Beginner5 min read

Lesson10

Div, span, and the difference between meaning and display

Choose neutral wrappers carefully and separate HTML semantics from CSS block, inline, flex, and grid layout.

Beginner5 min read

Lesson11

Organize a page with semantic landmarks

Identify the main content; label navigation; distinguish an article from a section.

Beginner5 min read

Lesson12

Write a labeled email form

Associate a visible label; submit a named value; understand required and email validation.

Beginner5 min read

Lesson13

Text, email, URL, telephone, search, and password inputs

Choose the right text input, distinguish type from inputmode, and support autofill without inventing restrictive validation.

Intermediate5 min read

Lesson14

Checkboxes, radio groups, select, datalist, and textarea

Model choices clearly, group related controls, and understand what checked, selected, and suggestion lists actually submit.

Intermediate5 min read

Lesson15

Numbers, ranges, dates, times, and color controls

Use numeric and temporal controls without confusing locale display, submitted formats, precision, or time zones.

Intermediate5 min read

Lesson16

File uploads, hidden fields, and button behavior

Understand file-selection hints, upload encoding, submitter overrides, and why hidden values are never trusted.

Intermediate5 min read

Lesson17

Constraint validation, custom errors, and server boundaries

Combine native constraints with clear custom feedback, avoid stale errors, and keep client validation separate from server trust.

Advanced5 min read

Lesson18

Accessible forms: instructions, errors, and completion

Design forms people can complete with keyboards, screen readers, speech input, zoom, and clear recovery from errors.

Advanced5 min read

Lesson19

Responsive images: srcset, sizes, and picture

Choose image candidates with srcset and sizes, handle art direction with picture, and verify actual resource selection.

Intermediate5 min read

Lesson20

Add an accessible disclosure with details and summary

Build a native disclosure; set its initial state; explain boolean attribute behavior.

Beginner4 min read

Lesson21

Audio, video, captions, and useful media alternatives

Publish media with native controls, source fallbacks, captions, transcripts, and realistic loading behavior.

Intermediate5 min read

Lesson22

Iframes, sandbox permissions, and embedding boundaries

Embed documents with explicit boundaries, meaningful titles, least-privilege sandbox permissions, and safe communication rules.

Advanced5 min read

Lesson23

SVG and canvas: choose the right graphics model

Compare retained vector markup with pixel drawing, provide text equivalents, and build a responsive accessible graphic.

Intermediate5 min read

Lesson24

Head metadata, viewport, and search-friendly documents

Write useful titles and descriptions, control document resources, and understand canonical URLs without ranking promises.

Intermediate5 min read