Topic 1: Tags, Introduction to Tables

📖 11 min read · 🎯 beginner · 🧭 Prerequisites: introduction-to-php-and-mysql, introduction-to-phpmyadmin

Why this matters

Here's the thing — every webpage you've ever visited, no matter how fancy it looks, is built from small labels called tags. Open any website, right-click, hit "Inspect" — you'll see angle brackets everywhere. That's HTML. Today we're going to meet those building blocks for the first time. We'll also look at one of the most useful tools HTML gives you: the table element. Tables let you display data in neat rows and columns — the kind of thing you see in price lists, schedules, and comparison charts all over the web.

What You'll Learn

• What an HTML tag is and how browsers interpret tags
• The most common everyday tags: <h1>–<h6>, <p>, <img>, and <a>
• How to structure tabular data using <table>, <tr>, <td>, and <th>
• How to build a complete, working HTML table from scratch

The Analogy

Think of a website as a house under construction. Every house needs different kinds of building materials — bricks for walls, glass for windows, a door frame for the entrance. HTML tags are those materials: each one tells the browser exactly what kind of structural piece it is looking at. A <p> tag is a wall panel — plain and load-bearing. An <h1> tag is the grand front door, the first thing a visitor notices. An <img> tag is a window that lets you see something outside the text. And a <table> is a shelving unit: without it, your data is a pile of action figures on the floor; with it, every figure stands in its labeled slot, easy to find at a glance.

Chapter 1: What Is an HTML Tag?

A tag is a label you wrap around content to tell the browser how to interpret it. Tags are written with angle brackets and most come in an opening/closing pair.

<p>This is a paragraph.</p>

• The opening tag (<p>) signals the start of the element.
• The closing tag (</p>) signals the end — notice the forward slash.
• Everything between them is the content the browser renders.

The browser reads your tags top-to-bottom and renders each element according to its type. Get the tags right, and the browser builds exactly the house you designed.

Self-closing tags

Some tags carry no text content and close themselves. The image tag is the classic example:

<img src="hero.jpg" alt="A hero image" />

There is no </img> — the tag is complete on its own.

Chapter 2: Common Everyday Tags

the trainer pointed to the blueprint's legend. "Every scout knows their equipment. Here are the tags you will use on almost every page you ever build."

Heading tags — <h1> through <h6>

Headings create a visual and semantic hierarchy. <h1> is the largest and most important; <h6> is the smallest.

<h1>Main Page Title</h1>
<h2>Section Heading</h2>
<h3>Sub-section Heading</h3>
<h4>Smaller Sub-heading</h4>
<h5>Fine-print Header</h5>
<h6>Footnote-level Header</h6>

Use <h1> once per page for the primary title. Use <h2>–<h6> to organize content into logical sub-sections — like chapter headings in a document.

Paragraph tag — <p>

The workhorse of body text. Every block of prose lives inside a <p>.

<p>Welcome to Vizag, where every line of code shapes the city.</p>

The browser automatically adds vertical space above and below a paragraph.

Image tag — <img>

Displays an image on the page. Two attributes are required:

• src — the path or URL of the image file
• alt — a text description used by screen readers and shown when the image fails to load

<img src="example-skyline.png" alt="The Vizag skyline at night" />

Anchor tag — <a>

Creates a hyperlink — the door that lets visitors move to another page or website.

<a href="https://example.com">Visit Example</a>

The href attribute holds the destination URL. The text between the tags is what the user sees and clicks.

<a href="contact.html">Contact the Council</a>

You can link to external sites (full URL) or internal pages (relative path).

Chapter 3: Introduction to Tables

the trainer slid a second blueprint onto the table — a grid of rows and columns, every cell labeled. "When data has structure — scores, prices, timetables, product specs — a table is the right tool. Scatter that same data inside paragraphs and nobody can scan it."

Why use a table?

Tables are ideal for structured, relational data: things where rows represent records and columns represent attributes. Examples:

• Game leaderboards (player name, score, rank)
• Product listings (name, price, stock)
• Class timetables (day, time, subject)
• Comparison charts (feature, Plan A, Plan B)

Do not use tables for page layout — that job belongs to CSS and <div> elements. Tables are for data.

The four core table tags

Think of <table> as the shelving unit, each <tr> as one shelf, and each <td> or <th> as an individual slot on that shelf.

Chapter 4: Building Your First Table

Let's put the four tags together. the trainer's example uses an action-figure inventory — a classic data-in-rows scenario.

