Building Structured Content with Lists and Tables

Three types of lists serve different purposes in HTML. Unordered collections use bullet points, while ordered sequences display numbered items. Definition lists pair terms with descriptions.

- Apples
- Bananas
- Cherries

1. Preheat oven
2. Mix ingredients
3. Bake for 30 minutes

<dl>
  <dt>FAQ</dt>
  <dd>Frequently Asked Questions</dd>
  <dt>API</dt>
  <dd>Application Programming Interface</dd>
</dl>

Tables organize data into rows and columns with semantic sections for header, body, and footer.

| Product | Price | Stock |
|---|---|---|
| Notebook | $5.99 | 120 |
| Pen Set | $12.50 | 45 |
| Last updated: August 2025 |

Creating Accessible Radio Options

Grouping radio buttons ensures mutually exclusive selection. The label element improves click targets and accessibility.

<fieldset>
  <legend>Subscription Plan</legend>
  
  <input type="radio" name="plan" value="basic" id="basic">
  <label for="basic">Basic - Free</label>
  
  <input type="radio" name="plan" value="pro" id="pro">
  <label for="pro">Pro - $9.99/month</label>
  
  <input type="radio" name="plan" value="enterprise" id="enterprise">
  <label for="enterprise">Enterprise - Custom pricing</label>
</fieldset>

Working with Images

The img element requires a source path and benefits from descriptive fallback text. Dimensions can be set directly in HTML.

![Golden retriever playing fetch in the park](photo.jpg)

![Abstract watercolor painting](https://example.com/gallery/thumbnail.png)

![Decorative banner image](broken-link.jpg)
<!-- The alt text appears when the image fails to load -->

Inline and Block-Level Containers

<div> elements stretch across the full width and start on new lines, ideal for layout sections. <span> elements flow inline within text content.

<div class="card">
  <h3>Notification</h3>
  <p>Your order has been <span class="status">shipped</span>.</p>
</div>

<div class="card">
  <h3>Reminder</h3>
  <p>Meeting at <span class="time">3:00 PM</span> today.</p>
</div>

<span class="tag">Popular</span>
<span class="tag">New</span>
<span class="tag">Sale</span>

Form Controls and User Input

HTML provides various input types for collecting different kinds of data. Dropdown menus offer predefined choices.

<form>
  <div>
    <label for="username">Username:</label>
    <input type="text" id="username" placeholder="Enter your username">
  </div>
  
  <div>
    <label for="pwd">Password:</label>
    <input type="password" id="pwd">
  </div>
  
  <div>
    <p>Account Type:</p>
    <input type="radio" name="account" value="individual" checked> Individual
    <input type="radio" name="account" value="business"> Business
  </div>
  
  <div>
    <p>Interests:</p>
    <input type="checkbox" value="sports"> Sports
    <input type="checkbox" value="music"> Music
    <input type="checkbox" value="travel"> Travel
  </div>
  
  <div>
    <label for="resume">Upload Resume:</label>
    <input type="file" id="resume">
  </div>
  
  <div>
    <label for="city">City:</label>
    <select id="city">
      <option>New York</option>
      <option>London</option>
      <option selected>Tokyo</option>
      <option>Berlin</option>
    </select>
  </div>
</form>