Semantic HTML & forms
Make your page welcoming
Lesson 3 of 20 · 7 min · Module 1: Content with meaning
Meaningful HTML helps people understand your page, including people using a screen reader or a keyboard.
Start this lesson →Free. No installation: you write and run the code in your browser, and it is checked automatically.
By the end, you’ll be able to…
- Use main for primary content
- Connect labels to inputs
- Give a form action a meaningful name
The idea
Use <main> for the main content and <label> to name a form input. A label’s for attribute matches the input’s id.
<label for="name">Your name</label>
<input id="name" type="text">01A visible label has a programmatic connection
A label’s for value must match the input’s id. This gives the input an accessible name and lets clicking the label focus its control.
02Different form controls have different roles
type="email" tells the browser what kind of value is expected. A submit button identifies the action. This exercise builds structure; its sandbox does not submit a real form.
Your turn
<main>, add a form with a label saying Your email, an email input with id="email", and a submit button saying Join the list. Connect the label to the input.What the checks look for
- Form lives inside the main content
- Email field is connected to its label
- Input uses the email type and matching id
- Submit button has a clear name
Take this with you
Good form structure helps people understand and operate a page.