Unit I — Web Foundations

HTML Structure,
Lists & Tables

Week 02 • 231CSC601T — Web Technologies

What You'll Learn

  • Ordered, unordered & definition lists
  • HTML tables & accessibility
  • Semantic HTML5 elements
  • Document outline & heading hierarchy

"HTML is about meaning, not appearance."

"Structure your content for machines and humans alike."

Why Structure Matters

Who Reads Your HTML Structure?

Screen Readers

Blind users navigate by headings, lists, and landmarks. Proper structure = usable website.

Search Engines

Google reads structure, not styling. Semantic HTML = better SEO = more users.

The Maintenance Argument

Well-structured HTML is easier to:

  • Style — CSS selectors work predictably
  • Script — JavaScript can find elements easily
  • Maintain — Other developers understand the code
  • Debug — Problems are easier to locate

Structure vs Presentation

Wrong thinking: "I'll use a table because I want a grid layout"

Right thinking: "Is this actually tabular data? If yes, use table. If no, use CSS for layout."

HTML Lists

Three Types of Lists

Type Tag Use When
Unordered<ul>Order doesn't matter (ingredients, features)
Ordered<ol>Sequence matters (steps, rankings)
Definition<dl>Term-definition pairs (glossary, FAQ)

Unordered List

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

Renders as:

  • HTML
  • CSS
  • JavaScript

Ordered List

<ol>
    <li>Preheat oven to 180°C</li>
    <li>Mix ingredients</li>
    <li>Bake for 30 minutes</li>
</ol>

Renders as:

  1. Preheat oven to 180°C
  2. Mix ingredients
  3. Bake for 30 minutes

Definition List

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language - structure of web pages</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets - styling of web pages</dd>
</dl>

