Chapter 5: Tables and Semantic Layout

Congratulations on reaching the final chapter of this HTML series! You have already mastered structure, links, media, and forms. To conclude, we will discuss how to display tabular data effectively and, more importantly, how to use Semantic HTML to build layouts that are professional, accessible, and search-engine friendly.

1. Displaying Data with Tables

HTML tables are intended specifically for presenting tabular data—like a schedule, a price list, or a leaderboard—not for overall page layout. A proper table is built using several specific tags:

<table>: The container for the whole table.
<tr>: Defines a table row.
<th>: Defines a table header cell (bold and centered by default).
<td>: Defines a standard table data cell.

<table>
    <tr> <th>Language</th> <th>Type</th> </tr>
    <tr> <td>Java</td> <td>OOP</td> </tr>
</table>

2. The Power of Semantic Layout

In the early days of the web, developers used nested tables to position elements. This was a nightmare for accessibility and SEO. Modern HTML5 introduces semantic tags that describe the *purpose* of different sections on your page:

<header>: Used for the top of the page, including logos and navigation.
<nav>: Used specifically for navigation links.
<main>: Contains the primary content of the document.
<section>: Represents a thematic grouping of content.
<footer>: Holds copyright information, links, and contact details.

3. Why Semantics Matter

When you use semantic tags, you are not just writing "better-looking" code; you are providing context to the browser and assistive technologies. A screen reader can jump directly to the <nav> or <main> tags, significantly improving the experience for users with visual impairments. Search engines like Google also use these tags to better understand the hierarchy and importance of the information on your page.

Common Beginner Mistakes

Tables for Layout: Never use a table to create columns or position images. Use CSS Flexbox or Grid for layout; use tables only for structured data.
Ignoring Accessibility: Skipping semantic tags makes your site invisible to many automated tools and less inclusive for all users.
Over-nesting: Keep your document hierarchy as flat as possible. If you find yourself nesting tags four or five levels deep, rethink your structure.

Your Final Project

For your final HTML project, build a "Professional Portfolio Page." Use <header> for your name, a <nav> section to link to different parts of the page, <section> tags for your "About Me," "Projects," and "Contact" areas, and a <footer>. Add a table to your "Skills" section to list your programming proficiency levels. This will combine everything you have learned into one cohesive, accessible, and semantic web document.

Building a Simple Table

Tables should only be used for tabular data — not for page layout, which is what CSS Grid and Flexbox are for.

<table>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Asha</td>
    <td>92</td>
  </tr>
</table>

Why Semantic Tags Matter

Instead of wrapping everything in generic <div> tags, HTML5 offers semantic elements like <header>, <nav>, <main>, <article>, and <footer>. These describe the meaning of the content, which helps search engines understand your page structure and improves accessibility for screen readers — both of which matter for SEO.

Previous Chapter Course Finished!