Topic 7: Tags List

📖 10 min read · 🎯 advanced · 🧭 Prerequisites: recreate-task-external-css, sessions-login-page-logout-session-destroy-timeoutcookies-introduction-page-redirect

Why this matters

Up until now, you've probably used the same handful of HTML tags — <div>, <p>, maybe <h1>. That's fine for getting started. But HTML has a whole toolbox of tags, and most beginners never discover them because they never sit down and actually use them all in one place. Today we change that. We're building an HTML Tag Explorer — one page where you type out every basic-to-intermediate HTML tag, break things, fix things, and walk away actually remembering what each one does.

What You'll Learn

Structure a complete, valid HTML document from <!DOCTYPE html> to closing </html>
Apply all six heading levels and every core text-formatting tag
Build ordered lists, unordered lists, hyperlinks, and embedded images
Construct a data table using <table>, <tr>, <th>, and <td>
Assemble a functional form with diverse <input> types, <textarea>, and <button>

The Analogy

Think of an HTML document like a well-stocked ranger's supply pack. The outer shell (<html>) is the pack itself. The <head> compartment holds maps and instructions nobody sees from the outside — metadata, charset declarations, page titles. The <body> compartment is everything strapped to the outside: the tools you actually use in the field. Every tag is a different tool — a knife (<strong>), a compass (<a>), a water container (<table>) — each shaped for a specific job. You wouldn't use a tent peg to cut rope; similarly, you wouldn't use <h1> for body-copy text. Knowing which tool does what, and reaching for it by instinct, is what separates a veteran ranger from a recruit.

Chapter 1: The Bare-Bones HTML Shell

Every expedition begins at base camp. Before any content tag can do its job, the document shell must be in place.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>HTML Tag Explorer</title>
  </head>
  <body>
    <!-- We'll fill this in step by step -->
  </body>
</html>

Key parts of the shell:

<!DOCTYPE html> — tells the browser this is HTML5, not an older dialect
<html lang="en"> — the root element; lang helps screen readers and search engines
<meta charset="UTF-8"> — ensures the browser renders characters correctly (accents, symbols, emoji)
<title> — text shown in the browser tab; also used by search engines as the page headline
<body> — everything visible on screen lives here
 — a developer note, invisible to the user; invaluable for section labels

Chapter 2: Headers and Text Formatting

HTML gives you six heading levels and a rich set of inline formatting tags to convey meaning — not just appearance.

Heading Tags `<h1>` through `<h6>`

<h1>Main Page Title (Only one per page)</h1>
<h2>Section Heading</h2>
<h3>Sub-section Heading</h3>
<h4>Group Heading</h4>
<h5>Minor Heading</h5>
<h6>Smallest Heading</h6>

<h1> carries the most weight for SEO and accessibility. Screen readers use heading hierarchy to let users jump between sections, so never skip levels for visual reasons alone.

Text Formatting Tags

Tag	Meaning	Renders as
`<p>`	Paragraph	Block of body text
`<strong>`	Strong importance	Bold
`<em>`	Emphasis	Italic
`<mark>`	Highlighted / relevant	Yellow highlight
`<small>`	Fine print	Smaller text
`<del>`	Deleted text	~~Strikethrough~~
`<ins>`	Inserted text	Underlined
`<sub>`	Subscript	H₂O
`<sup>`	Superscript	x²
`<code>`	Inline code	`monospace`
`<pre>`	Preformatted block	Preserves whitespace
`<blockquote>`	Long quotation	Indented block
`<abbr>`	Abbreviation	Dotted underline + tooltip
`<br>`	Line break	Forces new line
`<hr>`	Horizontal rule	Thematic divider

<p>
  Water is written as <strong>H<sub>2</sub>O</strong>.
  Einstein's famous equation is E = mc<sup>2</sup>.
</p>
<p>
  Use <mark>highlighted text</mark> to draw attention to key points.
  <del>Old price: $99</del> — <ins>New price: $79</ins>
</p>
<p>
  The <abbr title="HyperText Markup Language">HTML</abbr> spec is maintained by WHATWG.
</p>
<blockquote>
  "Any sufficiently advanced technology is indistinguishable from magic." — Arthur C. Clarke
</blockquote>
<pre><code>
function greet(name) {
  return "Hello, " + name;
}
</code></pre>

Chapter 3: Lists and Links

Unordered Lists `<ul>`