Don't use lists for:

  • Layout purposes (use CSS)
  • Indentation (use CSS margins)
  • Single items (that's not a "list")

Nested Lists

Hierarchical Content

Lists can contain other lists to show hierarchy.

<ul>
    <li>Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>Backend
        <ul>
            <li>Node.js</li>
            <li>Python</li>
            <li>Java</li>
        </ul>
    </li>
</ul>

Renders as:

  • Frontend
    • HTML
    • CSS
    • JavaScript
  • Backend
    • Node.js
    • Python
    • Java

Mixed Nesting

You can nest ordered lists inside unordered lists (and vice versa):

<ol>
    <li>Prepare ingredients
        <ul>
            <li>2 cups flour</li>
            <li>1 cup sugar</li>
            <li>3 eggs</li>
        </ul>
    </li>
    <li>Mix well</li>
    <li>Bake at 180°C</li>
</ol>

Common Mistake: The nested list must be INSIDE an <li>, not between them.

<!-- WRONG -->
<ul>
    <li>Item</li>
    <ul><li>Nested</li></ul>  <!-- Not inside li! -->
</ul>

<!-- CORRECT -->
<ul>
    <li>Item
        <ul><li>Nested</li></ul>
    </li>
</ul>

HTML Tables

Golden Rule: Tables are for tabular data only — not for page layout!

Table Structure

Tag Purpose
<table>Container for the entire table
<thead>Table header section
<tbody>Table body section
<tfoot>Table footer section
<tr>Table row
<th>Header cell (bold, centered by default)
<td>Data cell

Basic Table Example

table.html 
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Department</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Amit</td>
            <td>Engineering</td>
            <td>₹50,000</td>
        </tr>
        <tr>
            <td>Priya</td>
            <td>Design</td>
            <td>₹45,000</td>
        </tr>
    </tbody>
</table>

Spanning Rows and Columns

colspan

Cell spans multiple columns

<td colspan="2">

rowspan

Cell spans multiple rows

<td rowspan="3">

Table Accessibility

Why Accessibility Matters for Tables

Screen readers announce: "Table with 3 columns and 5 rows"

Without proper structure, blind users can't understand the data relationships.

Caption

Describes the table's purpose — visible to all users.

<table>
    <caption>Q1 2025 Sales Report</caption>
    ...
</table>

Scope Attribute

Tells screen readers whether a header applies to a row or column.

<thead>
    <tr>
        <th scope="col">Product</th>
        <th scope="col">Price</th>
        <th scope="col">Quantity</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th scope="row">Laptop</th>
        <td>₹50,000</td>
        <td>10</td>
    </tr>
</tbody>

Historical Warning

Tables for Layout (1990s-2000s)

Before CSS, developers used tables to create page layouts:

<!-- DON'T DO THIS -->
<table>
    <tr>
        <td>Logo</td>
        <td>Navigation</td>
    </tr>
    <tr>
        <td>Sidebar</td>
        <td>Main Content</td>
    </tr>
</table>

This is terrible for accessibility. Screen readers would announce this as a data table. Use CSS for layout!

When TO Use Tables

  • Spreadsheet-like data
  • Schedules and timetables
  • Comparison charts
  • Statistics and reports
  • Pricing tables (actual data comparison)

Semantic HTML5 Elements

The Problem Before HTML5

<!-- Old way - meaningless divs -->
<div id="header">...</div>
<div id="nav">...</div>
<div id="main">...</div>
<div id="sidebar">...</div>
<div id="footer">...</div>

Divs have no meaning. Browsers and screen readers can't understand the structure.

HTML5 Semantic Elements

Element Purpose Use For
<header>Introductory contentLogo, site title, main nav
<nav>Navigation linksMain menu, breadcrumbs
<main>Primary contentUnique content (only ONE per page)
<article>Self-contained contentBlog post, news story, comment
<section>Thematic groupingChapter, tab panel
<aside>Tangentially relatedSidebar, pull quotes, ads
<footer>Closing contentCopyright, contact, links
<figure>Self-contained mediaImage + caption

Typical Page Structure

structure.html 
<body>
    <header>
        <nav>...</nav>
    </header>

    <main>
        <article>
            <section>...</section>
            <section>...</section>
        </article>
        <aside>...</aside>
    </main>

    <footer>...</footer>
</body>

Video: Semantic HTML

Web Dev Simplified — Semantic HTML

Document Outline

Headings Create Structure

Headings (<h1> to <h6>) create a document outline — like a table of contents.

Wrong

<h1>My Website</h1>
<h4>About Us</h4>
<h2>Services</h2>
<h6>Contact</h6>

Skipping levels, inconsistent hierarchy

Correct

<h1>My Website</h1>
<h2>About Us</h2>
<h2>Services</h2>
<h3>Web Design</h3>
<h3>Development</h3>
<h2>Contact</h2>

Logical hierarchy, no skipped levels

Rules for Headings

  • One <h1> per page — the main title
  • Don't skip levels — go h1 → h2 → h3, not h1 → h4
  • Use for structure, not size — CSS controls appearance
  • Headings are not just "big text" — they have meaning

Why This Matters

Who How They Use Headings
Screen readersUsers jump between headings to navigate
Search enginesUnderstand page structure and topics
Browser toolsGenerate document outline
DevelopersUnderstand content organization

Test Your Structure

Try this: Read only your headings. Does it make sense as a table of contents?

If not, restructure your content.

Exercises

Exercise 1: Course Schedule Table

Create a weekly class schedule with:

  • Days as column headers
  • Time slots as row headers
  • Proper <caption>
  • scope attributes for accessibility
  • Use colspan for lunch break

Solution: examples/01-schedule.html

Exercise 2: Recipe Page

Create a recipe page with:

  • Recipe title (<h1>)
  • Ingredients (unordered list)
  • Steps (ordered list)
  • Nested lists for sub-ingredients
  • Semantic structure (article, sections)

Solution: examples/02-recipe.html

Exercise 3: Blog Article Page

Create a blog page with full semantic structure:

  • <header> with site title and nav
  • <main> with <article>
  • <aside> for related posts
  • <footer> with copyright
  • Proper heading hierarchy

Solution: examples/03-blog.html

All Examples

Open All Week 02 Examples →

Key Takeaways

Lists

  • <ul> — unordered (order doesn't matter)
  • <ol> — ordered (sequence matters)
  • <dl> — definition (term-definition pairs)
  • Lists can be nested inside <li>

Tables

  • Tables are for tabular data only
  • Use <thead>, <tbody>, <tfoot>
  • Add <caption> and scope for accessibility
  • Never use tables for page layout

Semantic HTML5

  • <header>, <nav>, <main>, <footer>
  • <article>, <section>, <aside>
  • One <main> and one <h1> per page
  • Semantic elements help accessibility and SEO

What's Next

Week 03: HTML Forms & Data Flow

Still no CSS — we're finishing HTML properly first.

Resources

Videos

Topic Video
Semantic HTMLWeb Dev Simplified
HTML TablesWeb Dev Simplified

Documentation

MDN — HTML Tables

Learn HTML Tables

MDN — Document Structure

Document Structure

Free Courses

Intro to HTML (FREE) — Frontend Masters

Practice