Build a page with AI
Direct a model to write semantic HTML — and know enough to reject a wall of <div>s.
A semantic page produced by a model under your direction.
What "semantic" means and why it matters, the prompt that gets it, and the review that catches div soup.
Prerequisites
A coding assistant. No HTML experience required.
What you must recognise
- Semantic tags name their meaning: header, nav, main, section, article, footer — not a pile of <div>.
- One <h1> per page; headings descend in order. Screen readers and search engines both lean on it.
- Images need alt text. A model will skip it unless told.
The prompt
Write a semantic HTML5 page for a personal homepage. Constraints:- Use header, nav, main, section, and footer — no layout divs.- Exactly one h1; subheadings in order.- Every image has descriptive alt text.- No inline styles, no CSS yet — structure only. Output a single index.html.Review what it writes
Review rubric
Tutorial
Learn the tags directly
The Learn tab builds a page by hand. This tab teaches you to direct one.
Concepts covered · 1
More like this
Make a page respond: a click counter
A page becomes alive the moment JavaScript listens for an event and changes the page in response. Build a counter, then open it in /code.
Build interaction with AI
The vibe-coder path for JS events: the event→state→render loop you must hold in your head, the prompt, and the review.
Build a script with AI
The vibe-coder path for Python: the shape of a small program, the prompt, and the edge cases AI forgets.
Liked this one?
Pass it on
Discussion
Be the first to ask
Your questions stay private with the team. We can pin answers to share with everyone.
Sign in to ask a question privately on this tutorial.
Sign inNo pinned answers yet for this tutorial.