{"id":"code-col-html-semantic-landmarks-body","audience":"college","category":"coding","track":"coding","technique":"constraints","title":"Replace div soup with semantic landmarks and keep the hooks","free":false,"task":"Your web dev class project page is all divs. Turn div.site-header, div.site-nav, div.content and div.site-footer into header, nav, main and footer, keeping every class and id, and (per the project rubric) wrap the three nav links in a ul with one li each. The nav needs aria-label=\"Main\", the Home link gets aria-current=\"page\", the skip link must stay the first thing in body, and main must get id=\"content\" so the skip link works. Change nothing else. Return only the body in exactly 1 code block of at most 28 lines, under 25 words of text.","materialLabel":"Your page (attached to your prompt automatically)","material":"\n\n\n\n \n Campus Eats - late-night food near Hollis\n \n \n\n\n Skip to content\n
\n \n\n\n\n","rules":[{"type":"codeBlocks","count":1},{"type":"maxCodeLines","max":28},{"type":"maxProseWords","max":25}],"mistakes":[{"title":"Dropping classes or ids","why":"The AI often removes class names it thinks are redundant, which breaks styles.css and app.js.","fix":"Add: \"Keep every class and id exactly as they are.\"","checks":["r0"]},{"title":"A broken skip link","why":"The skip link points to #content, but nothing has that id until you add it.","fix":"Add: \"Give main id=\\\"content\\\".\"","checks":["r1"]},{"title":"Missing the nav details","why":"The AI won't add a list or aria-current unless asked, and guesses the nav label.","fix":"Add: \"Links in a ul/li; nav aria-label=\\\"Main\\\"; Home link aria-current=\\\"page\\\".\"","checks":["r0","r1"]},{"title":"The whole page, improved","why":"The AI reprints the full document and adds meta tags or ARIA everywhere.","fix":"Add: \"Return only the body; change nothing else.\"","checks":["r2","codeBlocks","maxCodeLines","maxProseWords"]}],"promptHints":[{"label":"Names the elements","patterns":["header","nav","main","footer"]},{"label":"Keeps classes and ids","patterns":["keep.{0,20}(class|id)","same class"]},{"label":"Gives the nav details","patterns":["aria-label","aria-current","?","list"]},{"label":"Fixes the skip link","patterns":["id=.?content","skip"]},{"label":"Asks for only the body","patterns":["only the.{0,10}body","just the body","change nothing else"]}],"hint":"Semantic tags are easy; keeping everything that depends on the old markup is the hard part. Tell the AI what to swap, what to keep and the two attributes to add.","rubricLabels":["Uses header, nav, main and footer for the four divs, keeping their classes and the nav's id, and the three nav links are inside a ul with one li each","The nav has aria-label=\"Main\", the Home link has aria-current=\"page\", and the main element has id=\"content\"","The skip link is still the first element in body, only the body element is returned, and no other content, attributes, CSS or scripts are added or removed"]}