Stage 1 · Lesson 3 of 9
Semantic HTML, headings and landmarks
means choosing the element that says what the content is. Use a button for an action and a link (a) for going somewhere else. Use nav, main, header and footer for the regions of a page, which are called .
Use h1 to h6 for headings that form an outline, and lists for lists. Give every meaningful image that describes it. Browsers, and search engines all read this structure, so the right element gives you keyboard support, focus and meaning for free.
A div with a click handler gives you none of it. Start every page by writing the HTML with no , and check it reads sensibly top to bottom.
Common trappicking headings by font size: headings describe structure, and CSS changes how they look.
A question to check yourself, an AI practice session and 3 cheat sheet entries come with the full roadmap. Unlock
Resources for this stage
Start with· follow one of these
- CourseFreeThe Odin Project
The Odin Project · Beginner
Foundations course: HTML, CSS and the web built in your own editor, not a sandbox
- GuideFreeweb.dev
Google · Intermediate
Free Learn HTML, Learn CSS and Learn Accessibility courses explain the why behind layout