2. Lists, Tables & Forms

Level: BeginnerDuration: 20m

Organizing Information with Lists

Lists are everywhere. From navigation menus to product features. HTML provides three main types: ordered, unordered, and description lists.

Tag	Use Case
<ul>	Unordered list (bullets)
<ol>	Ordered list (numbers)
<li>	List item inside <ul> or <ol>
<dl>	Description list (term/definition)
<dt>	Term name in description list
<dd>	Term definition

html

<h2>My Favorite Hobbies</h2>
<ul>
  <li>Reading sci-fi books</li>
  <li>Playing strategy games</li>
  <li>Exploring new tech tools</li>
</ul>

<h2>Top 3 Programming Languages</h2>
<ol>
  <li>Python</li>
  <li>JavaScript</li>
  <li>Java</li>
</ol>

<h2>Tech Terms Explained</h2>
<dl>
  <dt>HTML</dt>
  <dd>Structures content on the web</dd>
  <dt>CSS</dt>
  <dd>Adds style and color to webpages</dd>
</dl>

💡 Tip: Lists can be nested, meaning you can place a <ul> or <ol> inside another list item to create multi-level menus.

Displaying Data with Tables

Tables are great for organizing structured information like schedules, comparison charts, or product data. Each table is made of rows (<tr>) and cells (<td>), and you can use <th> for header cells.

html

<h2>Weekly Schedule</h2>
<table border="1">
  <caption>My Study Plan</caption>
  <tr>
    <th>Day</th>
    <th>Topic</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td>HTML Basics</td>
  </tr>
  <tr>
    <td>Tuesday</td>
    <td>CSS Fundamentals</td>
  </tr>
  <tr>
    <td>Wednesday</td>
    <td>JavaScript Intro</td>
  </tr>
</table>

`<table>` wraps the whole table.
`<tr>` defines a table row.
`<th>` is a header cell (bold and centered by default).
`<td>` is a regular data cell.
Use `<caption>` for accessibility and clarity.

Collecting Input with Forms

Forms are how users send data to a server, for example, signing up, searching, or logging in. A form contains input fields, labels, and buttons.

html

<h2>Contact Me</h2>
<form action="submit_form.php" method="post">
  <label for="name">Full Name:</label>
  <input type="text" id="name" name="name" required><br><br>

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

  <label for="message">Your Message:</label><br>
  <textarea id="message" name="message" rows="4"></textarea><br><br>

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

`<form>` - wraps the form fields.
`action` - where the data goes (URL or file).
`method` - `GET` (in URL) or `POST` (hidden).
`<input>` - single-line text fields, emails, checkboxes, etc.
`<textarea>` - multi-line text area.
`<button>` - for submitting or resetting.

Mini Project Step 3: Personal Profile Page

You’ll now bring together everything you’ve learned - lists, tables, and forms - into one personal profile page. Create `profile.html` and include the following sections:

An **About Me** paragraph (from the previous lesson).
An unordered list of hobbies or skills.
A simple **schedule table** showing your study or project plan.
A **contact form** where visitors can leave their name, email, and a short message.

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Personal Profile</title>
  </head>
  <body>
    <h1>My Personal Profile</h1>

    <h2>Hobbies</h2>
    <ul>
      <li>Gaming</li>
      <li>Coding</li>
      <li>Music</li>
    </ul>

    <h2>Study Schedule</h2>
    <table border="1">
      <tr>
        <th>Day</th>
        <th>Focus</th>
      </tr>
      <tr><td>Monday</td><td>HTML Practice</td></tr>
      <tr><td>Tuesday</td><td>CSS Styling</td></tr>
      <tr><td>Wednesday</td><td>JavaScript Basics</td></tr>
    </table>

    <h2>Contact Me</h2>
    <form>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" required><br><br>

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

      <label for="message">Message:</label><br>
      <textarea id="message" name="message" rows="4"></textarea><br><br>

      <button type="submit">Send Message</button>
    </form>
  </body>
</html>

💡 Bonus Challenge: Add a drop-down (`<select>`) for how visitors heard about you, e.g., 'Friend', 'Twitter', or 'YouTube'.

MDN: HTML Forms Guide