<table>
  <tr>
    <th>Name</th>
    <th>Superpower</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>SuperCoder</td>
    <td>Infinite Loops</td>
    <td>$19.99</td>
  </tr>
  <tr>
    <td>BugSmasher</td>
    <td>Debugging Vision</td>
    <td>$24.99</td>
  </tr>
</table>

What the browser renders:

Walk through the structure:

1. <table> opens the container.
2. The first <tr> holds three <th> cells — these are the column labels. Browsers bold them and center them by default.
3. Each subsequent <tr> holds three <td> cells — one for each column in that row.
4. </table> closes the container.

The number of <td> cells in every data row should match the number of <th> cells in the header row. Mismatches produce ragged, broken-looking tables.

graph TD
    T[table] --> TR1[tr — header row]
    T --> TR2[tr — data row 1]
    T --> TR3[tr — data row 2]
    TR1 --> TH1[th: Name]
    TR1 --> TH2[th: Superpower]
    TR1 --> TH3[th: Price]
    TR2 --> TD1[td: SuperCoder]
    TR2 --> TD2[td: Infinite Loops]
    TR2 --> TD3[td: $19.99]
    TR3 --> TD4[td: BugSmasher]
    TR3 --> TD5[td: Debugging Vision]
    TR3 --> TD6[td: $24.99]

🧪 Try It Yourself

Task: Build a table of your five favorite books or movies.

Your table must include three columns: Title, Genre, and Your Rating (out of 10).

Starter template — copy this and fill it in:

<!DOCTYPE html>
<html>
  <head>
    <title>My Favorites Table</title>
  </head>
  <body>
    <h1>My Favorite Movies</h1>

    <table>
      <tr>
        <th>Title</th>
        <th>Genre</th>
        <th>My Rating</th>
      </tr>
      <tr>
        <td><!-- your movie title --></td>
        <td><!-- genre --></td>
        <td><!-- rating out of 10 --></td>
      </tr>
      <!-- add 4 more <tr> blocks -->
    </table>
  </body>
</html>

Success criterion: Open the file in a browser. You should see a table with one bold header row and five data rows, each containing a title, genre, and rating. The <h1> heading should appear above the table.

🔍 Checkpoint Quiz

Q1. What is the main purpose of an HTML tag?

A) To style content with colors and fonts
B) To tell the browser what type of content an element is
C) To connect pages to a database
D) To run JavaScript code

Q2. Given this snippet, what does the browser display in bold and centered by default?

<table>
  <tr>
    <th>City</th>
    <th>Population</th>
  </tr>
  <tr>
    <td>Vizag</td>
    <td>42,000</td>
  </tr>
</table>

A) "Vizag" and "42,000"
B) "City" and "Population"
C) The entire table
D) Nothing — <th> has no default styling

Q3. What is wrong with the following table row?

<tr>
  <td>Product A</td>
  <td>$9.99</td>
</tr>

The header row above it has three <th> cells: Name, Price, Stock.

A) <tr> should be <row>
B) The row is missing a third <td> cell for Stock
C) <td> tags cannot be used without <th> tags in the same row
D) Nothing is wrong

Q4. You want to add a clickable link to an external documentation site inside a paragraph. Which HTML structure is correct?

A) <p><link href="https://docs.example.com">Read the docs</link></p>
B) <p><a src="https://docs.example.com">Read the docs</a></p>
C) <p><a href="https://docs.example.com">Read the docs</a></p>
D) <p><url="https://docs.example.com">Read the docs</p>

A1. B — Tags are semantic labels; the browser uses them to decide how to render each piece of content.

A2. B — <th> cells ("City" and "Population") receive bold, centered styling by default; <td> cells do not.

A3. B — The header defines three columns, so every data row needs exactly three <td> cells. A missing cell leaves the Stock column empty and breaks the table's alignment.

A4. C — The anchor tag uses href (not src) for its destination URL, and the closing tag is </a>.

🪞 Recap

• An HTML tag is a labeled wrapper that tells the browser what type of content it contains.
• <h1>–<h6> create heading hierarchy; <p> wraps paragraph text; <img> embeds images; <a> creates hyperlinks.
• A table is built from four nested tags: <table>, <tr>, <th>, and <td>.
• <th> marks header cells (column labels); <td> marks data cells; every row's cell count should match the header's column count.
• Tables are for structured, relational data — not for page layout.

📚 Further Reading

• MDN: HTML element reference — the source of truth for every HTML tag and its attributes
• MDN: The Table element — deep dive into table structure, accessibility, and styling
• HTML.com: HTML Tags List — quick visual reference for common tags grouped by category
• ⬅️ Previous: Introduction to PhpMyAdmin
• ➡️ Next: CSS Properties