` — self-contained content that would still make sense on its own"},{"id":"c","label":"`

` — it's a section of the page","why":"`

` is a thematic part of *this* document. The group of three cards is a section; each individual card is a self-contained item, which is `

`."}],"answer":"b","explain":"`

` for the thing that could be lifted out — a post, a comment, a product card. `

` for a named part of this page. `

` when there's nothing to say.","unsure":"The test for `

` is whether the content would still make sense somewhere else — in a feed, in search results, on its own page. A blog post, a product card and a comment all pass. A page's \"Features\" region does not; that's a `

`.","after":3}},"task":{"kind":"markup","instruction":"Build the page from the spec. A `

` directly in the body containing a `

` with three links; exactly one `

` containing the `

`, the intro paragraph, and a link to `/join`; inside main, a `
` of three `
` cards, each with its own `
` and an `` with real alt text; and a `
` directly in the body. On day 1 you could not have done this. The checks are the acceptance criteria.","starter":{"filename":"index.html","lang":"html","source":"\n\n\n \n \n Rally Running Club — Tuesday nights\n\n\n \n\n Rally Running Club\n Home -> /\n Routes -> /routes\n Join -> /join\n\n Run with us on Tuesday nights\n\n Three routes, every pace, nobody dropped. We meet at the boathouse at 6.30pm\n and finish where the coffee is.\n\n Join the club -> /join\n\n The island loop -> /img/island.jpg\n Eight kilometres, flat, one bridge.\n\n The hill repeats -> /img/hill.jpg\n Six times up the cemetery hill. Walk the recoveries.\n\n The river out-and-back -> /img/river.jpg\n Ten kilometres on gravel, turn around at the lock.\n\n © 2026 Rally Running Club\n\n"},"checks":[{"name":"a `
` directly inside ``","selector":"body > header","exists":true},{"name":"a `
` inside the header with three links","selector":"header nav a","count":3},{"name":"exactly one `
`","selector":"main","count":1},{"name":"one `
`, inside `
`","selector":"main h1","count":1},{"name":"a call-to-action link to `/join` inside `
`","selector":"main a[href=\"/join\"]","exists":true},{"name":"a `
` inside main holding three `
` cards","selector":"main section article","count":3},{"name":"each card has its own `
`","selector":"article h2","count":3},{"name":"each card has an image with non-empty alt text","selector":"article img[alt]:not([alt=\"\"])","count":3},{"name":"a `
` directly inside ``","selector":"body > footer","exists":true}],"explain":"Look at what you just did with no framework, no CSS and no JavaScript: a document with named regions, a heading outline that describes the page, three self-contained cards, images with text alternatives, and a call to action that behaves like a link because it is one. A screen reader user can jump straight to main, list the three routes and go. Six days ago this file was a blank page and `
` was new. That's the whole first course."},"hints":[{"text":"Build it region by region, top to bottom: header (site name + nav with three links), main (h1, intro paragraph, join link, then the section of cards), footer. The `->` arrows show which URL or image file each line belongs with."},{"text":"Each card is `
The island loop
$\"…\"$
Eight kilometres, flat, one bridge.
`, and all three go inside one `
` inside `
`."}]},"codeHtml":"$undefined","index":24,"total":25,"authored":true}] b:[["$","meta","0",{"charSet":"utf-8"}],["$","meta","1",{"name":"viewport","content":"width=device-width, initial-scale=1"}]] 12:I[27201,["/_next/static/immutable/chunks/2corl6wyj4669.js"],"IconMark"] 8:null d:[["$","title","0",{"children":"HTML That Holds — step 24 · Saasworld"}],["$","meta","1",{"name":"description","content":"Write a well-structured HTML document from a blank file — landmarks, headings, lists, links, images and an accessible form — and read any page's markup and say what each element is for."}],["$","meta","2",{"name":"application-name","content":"Saasworld"}],["$","link","3",{"rel":"author","href":"https://saasworld.dev"}],["$","meta","4",{"name":"author","content":"Saasworld"}],["$","meta","5",{"name":"keywords","content":"learn to code,programming courses,SaaS,build a SaaS,AI-assisted coding,code review,web development course,JavaScript course,founders learning to code"}],["$","meta","6",{"name":"creator","content":"Saasworld"}],["$","meta","7",{"name":"publisher","content":"Saasworld"}],["$","meta","8",{"name":"robots","content":"noindex, follow"}],["$","meta","9",{"name":"category","content":"education"}],["$","link","10",{"rel":"canonical","href":"https://saasworld.dev/courses/html-that-holds/24"}],["$","meta","11",{"name":"format-detection","content":"telephone=no, address=no, email=no"}],["$","meta","12",{"property":"og:title","content":"HTML That Holds — step 24 · Saasworld"}],["$","meta","13",{"property":"og:description","content":"Write a well-structured HTML document from a blank file — landmarks, headings, lists, links, images and an accessible form — and read any page's markup and say what each element is for."}],["$","meta","14",{"property":"og:url","content":"https://saasworld.dev/courses/html-that-holds/24"}],["$","meta","15",{"property":"og:site_name","content":"Saasworld"}],["$","meta","16",{"property":"og:locale","content":"en_US"}],["$","meta","17",{"property":"og:image","content":"https://saasworld.dev/opengraph-image"}],["$","meta","18",{"property":"og:image:width","content":"1200"}],["$","meta","19",{"property":"og:image:height","content":"630"}],["$","meta","20",{"property":"og:image:alt","content":"Saasworld — Learn to build and ship software"}],["$","meta","21",{"property":"og:type","content":"website"}],["$","meta","22",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","23",{"name":"twitter:title","content":"HTML That Holds — step 24 · Saasworld"}],["$","meta","24",{"name":"twitter:description","content":"Write a well-structured HTML document from a blank file — landmarks, headings, lists, links, images and an accessible form — and read any page's markup and say what each element is for."}],["$","meta","25",{"name":"twitter:image","content":"https://saasworld.dev/opengraph-image"}],["$","link","26",{"rel":"icon","href":"/favicon.ico?favicon.3fpu2ql9ns1a0.ico","sizes":"256x256","type":"image/x-icon"}],["$","$L12","27",{}]]

Capstone: a landing page from a spec