HTML — Content: Images, Video, Tables & Forms

C1 — Filling in the page structure with content

Lesson 15 built the structure — the linked pages and their navigation. This lesson fills that structure in, adding content directly inside the <main> section of the pages you already built.

Text, images and video

<main>
  <h2>Our Produce</h2>
  <p>Everything we sell is grown within 30 miles of our farm shop.</p>

  <img src="img_veg_box.jpg" alt="A weekly organic vegetable box">

  <video controls width="480">
    <source src="vid_welcome.mp4" type="video/mp4">
  </video>
</main>

Every meaningful image needs an alt attribute — it describes the image for screen-reader users and shows if the image fails to load.

Tables

Tables are for genuinely tabular data — rows and columns of related facts — not for laying out a page (that's CSS's job, covered in Lesson 17/18).

<table>
  <thead>
    <tr><th>Box size</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Small</td><td>£12</td></tr>
    <tr><td>Large</td><td>£20</td></tr>
  </tbody>
</table>

Forms

<form action="/submit-enquiry" method="post">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

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

  <label for="message">Message</label>
  <textarea id="message" name="message"></textarea>

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

Every input needs a <label> linked to it via matching for/id attributes — without it, a screen-reader user has no way to know what a field is for.

Task

Using the linked page structure you built in Lesson 15, add real content to each page: text and at least one image on every page, a table somewhere it's genuinely appropriate (e.g. pricing or a comparison), and a working enquiry form. Then, as an independent extension, build out your homepage in full using everything from this lesson.