06. Lists, Tables, and Forms

Lists group related items, tables present structured data, and forms collect information. Choose each element according to the meaning of the content.

Lists

<ul>
  <li>HTML</li>
  <li>CSS</li>
</ul>

<ol>
  <li>Create the file</li>
  <li>Write the HTML</li>
  <li>Open it in a browser</li>
</ol>

Accessible tables

<table>
  <caption>Weekly class schedule</caption>
  <thead>
    <tr><th scope="col">Day</th><th scope="col">Topic</th></tr>
  </thead>
  <tbody>
    <tr><td>Monday</td><td>HTML</td></tr>
  </tbody>
</table>

Create a form

<form action="/contact" method="post">
  <label for="name">Your name</label>
  <input id="name" name="name" type="text" required>

  <label for="email">Email address</label>
  <input id="email" name="email" type="email" required>

  <button type="submit">Send message</button>
</form>

Every input needs a visible label. The label’s for value must match the input’s id. HTML validation improves usability, but server-side validation is still required in a real application.

Practice activity

Add a skills list, a small schedule table, and a contact form containing name, email, message, and submit controls.