← Back to the Build Your Homepage series

📄

EPISODE 04

table · thead/tbody · colspan/rowspan · accessibility · input types · label · validation · button · header · nav · main · article · section · aside · footer

Tables · Forms · Semantic HTML

Tables are for tabular data. Learn the correct structure (thead/tbody/tfoot), spans, and the small extras that make tables accessible. Forms collect user input. Learn the modern input types, the proper label-for pairing, built-in HTML validation, and the right button types. Replace generic <div> soup with semantic elements that describe meaning. Better SEO, better accessibility, easier styling.

tabletheadtbodya11ycolspanforminputlabelvalidationbuttonsemanticaccessibilitySEOlandmarks

Duration

⏱ About 1 hour + About 1.5 hours + About 1 hour

Level

📊 Beginner

Prerequisite

🎯 html-01

OUTCOME

Construct semantically correct, accessible data tables / Build a fully labelled form with client-side validation / Restructure a page using semantic landmarks that screen readers can navigate

What you'll learn

1Build tables with thead, tbody, and tfoot
2Use th with scope to label rows and columns
3Span cells with colspan and rowspan
4Caption a table with <caption>
5Pair <label for> with <input id> correctly
6Use specific input types (email, number, date, etc.)
7Constrain input with required, pattern, min/max
8Use button type=submit/reset/button intentionally
9Use <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>
10Pick <article> vs <section> correctly
11Improve SEO and accessibility without changing visual design
12Validate a semantic structure with a screen reader

Tables

Tables are for tabular data. Learn the correct structure (thead/tbody/tfoot), spans, and the small extras that make tables accessible.

1. A Basic Table

html

<table>
  <caption>2024 sales by quarter</caption>
  <thead>
    <tr>
      <th scope="col">Quarter</th>
      <th scope="col">Revenue</th>
      <th scope="col">Growth</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">Q1</th><td>$1.2M</td><td>+8%</td></tr>
    <tr><th scope="row">Q2</th><td>$1.5M</td><td>+12%</td></tr>
    <tr><th scope="row">Q3</th><td>$1.8M</td><td>+20%</td></tr>
  </tbody>
  <tfoot>
    <tr><th scope="row">Total</th><td>$4.5M</td><td>+13%</td></tr>
  </tfoot>
</table>

💡

scope="col" and scope="row" tell screen readers which header applies to which cells.

2. Spanning Cells

html

<tr>
  <td colspan="2">Spans two columns</td>
  <td>Single</td>
</tr>
<tr>
  <td rowspan="2">Spans two rows</td>
  <td>A</td>
  <td>B</td>
</tr>

3. Tables vs Layout

⚠️

Tables are for tabular data only. Never use them for page layout — use Flexbox or Grid instead.

Forms

Forms collect user input. Learn the modern input types, the proper label-for pairing, built-in HTML validation, and the right button types.

1. Form Anatomy

html

<form action="/signup" method="post">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" required minlength="2">

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

  <label for="age">Age</label>
  <input id="age" name="age" type="number" min="0" max="120">

  <button type="submit">Sign up</button>
</form>

💡

Always associate every <input> with a <label> via for/id. Clicking the label focuses the input — vital for accessibility.

2. Input Types

Type	Notes
text	Plain text
email	Validates format, shows email keyboard on mobile
number	Numeric, optional min/max/step
password	Masks the input
date / time / datetime-local	Native date pickers
tel	Phone keypad on mobile
url	Validates URL format
checkbox / radio	Multi-/single-select toggles
file	File upload (accept and multiple supported)
range	Slider
color	Color picker

3. Selects and Textareas

html

<label for="country">Country</label>
<select id="country" name="country">
  <option value="">-- choose --</option>
  <option value="us">United States</option>
  <option value="kr">South Korea</option>
</select>

<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="4" cols="40" placeholder="Tell us about yourself"></textarea>

4. Validation

html

<input type="text" required minlength="3" maxlength="20">
<input type="number" min="0" max="100" step="5">
<input type="text" pattern="[A-Za-z0-9_]+" title="Letters, digits, underscore only">

These run client-side before submit, but always re-validate on the server too.

Semantic HTML

Replace generic <div> soup with semantic elements that describe meaning. Better SEO, better accessibility, easier styling.

1. The Page Landmarks

html

<body>
  <header>
    <h1>My Blog</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Post Title</h2>
      <p>Post body...</p>
    </article>
    <aside>
      <h3>Related</h3>
      <ul><li><a href="...">Other post</a></li></ul>
    </aside>
  </main>

  <footer>
    <p>© 2024 Coding Now</p>
  </footer>
</body>

2. article vs section vs div

<article> — self-contained content that could stand alone (blog post, news item, product card)
<section> — a thematic grouping of content within an article or page
<div> — last resort, only when no semantic option fits

3. Why It Matters

Screen readers expose landmarks for fast navigation
Search engines weight headings + structure
Code stays readable as a project grows

💡

If you can read your HTML without CSS and still understand the page, your semantics are probably right.

Example code / lecture materials

All lecture materials and example code are openly available on GitHub.

View on GitHub ↗

Comments 0

No comments yet. Be the first.

Only members can comment.

Comments with ads, abuse, personal information or illegal content are hidden or removed. Comments are shown with your nickname. Privacy Policy