Use when order does not matter — ingredients, feature bullets, navigation items.

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

Ordered Lists `<ol>`

Use when sequence matters — steps, rankings, instructions.

<ol>
  <li>Open your code editor</li>
  <li>Create index.html</li>
  <li>Write your first tag</li>
</ol>

Definition Lists `<dl>`

Used for term–description pairs, glossaries, metadata.

<dl>
  <dt>HTML</dt>
  <dd>The skeleton of a webpage — structure and content.</dd>
  <dt>CSS</dt>
  <dd>The wardrobe — colors, fonts, layout.</dd>
</dl>

Nested Lists

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Backend
    <ol>
      <li>PHP</li>
      <li>Node.js</li>
    </ol>
  </li>
</ul>

Hyperlinks `<a>`

<!-- External link, opens in new tab -->
<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">
  MDN Web Docs
</a>

<!-- Internal link -->
<a href="/about.html">About Us</a>

<!-- Jump to a section on the same page -->
<a href="#contact">Jump to Contact</a>
<section id="contact">...</section>

<!-- Email link -->
<a href="mailto:hello@example.dev">Email the Council</a>

<!-- Phone link -->
<a href="tel:+911234567890">Call HQ</a>

Key attributes: href (destination), target (_blank opens new tab), rel="noopener noreferrer" (security when using target="_blank"), download (triggers file download).

Images `<img>`

<img> is a self-closing (void) tag — it has no closing counterpart.

<!-- Basic image -->
<img src="logo.png" alt="Vizag Council Logo" width="200" height="80">

<!-- Image with title tooltip -->
<img src="map.jpg" alt="City map" title="Vizag district map">

<!-- Linked image -->
<a href="gallery.html">
  <img src="thumbnail.jpg" alt="Gallery preview">
</a>

alt is not optional for meaningful images — it is read aloud by screen readers and displayed when the image fails to load.

Chapter 4: Tables

Tables organize relational data into rows and columns. They are for data — never for page layout.

<table border="1">
  <caption>Council Member Roster</caption>
  <thead>
    <tr>
      <th>Instructor</th>
      <th>Specialty</th>
      <th>Topics Taught</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>the trainer</td>
      <td>Big Picture</td>
      <td>12</td>
    </tr>
    <tr>
      <td>the trainer</td>
      <td>Networking</td>
      <td>9</td>
    </tr>
    <tr>
      <td>the trainer</td>
      <td>Language Rules</td>
      <td>7</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total Topics</td>
      <td>28</td>
    </tr>
  </tfoot>
</table>

Table element breakdown:

<table> — the container
<caption> — accessible label for the table (appears above it)
<thead> — groups header rows; browsers keep this visible when scrolling long tables
<tbody> — groups data rows
<tfoot> — groups summary/footer rows
<tr> — a table row
<th> — a header cell (bold + centered by default; scope="col" or scope="row" improves accessibility)
<td> — a data cell
colspan — cell spans multiple columns
rowspan — cell spans multiple rows

<!-- rowspan and colspan example -->
<table border="1">
  <tr>
    <th colspan="3">Quarterly Report</th>
  </tr>
  <tr>
    <td rowspan="2">Q1</td>
    <td>January</td>
    <td>$4,200</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$3,800</td>
  </tr>
</table>

Chapter 5: Basic Forms

Forms are how users send data back to the server. A <form> groups controls; <input>, <textarea>, and <button> are the controls.

