1. Structure before decoration
By the end
- Choose headings, labels and buttons by their purpose.
- Connect an input to a visible label.
Start by writing the information a visitor needs: what the planner does, what to enter and where the answer appears. A heading names the page; a paragraph explains it; a form groups the inputs and submit action. These roles still matter when styles fail.
A visible label is not the same as a placeholder. Link the label’s for value to the input’s id. The hint can explain units, but it does not replace the name. Use a real button so keyboard activation works without recreating it.
Create planner.html, save it as UTF-8 and open it locally. The fragment below needs a document wrapper with <!doctype html>, html lang="en" (or "tr"), a title and a main element. It has no calculation yet: separate a readable structure from behavior.
Worked example
Name a duration field so its unit remains visible after typing.
- Give the input a unique id: minutes.
- Use the same value in label for. Put the unit in the label.
- Make the action a submit button inside the form.
<form id="planner">
<label for="minutes">Minutes per session</label>
<input id="minutes" name="minutes" type="number" min="1" required>
<button type="submit">Calculate</button>
</form>Clicking the label focuses the input. Tab reaches the input and the button.
Try it yourself
Add a second field for sessions per week and an empty paragraph for the result. Do not add JavaScript yet.
- Each input has a different id and a matching visible label.
- The button is reachable with Tab; clicking either label focuses the right input.
Reveal the practice solution
Use id="sessions" with label for="sessions". Give the result paragraph id="result" and role="status" so later result updates can be announced.
Watch for this mistake: A large bold paragraph may look like a heading, but it does not expose heading structure. Choose the semantic element first.
Sources and review date
- MDN: Structuring content with HTML
HTML structure, semantics and prerequisite context. Checked: .
Explanations, examples and quiz questions are original KitForma material. These links support technical facts and curriculum alignment.