Forms and good structure

Level 4 of HTML School: 3 lessons, explained from scratch, with examples.

Play Level 4 in the game

Lesson 1

Forms and inputs

Text boxes, labels, checkboxes and buttons.

Boxes to type in

A form collects information: a sign-up, a search box, a quiz. It goes in <form>.

<input> makes a box. Its type attribute decides what kind: text, email, number, password, checkbox... Like <img>, it has no closing tag.

Every input needs a label saying what to type. The label’s for must match the input’s id. Then tapping the label puts the cursor in the box, and screen readers read the label out.

HTML
<form>
  <label for="name">Your name</label>
  <input type="text" id="name">
  <button>Send</button>
</form>

More kinds of input

  • type="email" checks for an @ and shows an email keyboard on phones
  • type="number" only takes numbers
  • type="checkbox" is a box to tick
  • placeholder="..." shows a grey hint inside an empty box
  • required stops the form being sent while the box is empty
HTML
<label for="mail">Email</label>
<input type="email" id="mail" placeholder="you@example.com" required>
<label><input type="checkbox"> Send me news</label>

Tip: You can also wrap the input inside its label, like the checkbox here. Then you don’t need for and id.

Practise “Forms and inputs” in the game

Lesson 2

Page structure

header, nav, main, section and footer.

Naming the parts of a page

Most pages have the same parts, and HTML has a tag for each:

  • <header>: the top, with the logo and title
  • <nav>: the menu of links
  • <main>: the main content (one per page)
  • <section>: a part of the content with its own heading
  • <footer>: the bottom, with contact details and the small print

They look like plain boxes, but they tell browsers, screen readers and search engines what each part is. Screen reader users can even jump straight to the <main> content.

HTML
<header><h1>Kofi’s Bakery</h1></header>
<nav><a href="menu.html">Menu</a> <a href="contact.html">Contact</a></nav>
<main>
  <section>
    <h2>Today’s bread</h2>
    <p>Sugar bread, fresh at 7am.</p>
  </section>
</main>
<footer>Open every day</footer>

<div>: the box with no meaning

Sometimes you just need a box to group things together, so CSS can style them. That’s <div>. It means nothing at all.

Use a meaningful tag when one fits (a menu is a <nav>), and <div> when none does.

Practise “Page structure” in the game

Lesson 3

Pages for everyone

Accessible HTML, and building a whole page.

Accessible pages

Millions of people browse with a screen reader, a keyboard instead of a mouse, or zoomed-in text. Good HTML works for all of them, for free:

  • headings in order: one <h1>, then <h2>s, then <h3>s, without skipping levels
  • alt text on every picture that matters
  • a <label> for every input
  • link text that says where it goes: “Read the menu”, not “click here”
  • <button> for things you press, <a> for things that go somewhere

Practise “Pages for everyone” in the game

Recap

What Level 4 covers, in a few lines.

  • <form> collects information. Each <input> is a box to type in or a thing to tick, and its type decides which: text, email, number, checkbox...
  • Every input needs a <label>. Connect them: the label’s for matches the input’s id.
  • <button> makes a button. required stops a form being sent while a box is empty.
  • Structure tags say what each part of a page is: <header>, <nav>, <main>, <section>, <footer>.
  • Accessible pages work for everyone: headings in order, alt text on pictures, labels on inputs, and links that say where they go.

Now try it in HTML School

Write real code and watch your page change as you type, with a check after every step and a test at the end of each level. Free.

Start learning