<form action="/submit" method="POST">

  <!-- Text input -->
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" placeholder="Enter username" required>

  <!-- Password input -->
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>

  <!-- Email input (browser validates format) -->
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="you@example.com">

  <!-- Number input -->
  <label for="age">Age:</label>
  <input type="number" id="age" name="age" min="1" max="120">

  <!-- Date picker -->
  <label for="dob">Date of Birth:</label>
  <input type="date" id="dob" name="dob">

  <!-- Radio buttons -->
  <fieldset>
    <legend>Preferred Language</legend>
    <input type="radio" id="html" name="lang" value="html">
    <label for="html">HTML</label>
    <input type="radio" id="css" name="lang" value="css">
    <label for="css">CSS</label>
  </fieldset>

  <!-- Checkboxes -->
  <fieldset>
    <legend>Skills</legend>
    <input type="checkbox" id="js" name="skills" value="js">
    <label for="js">JavaScript</label>
    <input type="checkbox" id="php" name="skills" value="php">
    <label for="php">PHP</label>
  </fieldset>

  <!-- Dropdown select -->
  <label for="city">City:</label>
  <select id="city" name="city">
    <option value="">-- Choose --</option>
    <option value="example">Vizag</option>
    <option value="looptown">Looptown</option>
  </select>

  <!-- Multi-line text area -->
  <label for="bio">Bio:</label>
  <textarea id="bio" name="bio" rows="4" cols="40" placeholder="Tell us about yourself..."></textarea>

  <!-- Hidden field -->
  <input type="hidden" name="csrf_token" value="abc123xyz">

  <!-- File upload -->
  <label for="avatar">Profile Picture:</label>
  <input type="file" id="avatar" name="avatar" accept="image/*">

  <!-- Range slider -->
  <label for="skill_level">Skill Level (1–10):</label>
  <input type="range" id="skill_level" name="skill_level" min="1" max="10" value="5">

  <!-- Color picker -->
  <label for="fav_color">Favorite Color:</label>
  <input type="color" id="fav_color" name="fav_color" value="#3b82f6">

  <!-- Submit and Reset buttons -->
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
  <button type="button" onclick="alert('clicked!')">Click Me</button>

</form>

Key <input> types and what they do:

`type=`	Behavior
`text`	Single-line free text
`password`	Masks characters
`email`	Validates email format
`number`	Numeric keyboard; `min`/`max`/`step`
`date`	Native date picker
`radio`	One-of-group selection
`checkbox`	Multi-select toggle
`file`	File chooser dialog
`hidden`	Invisible data (e.g., CSRF tokens)
`range`	Slider control
`color`	Color picker
`submit`	Submits form
`reset`	Resets all fields

The <label> tag bound with for matching an input's id makes the label clickable and improves accessibility for screen readers. Always pair them.

Chapter 6: Semantic and Structural Tags

Beyond content tags, HTML5 introduced semantic containers that communicate meaning to browsers, search engines, and assistive technology.

<header>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>

<main>
  <article>
    <h2>Article Title</h2>
    <p>Article content here.</p>
  </article>

  <aside>
    <h3>Related Links</h3>
    <ul>
      <li><a href="#">Resource 1</a></li>
    </ul>
  </aside>
</main>

<section id="contact">
  <h2>Contact Us</h2>
  <address>
    123 Council Lane, Vizag<br>
    <a href="mailto:council@example.dev">council@example.dev</a>
  </address>
</section>

<footer>
  <p>&copy; 2026 Vizag Council</p>
</footer>

Tag	Purpose
`<header>`	Page or section header
`<nav>`	Navigation links
`<main>`	Primary content (one per page)
`<article>`	Self-contained piece (blog post, card)
`<section>`	Thematic grouping with a heading
`<aside>`	Tangentially related content
`<footer>`	Page or section footer
`<address>`	Contact information
`<figure>`	Self-contained media (image, chart)
`<figcaption>`	Caption for a `<figure>`
`<time>`	Machine-readable date/time
`<details>`	Expandable disclosure widget
`<summary>`	Visible label for `<details>`
`<div>`	Generic block container (no semantic meaning)
`<span>`	Generic inline container (no semantic meaning)

Chapter 7: Putting It Together — The HTML Tag Explorer

