Tables, forms, semantic structure and accessibility

Most real pages contain more than headings and paragraphs. They show timetables and prices in tables, and collect names and messages with forms. They also have to work for people who use a screen reader, a keyboard instead of a mouse, or a small phone screen. This lesson shows the HTML for tables and forms, and the semantic elements that give a page meaning for browsers, search engines and assistive tools.

Tables for data

A table shows data in rows and columns, such as a timetable or a price list. Use tables for data only, never to arrange the look of a page. The <table> element holds rows (<tr>, table row). A header cell is <th> and an ordinary data cell is <td>. A <caption> gives the table a title. Every row should contain the same number of cells.

<table>
  <caption>Garden club sessions</caption>
  <thead>
    <tr><th scope="col">Day</th><th scope="col">Time</th><th scope="col">Activity</th></tr>
  </thead>
  <tbody>
    <tr><td>Saturday</td><td>09:00</td><td>Digging</td></tr>
    <tr><td>Wednesday</td><td>17:30</td><td>Watering</td></tr>
  </tbody>
</table>

<thead> and <tbody> separate the header from the body. The scope="col" attribute tells assistive tools that each header describes the column beneath it. A screen reader can then say "Time: 09:00" instead of reading a bare number with no context.

Forms and labels

A form collects information from the reader. The <form> element wraps the controls. The <input> element makes a field; its type attribute chooses the kind: text, email, checkbox, radio and so on. A <textarea> gives space for a longer message, <select> with <option> makes a drop-down list and <button type="submit"> sends the form. The name attribute names the data when the form is sent.

Every control needs a label. A <label> is a caption linked to its input: the label's for attribute must match the input's id. A linked label is read aloud by screen readers, and clicking it puts the cursor in the field, which gives a bigger target for fingers and mouse clicks. Hint text shown inside an empty field is not a replacement for a label because it vanishes as soon as you type.

<form action="/join" method="post">
  <p>
    <label for="name">Your name</label>
    <input id="name" name="name" type="text" required>
  </p>
  <p>
    <label for="email">Email address</label>
    <input id="email" name="email" type="email" required>
  </p>
  <p>
    <label for="day">Preferred day</label>
    <select id="day" name="day">
      <option>Saturday</option>
      <option>Wednesday</option>
    </select>
  </p>
  <p>
    <label for="note">Message</label>
    <textarea id="note" name="note" rows="3"></textarea>
  </p>
  <button type="submit">Join the club</button>
</form>

The required attribute makes the browser refuse to send the form if that field is empty, and type="email" makes it check that the text looks like an email address. This is a convenience for the reader. It is not real security: a server must always check the data again. Making the form actually deliver the information to somebody needs a server, which is beyond this lesson.

Semantic structure

Semantic elements describe the role of a part of the page, not just its look. Instead of putting everything in anonymous boxes, you use <header> for the top of the page, <nav> for the main navigation links, <main> for the unique content, <section> and <article> for self-contained parts, <aside> for side notes and <footer> for the bottom. A page should have only one <main>.

Why bother? Screen reader users can jump straight to the navigation or the main content. Search engines understand the page better. Your own code is easier to read. The generic containers <div> and <span> still exist for grouping when no semantic element fits, but use them last.

<body>
  <header>
    <h1>Garden club</h1>
    <nav>
      <a href="index.html">Home</a>
      <a href="sessions.html">Sessions</a>
    </nav>
  </header>
  <main>
    <h2>Next session</h2>
    <p>Saturday at nine o'clock.</p>
  </main>
  <footer>
    <p>Contact: club@example.org</p>
  </footer>
</body>

Accessibility basics

Accessibility means that people with different abilities and devices can use your page. That includes people who are blind, have low vision, cannot use a mouse, find small targets hard to press or are in bright sunlight. Good HTML gives you most of it for free. The habits below cost almost nothing.

• Give every informative image meaningful alt text. If an image is purely decoration, use an empty alt="" so screen readers skip it.
• Use headings in order (h1, then h2, then h3) and never skip levels to get a size.
• Write link text that makes sense alone. Use "Read the seed guide", not "Click here".
• Label every form field with a linked <label>.
• Do not rely on colour alone to carry meaning, such as red text only for errors. Add words or symbols too.
• Check that you can reach every link and button by pressing the Tab key, and that you can see where you are.