Web Development

Write semantic HTML that is easier to maintain and use

October 3, 2026•Beginner•30 min
Beginner30 minStep 1

Build page structure that browsers, search engines, and assistive technology can understand

Goal
You should be able to demonstrate the result described in the lesson and explain why each step was necessary.

Step-by-step

01

Use landmarks

Use header, nav, main, article, section, aside, and footer according to meaning rather than styling.

02

Keep heading order logical

Use one clear page title and descend through h2/h3 structure without choosing headings just for font size.

03

Label controls

Every form control needs an accessible name and keyboard-friendly behavior.

04

Use buttons for actions

Use buttons for actions and links for navigation instead of styling div elements to pretend.

05

Test without a mouse

Keyboard navigation quickly reveals many accessibility mistakes.

Verify before moving on
You should be able to demonstrate the result described in the lesson and explain why each step was necessary.

Troubleshooting

If a command or screen differs from the lesson, stop and verify the version you are using before forcing a change.

What you learned

You now understand the purpose of this part of the system and have a concrete result you can verify before continuing to the next lesson.