Here is the full "HTML Tag Explorer" page, combining all groups above into one document:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Tag Explorer</title>
  <style>
    body { font-family: sans-serif; max-width: 900px; margin: 2rem auto; padding: 0 1rem; }
    section { margin-bottom: 2rem; border-left: 4px solid #3b82f6; padding-left: 1rem; }
    table { border-collapse: collapse; width: 100%; }
    th, td { border: 1px solid #ccc; padding: 0.5rem; text-align: left; }
    th { background: #f0f4ff; }
    input, select, textarea { display: block; margin: 0.4rem 0 0.8rem; padding: 0.4rem; }
  </style>
</head>
<body>

  <header>
    <h1>HTML Tag Explorer</h1>
    <nav>
      <a href="#headings">Headings</a> |
      <a href="#formatting">Formatting</a> |
      <a href="#lists">Lists</a> |
      <a href="#links">Links</a> |
      <a href="#tables">Tables</a> |
      <a href="#forms">Forms</a>
    </nav>
  </header>

  <main>

    <!-- SECTION 1: Headings -->
    <section id="headings">
      <h2>1. Heading Tags</h2>
      <h1>h1 — Page Title</h1>
      <h2>h2 — Section</h2>
      <h3>h3 — Subsection</h3>
      <h4>h4 — Group</h4>
      <h5>h5 — Minor</h5>
      <h6>h6 — Smallest</h6>
    </section>

    <!-- SECTION 2: Text Formatting -->
    <section id="formatting">
      <h2>2. Text Formatting</h2>
      <p>This is a <strong>strong</strong>, <em>emphasized</em>, <mark>marked</mark> paragraph.</p>
      <p><del>Old price $99</del> — <ins>New price $79</ins></p>
      <p>H<sub>2</sub>O and E=mc<sup>2</sup></p>
      <p><small>Fine print: terms apply.</small></p>
      <p>Inline code: <code>console.log("hello")</code></p>
      <blockquote>"First, solve the problem. Then, write the code." — John Johnson</blockquote>
      <hr>
      <pre><code>function add(a, b) {
  return a + b;
}</code></pre>
    </section>

    <!-- SECTION 3: Lists -->
    <section id="lists">
      <h2>3. Lists</h2>
      <h3>Unordered List</h3>
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
      </ul>
      <h3>Ordered List</h3>
      <ol>
        <li>Open editor</li>
        <li>Write HTML</li>
        <li>Open in browser</li>
      </ol>
      <h3>Definition List</h3>
      <dl>
        <dt>HTML</dt>
        <dd>Structure of a web page.</dd>
        <dt>CSS</dt>
        <dd>Visual styling of a web page.</dd>
      </dl>
    </section>

    <!-- SECTION 4: Links and Images -->
    <section id="links">
      <h2>4. Links and Images</h2>
      <a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">MDN Docs</a>
      <br><br>
      <img src="https://via.placeholder.com/300x100" alt="Placeholder image" width="300" height="100">
      <figure>
        <img src="https://via.placeholder.com/200x120" alt="Chart placeholder">
        <figcaption>Figure 1: Sample chart caption</figcaption>
      </figure>
    </section>

    <!-- SECTION 5: Tables -->
    <section id="tables">
      <h2>5. Tables</h2>
      <table>
        <caption>Council Member Roster</caption>
        <thead>
          <tr>
            <th>Instructor</th>
            <th>Specialty</th>
            <th>Topics</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>the trainer</td>
            <td>Big Picture</td>
            <td>12</td>
          </tr>
          <tr>
            <td>the trainer</td>
            <td>Networking</td>
            <td>9</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="2">Total</td>
            <td>21</td>
          </tr>
        </tfoot>
      </table>
    </section>

    <!-- SECTION 6: Forms -->
    <section id="forms">
      <h2>6. Forms</h2>
      <form action="/submit" method="POST">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" placeholder="Your name" required>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" placeholder="you@example.com">

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

        <label for="dob">Date of Birth:</label>
        <input type="date" id="dob" name="dob">

        <fieldset>
          <legend>Skill Level</legend>
          <input type="radio" id="beginner" name="level" value="beginner">
          <label for="beginner">Beginner</label>
          <input type="radio" id="advanced" name="level" value="advanced">
          <label for="advanced">Advanced</label>
        </fieldset>

        <label for="city">City:</label>
        <select id="city" name="city">
          <option value="">-- Select --</option>
          <option value="example">Vizag</option>
        </select>

        <label for="bio">Bio:</label>
        <textarea id="bio" name="bio" rows="3" placeholder="Tell us about yourself..."></textarea>

        <label for="avatar">Profile Picture:</label>
        <input type="file" id="avatar" name="avatar" accept="image/*">

        <label for="skill_range">Skill (1-10): </label>
        <input type="range" id="skill_range" name="skill_range" min="1" max="10" value="5">

        <button type="submit">Submit</button>
        <button type="reset">Reset</button>
      </form>
    </section>

  </main>

  <footer>
    <p>&copy; 2026 Vizag Council — HTML Tag Explorer</p>
  </footer>

</body>
</html>

🧪 Try It Yourself

Task: Build your own "HTML Tag Explorer" page from scratch.

Create a new file called tag-explorer.html
Add the bare-bones shell (<!DOCTYPE html>, <html>, <head>, <body>)
Inside <body>, build six labelled <section> blocks: Headings, Text Formatting, Lists, Links & Images, Tables, and Forms
In each section, include every tag from that group — with a brief  describing what the tag does

Success criteria: Open tag-explorer.html in your browser. You should see:

Six clearly separated sections
<h1> through <h6> rendered at different sizes
At least one <ul>, one <ol>, and one <dl>
A working <a> hyperlink
An <img> with a visible alt attribute value (check via DevTools > Elements)
A table with <thead>, <tbody>, and <tfoot>
A form with at least five different <input> types, one <textarea>, and one <button>

Starter snippet — copy this into your editor and fill each section:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML Tag Explorer</title>
</head>
<body>

  <h1>HTML Tag Explorer</h1>

  <section id="headings">
    <h2>Heading Tags</h2>
    <!-- Add h1 through h6 here -->
  </section>

  <section id="formatting">
    <h2>Text Formatting</h2>
    <!-- Add p, strong, em, mark, del, ins, sub, sup, code, blockquote, hr, pre here -->
  </section>

  <section id="lists">
    <h2>Lists</h2>
    <!-- Add ul > li, ol > li, dl > dt + dd here -->
  </section>

  <section id="links">
    <h2>Links and Images</h2>
    <!-- Add a and img here -->
  </section>

  <section id="tables">
    <h2>Tables</h2>
    <!-- Add table, caption, thead, tbody, tfoot, tr, th, td here -->
  </section>

  <section id="forms">
    <h2>Forms</h2>
    <!-- Add form, label, input (text/email/number/date/radio/checkbox/file/range), select, textarea, button here -->
  </section>

</body>
</html>

🔍 Checkpoint Quiz

Q1. What is the semantic difference between <strong> and simply styling text with font-weight: bold in CSS?

A) There is no difference — both make text bold
B) <strong> signals importance to screen readers and search engines; the CSS rule is purely visual
C) <strong> is deprecated in HTML5
D) CSS font-weight: bold also conveys semantic importance

