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
Your first Python program
Python reads almost like English. Write a small converter, see its output, and open the project in /code to keep editing.
Build a program with AI
The vibe-coder path for Go: the idioms you must recognise, the prompt, and the review that catches dropped errors.
Your first C++ program
C++ trades a little ceremony for a lot of speed and control. Write a first program, learn the compile-then-run cycle, and open it in /code.
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.