Library › Coding AI › College students

Replace div soup with semantic landmarks and keep the hooks

Practice: Setting limits and rules. About 5 minutes.

About this exercise

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.

Common mistakes when you ask AI for this

  • Dropping classes or ids. The AI often removes class names it thinks are redundant, which breaks styles.css and app.js. Try: Add: "Keep every class and id exactly as they are."
  • A broken skip link. The skip link points to #content, but nothing has that id until you add it. Try: Add: "Give main id=\"content\"."
  • Missing the nav details. The AI won't add a list or aria-current unless asked, and guesses the nav label. Try: Add: "Links in a ul/li; nav aria-label=\"Main\"; Home link aria-current=\"page\"."
  • The whole page, improved. The AI reprints the full document and adds meta tags or ARIA everywhere. Try: Add: "Return only the body; change nothing else."

What a strong prompt includes

  • Names the elements
  • Keeps classes and ids
  • Gives the nav details
  • Fixes the skip link
  • Asks for only the body

Practice this now ↑

Related exercises