Q2. What does this table code produce?

<table>
  <tr>
    <td colspan="2">Merged Cell</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
</table>

A) A syntax error — colspan is not a valid attribute
B) Row 1 has one cell spanning two columns; row 2 has two separate cells
C) Row 1 has two cells, each labelled "Merged Cell"
D) Row 1 is hidden; only row 2 renders

Q3. You have a form with <input type="email">. A user types notanemail. What happens when they submit?

A) The value is sent to the server as-is
B) The browser displays a native validation error and blocks form submission
C) The input field is cleared automatically
D) JavaScript throws a TypeError

Q4. You want an image to be a clickable link. Which code is correct?

A) <img src="photo.jpg" href="/gallery">
B) <a href="/gallery"><img src="photo.jpg" alt="Gallery"></a>
C) <link href="/gallery"><img src="photo.jpg"></link>
D) <img src="photo.jpg" link="/gallery">

A1. B — <strong> carries semantic weight that assistive technologies and search engines act on; CSS bold is visual-only and conveys no meaning to non-visual consumers.

A2. B — colspan="2" makes the first row's single <td> span both column positions, visually merging them. Row 2 then fills those same two columns with separate cells A and B.

A3. B — type="email" activates the browser's built-in constraint validation. The browser surfaces a tooltip error ("Please include an '@' in the email address") and prevents the form from submitting until the value passes the format check.

A4. B — The <a> tag wraps the <img> tag. The entire image becomes a clickable hyperlink. href belongs on <a>, not on <img>.

🪞 Recap

A valid HTML document always starts with <!DOCTYPE html> and wraps all content in <html>, <head>, and <body>.
Heading tags <h1>–<h6> create a document outline; text formatting tags like <strong>, <em>, and <mark> add semantic meaning, not just visual style.
Lists come in three flavors: unordered <ul>, ordered <ol>, and definition <dl> — each suited to a different data shape.
Tables use a five-layer structure (<table> → <thead>/<tbody>/<tfoot> → <tr> → <th>/<td>) and colspan/rowspan for spanning cells.
Forms pair <form> with labelled <input> controls; using the correct type= attribute activates built-in browser validation for free.

📚 Further Reading

MDN HTML Element Reference — the canonical, always-current list of every HTML tag with examples
HTML Living Standard — WHATWG — the actual specification browsers implement
W3C Markup Validation Service — paste or upload your HTML to catch errors
WebAIM: Semantic Structure — why semantic HTML matters for accessibility
⬅️ Previous: Sessions, Login Page, Logout, Cookies, Page Redirect
➡️ Next: JavaScript Events