HTML Lab Examples

Sixteen standalone demo pages that follow the track's lesson order, grouped by phase. Each demo is a complete, commented HTML file. Every row has two links: View code opens the source in the code viewer; Preview opens the rendered page in a new browser tab. Change one thing in the source, then reload the preview — that loop is where the learning happens.

Foundations

The skeleton and the syntax rules every later demo assumes.

#DescriptionView codePreview
1Hello world — the minimal documentViewPreview
2Document structure — head, body, landmarksViewPreview
3Text and headings — inline semantics, quotes, abbrViewPreview

Content and navigation

Lists, every anchor job, alt-text styles, and a fully scoped table.

#DescriptionView codePreview
4Lists and links — ul/ol/dl, fragments, mailto, telViewPreview
5Images and figure — alt styles, width/height, captionViewPreview
6Data table — caption, scope, thead/tbody/tfootViewPreview

Forms and data

The form contract and the browser's validation engine.

#DescriptionView codePreview
7Contact form — labels, types, autocomplete, submitViewPreview
8Validated form — required, pattern, :user-invalidViewPreview

Semantics and accessibility

Landmarks, skip links, widget semantics, and the full social head.

#DescriptionView codePreview
9Semantic page — landmarks and skip linkViewPreview
10Accessible widgets — native vs div button, aria-expandedViewPreview

Platform APIs

data-* contracts, native widgets, and DOM-resident graphics.

#DescriptionView codePreview
12Data attributes — dataset in JS and CSSViewPreview
13Details and dialog — native disclosure and modalViewPreview
14Inline SVG — styleable DOM shapesViewPreview

Delivery and quality

Embedding with sandbox and the loading-attribute toolkit.

#DescriptionView codePreview
15Embed iframe — sandbox, title, size, lazyViewPreview
16Loading hints — eager vs lazy vs deferredViewPreview
How to use them. The demos need nothing but a browser — each file is self-contained. In the code viewer, change one attribute and study what you would expect to change; in the preview, verify. Larger multi-file study projects are on the Study Projects page.