Rullst AcademyRullst Academy/Lesson
Semantic HTML and accessibility · Lesson 07 / 10

Every field needs an introduction

An empty field does not explain what it expects. Make a form understandable before filling it out.

Learning paths14 min

Let's discover together

  1. 1

    A visible label explains a control. for="alias" must match id="alias" on the input; clicking the label focuses the field. Id identifies the element; name identifies its value in a form submission.

  2. 2

    Placeholder is a temporary hint and disappears when typing; it does not replace a label. Put persistent instructions near a field and connect them with aria-describedby when needed. That attribute supplements native HTML rather than fixing vague instructions.

  3. 3

    Group related options with fieldset and name the group with legend. Radio buttons in a group share name; each option has its own id and label. Select offers native choices without building a custom menu.

  4. 4

    Use only an invented alias and activity choices in this exercise. Nothing is a real registration. Type, click labels and navigate by keyboard in the preview; field values are neither transmitted nor saved into the code draft.

HTML workshop: write, observe, review

Edit HTML in “My files and GitHub” and update the preview. It uses study elements and reading styles: scripts, custom CSS and external navigation are disabled. Only the kit’s route.svg is shown as an image.

Go to my HTML

These simple checks are neither complete HTML validation nor a WCAG audit. Review content, keyboard, zoom and assistive technologies; record what you have not tested.

Official links and next step

✦
YOUR MISSION

Associate labels, instructions and groups with native controls.

Now it's your turn

Discovery workshop

Read, predict, try

<label for="alias">Alias</label><input id="nickname" name="alias"> does not explicitly associate the label.
Build your answers and check when you are ready.
A moment to understand

Can placeholder be the only field name?

I need a hint

Compare the intent with the meaning of the elements; appearance alone does not demonstrate accessibility.

Loading your journey…

Take it with you

Create a choice between two fictional activities. Check labels by clicking them and describe id, for and name.

At your own pace

My files and GitHub

Every lesson can become your own record: code, notes or a practice plan. Saving a file to GitHub is optional and does not change your XP.

Student guide

The editor and downloads open when this lesson is available to your account. Check access below or return to the track map.

Checking your access to this lesson…

Rullstpetbot

AI can make mistakes. Check the lesson material.