` is the page's name. It shows in the tab and the bookmark, it's the headline in a search result, and it's the first thing a screen reader announces when the page loads. \"Untitled document\" and \"Home\" both fail the same test: read out on its own, with no other context, does it tell you where you are?","`<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">` is the line that makes a page usable on a phone. Mobile browsers default to pretending the screen is about 980 CSS pixels wide and then zooming the whole thing out to fit — a workaround for desktop-only pages from before phones. That's why an unstyled page looks tiny and greyed-out on mobile. This tag says: the viewport is as wide as the device really is, start at 100% zoom.","Two more things live in the head: `<link rel=\"stylesheet\" href=\"styles.css\">` for CSS, and `<script src=\"app.js\" defer></script>` for JavaScript. The full list of what the head can hold is in **MDN → HTML → `<head>`: the document metadata element**."],"gates":[{"id":"g1","prompt":"A page has no `<meta name=\"viewport\">`. It looks fine on a laptop. What does it look like on a phone?","options":[{"id":"a","label":"The same, but narrower — the phone just has less room","why":"That's what happens *with* the viewport tag. Without it the phone doesn't use its real width at all."},{"id":"b","label":"Zoomed out and tiny — the phone renders at about 980px wide and shrinks the result to fit the screen"},{"id":"c","label":"Broken — mobile browsers refuse to render a page without it","why":"Nothing refuses. It renders, legibly for a browser and illegibly for a person, which is why the bug survives to production so often."}],"answer":"b","explain":"Mobile browsers assume a desktop-width page and zoom out to fit it, because that was the only way old sites worked at all. The viewport meta opts you out of the workaround.","unsure":"When phones arrived, every page on the web had been built for a wide screen. So mobile browsers pretended to be about 980 pixels wide and scaled the finished page down to the actual screen. That default is still there. `<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">` turns it off and says: use the width you really have.","after":5},{"id":"g2","prompt":"What is `<!doctype html>` for?","options":[{"id":"a","label":"It puts the browser in standards mode instead of quirks mode"},{"id":"b","label":"It tells the browser the file contains HTML rather than plain text","why":"That job belongs to the `Content-Type` header the server sends. The doctype only chooses which rendering mode the parser uses."},{"id":"c","label":"It declares which version of HTML the page uses, so the browser can validate it","why":"Older doctypes did name a version, and browsers never validated against them. `<!doctype html>` names nothing — it's a switch, and the only thing it switches is standards mode."}],"answer":"a","explain":"One line, one job: standards mode. Miss it and the browser emulates twenty-year-old layout bugs on purpose, and your CSS quietly misbehaves.","unsure":"Browsers have to keep very old pages working, so they carry a second, deliberately buggy rendering mode called quirks mode. The doctype at the top of the file is the switch between them. `<!doctype html>` means \"modern rules, please\", and every document you write starts with it.","after":1}]},"task":{"kind":"markup","instruction":"This document is missing everything the head is for. Add a language, an encoding, a viewport, and a real title. Don't touch the body. As always, the checks are the acceptance criteria.","starter":{"filename":"index.html","lang":"html","source":"<!doctype html>\n<html>\n<head>\n <title>Untitled document

1:"$Sreact.fragment" 3:I[39756,["/_next/static/immutable/chunks/2corl6wyj4669.js"],"default"] 4:I[37457,["/_next/static/immutable/chunks/2corl6wyj4669.js"],"default"] 6:I[97367,["/_next/static/immutable/chunks/2corl6wyj4669.js"],"OutletBoundary"] 7:"$Sreact.suspense" a:I[97367,["/_next/static/immutable/chunks/2corl6wyj4669.js"],"ViewportBoundary"] c:I[97367,["/_next/static/immutable/chunks/2corl6wyj4669.js"],"MetadataBoundary"] e:I[68027,["/_next/static/immutable/chunks/1lhaw8tyeb639.js","/_next/static/immutable/chunks/2mnjqf_sto6-y.js","/_next/static/immutable/chunks/3ju-mipejkmsz.js"],"default",1] :HL["/_next/static/immutable/chunks/0w_hl5k9rxcg8.css","style"] :HL["/_next/static/immutable/chunks/3_ndc_ewjedl5.css","style"] :HL["/_next/static/immutable/media/797e433ab948586e-s.p.1v5bejj26fx9h.woff2","font",{"crossOrigin":"","type":"font/woff2"}] :HL["/_next/static/immutable/media/caa3a2e1cccd8315-s.p.0zr6hhvz-h9nw.woff2","font",{"crossOrigin":"","type":"font/woff2"}] 9:X 0:{"P":null,"c":["","courses","html-that-holds","3"],"q":"","i":false,"f":[[["",{"children":["courses",{"children":[["slug","html-that-holds","d",[]],{"children":[["step","3","d",["complete"]],{"children":["__PAGE__",{},"$undefined","$undefined",4096]},"$undefined","$undefined",4096]},"$undefined","$undefined",4096]},"$undefined","$undefined",4096]},"$undefined","$undefined",4112],[["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/0w_hl5k9rxcg8.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/3_ndc_ewjedl5.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","script","script-0",{"src":"/_next/static/immutable/chunks/1lhaw8tyeb639.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/_next/static/immutable/chunks/2mnjqf_sto6-y.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/_next/static/immutable/chunks/3ju-mipejkmsz.js","async":true,"nonce":"$undefined"}]],"$L2"]}],{"children":[["$","$1","c",{"children":[null,["$","$L3",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":[["$","$1","c",{"children":[null,["$","$L3",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":[["$","$1","c",{"children":[null,["$","$L3",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":[["$","$1","c",{"children":["$L5",[["$","script","script-0",{"src":"/_next/static/immutable/chunks/2qakyc3dpdhsa.js","async":true,"nonce":"$undefined"}],["$","script","script-1",{"src":"/_next/static/immutable/chunks/1qjw2jg5aog2e.js","async":true,"nonce":"$undefined"}],["$","script","script-2",{"src":"/_next/static/immutable/chunks/1k2n_b5n3jnn7.js","async":true,"nonce":"$undefined"}]],["$","$L6",null,{"children":["$","$7",null,{"name":"Next.MetadataOutlet","children":"$@8"}]}]]}],{},null,false,null]},null,false,"$9"]},null,false,"$9"]},null,false,"$9"]},null,false,null],["$","$1","h",{"children":[null,["$","$La",null,{"children":"$Lb"}],["$","div",null,{"hidden":true,"children":["$","$Lc",null,{"children":["$","$7",null,{"name":"Next.Metadata","children":"$Ld"}]}]}],["$","meta",null,{"name":"next-size-adjust","content":""}]]}],false]],"m":"$undefined","G":["$e",[["$","link","0",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/0w_hl5k9rxcg8.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}],["$","link","1",{"rel":"stylesheet","href":"/_next/static/immutable/chunks/3_ndc_ewjedl5.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]]],"S":false,"h":null,"r":"$undefined","s":"$undefined","a":"$undefined","l":"$undefined","p":"$undefined","d":"$undefined"} f:I[99217,["/_next/static/immutable/chunks/1lhaw8tyeb639.js","/_next/static/immutable/chunks/2mnjqf_sto6-y.js","/_next/static/immutable/chunks/3ju-mipejkmsz.js"],"Bootstrap"] 10:I[74255,["/_next/static/immutable/chunks/1lhaw8tyeb639.js","/_next/static/immutable/chunks/2mnjqf_sto6-y.js","/_next/static/immutable/chunks/3ju-mipejkmsz.js"],"AuthModal"] 9:C 2:["$","html",null,{"lang":"en","className":"geist_8a75054f-module__scnvyW__variable geist_mono_68c4f823-module__2UZmra__variable h-full","suppressHydrationWarning":true,"children":["$","body",null,{"className":"min-h-full","suppressHydrationWarning":true,"children":[["$","script",null,{"dangerouslySetInnerHTML":{"__html":"try{if(localStorage.getItem(\"gw-theme\")===\"light\")document.documentElement.setAttribute(\"data-theme\",\"light\")}catch(e){}try{if(sessionStorage.getItem(\"gw-intro-seen\")===\"1\")document.documentElement.setAttribute(\"data-intro\",\"seen\")}catch(e){}"}}],["$","$Lf",null,{"snapshot":null}],["$","$L3",null,{"parallelRouterKey":"children","error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L4",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]],[]],"forbidden":"$undefined","unauthorized":"$undefined"}],["$","$L10",null,{}]]}]}] 11:I[83819,["/_next/static/immutable/chunks/1lhaw8tyeb639.js","/_next/static/immutable/chunks/2mnjqf_sto6-y.js","/_next/static/immutable/chunks/3ju-mipejkmsz.js","/_next/static/immutable/chunks/2qakyc3dpdhsa.js","/_next/static/immutable/chunks/1qjw2jg5aog2e.js","/_next/static/immutable/chunks/1k2n_b5n3jnn7.js"],"Workspace"] 5:["$","$L11",null,{"slug":"html-that-holds","courseTitle":"HTML That Holds","moduleTitle":"The document","moduleId":"m1","moduleBadge":{"glyph":"⌗","name":"Documentarian"},"moduleExerciseIds":["s1","s2","s3","s4","s5","s6","s7"],"inModule":2,"moduleCount":7,"chapters":[{"id":"m1","title":"The document","badge":"$5:props:moduleBadge","steps":[{"id":"s1","title":"A page is a tree, not a picture","kind":"markup","index":1,"xp":50,"label":"Exercise 1"},{"id":"s2","title":"Anatomy of an element","kind":"spot","index":2,"xp":30,"label":"Exercise 2"},{"id":"s3","title":"The skeleton and the head","kind":"markup","index":3,"xp":50,"label":"Exercise 3"},{"id":"s4","title":"Close what you opened","kind":"trace","index":4,"xp":30,"label":"Exercise 4"},{"id":"s5","title":"Block and inline","kind":"triage","index":5,"xp":30,"label":"Exercise 5"},{"id":"s6","title":"Headings, text and lists","kind":"markup","index":6,"xp":50,"label":"Exercise 6"},{"id":"s7","title":"Chapter test: the document","kind":"exam","index":7,"xp":80,"label":"Exercise 7"}]},{"id":"m2","title":"Links, images and where things go","badge":{"glyph":"⚓","name":"Wayfinder"},"steps":[{"id":"s8","title":"Where a link actually goes","kind":"trace","index":8,"xp":30,"label":"Exercise 1"},{"id":"s9","title":"New tabs, mail, and link text","kind":"markup","index":9,"xp":50,"label":"Exercise 2"},{"id":"s10","title":"Images that carry their meaning","kind":"markup","index":10,"xp":50,"label":"Exercise 3"},{"id":"s11","title":"Landmarks instead of div soup","kind":"markup","index":11,"xp":50,"label":"Exercise 4"},{"id":"s12","title":"`

Rally Running Club