`","why":"`

` marks the primary content *inside* the body, and it's optional. Everything visible is in ``, main or not."}],"answer":"a","explain":"`` has exactly two children: `` for metadata, `` for the page.","unsure":"An HTML document splits in two. The head carries information the browser needs but the reader never sees. The body carries the page itself. Content that mistakenly lands in the head simply doesn't appear.","after":1}},"task":{"kind":"exam","instruction":"Five questions, three to pass. Clear this and you've proved you can write a valid document from a blank file and predict the tree the browser builds from it — including from markup that's wrong.","pass":0.6,"questions":[{"id":"q1","prompt":"A page's content is written but nothing appears on screen except the title in the tab. What's the first thing to check?","options":[{"id":"a","label":"Whether the content was written inside `` instead of ``"},{"id":"b","label":"Whether the doctype is missing","why":"A missing doctype gives you quirks mode — subtly wrong layout, not an invisible page. The content still renders."},{"id":"c","label":"Whether the charset is wrong","why":"A wrong charset garbles characters. The text still shows, just mangled."}],"answer":"a","explain":"The head renders nothing. It's the single most common cause of \"my content vanished\"."},{"id":"q2","prompt":"Which of these is written correctly?","options":[{"id":"a","label":"` $\"A$ `"},{"id":"b","label":"` $\"A$ `","why":"`` is a void element — no content, so no closing tag. The parser drops the `` and you've written noise."},{"id":"c","label":"`

`","why":"The unquoted `alt` ends at the space, so the alt text is `A` and `cat` becomes a stray attribute. Quote every value."}],"answer":"a","explain":"Void element, attributes quoted, no closing tag."},{"id":"q3","prompt":"`

One

Three

` is parsed. Where does the `

` is closed just before it, because a paragraph can't contain a list"},{"id":"b","label":"As a child of the paragraph, exactly as written","why":"`

` accepts phrasing content only. The parser is not allowed to build that tree, so it moves the paragraph's end instead."},{"id":"c","label":"Nowhere — invalid nesting means the list is dropped","why":"Nothing gets dropped. HTML parsing has no fatal errors; it produces a different tree and renders it."}],"answer":"a","explain":"Block inside a paragraph closes the paragraph early. Everything after the block — including \"Three\" — is outside the `

` you thought you were in."},{"id":"q4","prompt":"A design calls for a small subheading under a big one. The outline already has an `

` and this is a section of it. Which element?","options":[{"id":"a","label":"`

`, sized down in CSS"},{"id":"b","label":"`

`, because it renders at about the right size","why":"Picking a level for its size puts a hole in the outline. Levels describe nesting; the stylesheet describes size."},{"id":"c","label":"A `
` with `font-weight: bold`","why":"That removes it from the outline entirely — a screen reader user browsing by heading will never find this section."}],"answer":"a","explain":"Level by position in the outline. Size by CSS. Always."},{"id":"q5","prompt":"Which sentence about `` is true?","options":[{"id":"a","label":"Without it, mobile browsers render the page at roughly 980px wide and zoom out to fit, so everything looks tiny"},{"id":"b","label":"It makes the page responsive on its own","why":"It only sets the viewport width. Whether the layout adapts to that width is CSS's job — the tag is a precondition, not the feature."},{"id":"c","label":"It's only needed on pages that use media queries","why":"Without it, media queries evaluate against the fake 980px viewport, so they're precisely the thing that breaks — but a page with no CSS at all is still rendered zoomed-out and unreadable."}],"answer":"a","explain":"Mobile browsers assume a desktop-width page unless told otherwise. This tag tells them otherwise, and everything responsive depends on it."}]}},"codeHtml":"$undefined","index":7,"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 7 · 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/7"}],["$","meta","11",{"name":"format-detection","content":"telephone=no, address=no, email=no"}],["$","meta","12",{"property":"og:title","content":"HTML That Holds — step 7 · 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/7"}],["$","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 7 · 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",{}]]

Chapter test: the document