Topic 7: Tags List

📖 5 min read · 🎯 advanced · 🧭 Prerequisites: javascript-cookies, recreate-task-external-css

Why this matters

Here's the thing — when you're building a UI, HTML tags are your raw ingredients. A chef who doesn't know their tools will fumble in the kitchen. You'll feel the same frustration if you're staring at a blank screen, unsure which tag to reach for. In this lesson, we're doing a proper walkthrough of HTML tags — from the basic document skeleton all the way to forms and interactive elements. No frameworks, no shortcuts. Just you getting fluent with the actual building blocks of every interface you'll ever design.

What You'll Learn

How to scaffold a correct HTML document boilerplate (DOCTYPE, html, head, body)
How to use heading tags <h1>–<h6> and text-formatting tags (<p>, <strong>, <em>, <mark>)
How to build ordered and unordered lists and embed hyperlinks and images
How to construct a data table with <table>, <tr>, <th>, and <td>
How to wire together a basic form using <form>, <input>, <textarea>, and <button>

The Analogy

Think of HTML tags as every tool hanging in a professional kitchen. The <h1> is the chef's knife — used constantly, front and center. The <table> is the mandoline slicer — powerful for the right job but overkill for slicing bread. <form> is the mixing bowl: nothing gets combined and sent to the kitchen without it. A cook who has never picked up every tool will freeze the moment a recipe calls for one they've never touched. This session is your full walkthrough of the rack — pick up each tool, feel its weight, and know exactly when to reach for it.

Chapter 1: The HTML Boilerplate

Every HTML document begins with the same skeleton. Skipping or misordering these pieces causes browsers to make assumptions you don't want.

<!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>

<!DOCTYPE html> — tells the browser to use modern HTML5 parsing, not quirks mode.
<html lang="en"> — wraps the entire document; the lang attribute is required for screen readers and SEO.
<meta charset="UTF-8"> — ensures characters like é, ñ, and emoji render correctly.
<title> — sets the browser tab label and is the first thing search engines read.
<body> — everything visible to the user lives here.

Chapter 2: Headers and Text Formatting

HTML gives you six levels of headings and a suite of inline formatting tags to add semantic meaning to prose.

<h1>Main Page Title</h1>
<h2>Section Heading</h2>
<h3>Subsection</h3>
<h4>Sub-subsection</h4>
<h5>Minor Heading</h5>
<h6>Smallest Heading</h6>

<p>This is a paragraph. HTML is the <strong>backbone</strong> of every webpage.</p>
<p>Use <em>emphasis</em> for stylistic italics and <mark>mark</mark> to highlight key terms.</p>

Tag	Meaning	Renders as
`<h1>`–`<h6>`	Heading levels 1–6	Bold block text, decreasing size
`<p>`	Paragraph	Block of text with margins
`<strong>`	Strong importance	Bold
`<em>`	Emphasis	Italic
`<mark>`	Highlighted text	Yellow background (default)

Use headings in order — never jump from <h1> to <h4>. Screen readers and search engines depend on this hierarchy.

Chapter 3: Lists and Links

Lists and hyperlinks are the connective tissue of the web — navigation menus, article bullets, and resource sections all depend on them.

Unordered list

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

Ordered list

<ol>
  <li>Open the editor</li>
  <li>Write the boilerplate</li>
  <li>Add your content tags</li>
</ol>

Hyperlinks and images

<a href="https://developer.mozilla.org" target="_blank">MDN Web Docs</a>

<img src="example-skyline.png" alt="The Vizag skyline at dusk" width="600">

<a href="..."> — navigates to a URL; target="_blank" opens in a new tab.
<img src="..."> — embeds an image; alt is mandatory for accessibility and SEO. <img> is a void element — no closing tag.

Chapter 4: Tables

Tables organise tabular data — think schedules, pricing grids, or comparison charts. Never use tables for page layout; that is a job for CSS Grid or Flexbox.

<table>
  <tr>
    <th>Tag</th>
    <th>Category</th>
    <th>Purpose</th>
  </tr>
  <tr>
    <td>&lt;p&gt;</td>
    <td>Text</td>
    <td>Paragraph block</td>
  </tr>
  <tr>
    <td>&lt;ul&gt;</td>
    <td>List</td>
    <td>Unordered list container</td>
  </tr>
  <tr>
    <td>&lt;form&gt;</td>
    <td>Form</td>
    <td>Interactive data collection</td>
  </tr>
</table>

<table> — the outer container.
<tr> — table row.
<th> — header cell (bold + centred by default); conveys column/row meaning to screen readers.
<td> — standard data cell.

Chapter 5: Basic Forms

Forms are how users send data back to a server — logins, search boxes, contact submissions. A form without a <button> of type submit goes nowhere.

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

  <label for="username">Username</label>
  <input type="text" id="username" name="username" placeholder="Enter your name">

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

  <label for="password">Password</label>
  <input type="password" id="password" name="password">

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

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

  <button type="submit">Join Vizag</button>

</form>

Key <input> types used above:

`type` value	What it collects	Browser behaviour
`text`	Free-form single-line text	Plain text field
`email`	Email address	Validates `@` on submit
`password`	Secret string	Masks characters
`number`	Numeric value	Spin buttons, `min`/`max` enforcement

<textarea> differs from <input> in that it has an explicit closing tag and its default content sits between the tags, not in a value attribute.

Chapter 6: Putting It Together — The HTML Tag Explorer

Combine every section above into one page so each tag group can be seen in context:

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

    <h1>HTML Tag Explorer</h1>
    <p>A living reference built by the class of Vizag.</p>

    <!-- TEXT FORMATTING -->
    <h2>Text Formatting</h2>
    <p><strong>Strong</strong>, <em>emphasis</em>, and <mark>highlighted</mark> text.</p>

    <!-- LISTS -->
    <h2>Lists</h2>
    <h3>Unordered</h3>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>

    <h3>Ordered</h3>
    <ol>
      <li>Open the editor</li>
      <li>Write the boilerplate</li>
      <li>Add your content tags</li>
    </ol>

    <!-- LINKS & IMAGES -->
    <h2>Links and Images</h2>
    <a href="https://developer.mozilla.org" target="_blank">MDN Web Docs</a>
    <br>
    <img src="example-skyline.png" alt="The Vizag skyline at dusk" width="400">

    <!-- TABLE -->
    <h2>Table</h2>
    <table border="1">
      <tr>
        <th>Tag</th>
        <th>Category</th>
        <th>Purpose</th>
      </tr>
      <tr>
        <td>&lt;p&gt;</td>
        <td>Text</td>
        <td>Paragraph block</td>
      </tr>
      <tr>
        <td>&lt;ul&gt;</td>
        <td>List</td>
        <td>Unordered list container</td>
      </tr>
    </table>

    <!-- FORM -->
    <h2>Form</h2>
    <form action="/submit" method="POST">
      <label for="username">Username</label><br>
      <input type="text" id="username" name="username" placeholder="Enter your name"><br>

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

      <label for="bio">Bio</label><br>
      <textarea id="bio" name="bio" rows="4" cols="40"></textarea><br>

      <button type="submit">Join Vizag</button>
    </form>

  </body>
</html>

🧪 Try It Yourself

Task: Build your own "HTML Tag Explorer" page from scratch — no copy-paste of the final block above.

Create a new file called tag-explorer.html.
Write the boilerplate from memory.
Add one section (<h2> + content) for each of these tag groups: headings, text formatting, lists, links + image, table, form.
Inside each section, add an HTML comment () that describes what the tag group does in one sentence.

Success criterion: Open tag-explorer.html in a browser. You should see six distinct sections, a clickable link, an image (use any placeholder URL), a rendered table with at least two rows, and a form with a submit button that reloads or navigates on click.

Starter snippet (just the boilerplate — build the rest yourself):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My Tag Explorer</title>
  </head>
  <body>
    <!-- your sections go here -->
  </body>
</html>

🔍 Checkpoint Quiz

Q1. Why must <!DOCTYPE html> appear as the very first line of an HTML file?

A) It imports the HTML specification from the W3C servers
B) It tells the browser to parse the document in standards (HTML5) mode, not quirks mode
C) It is required only when using CSS frameworks
D) It defines the document's character encoding

Q2. Given this snippet, what will the browser display?

<p>Vizag is <strong>thriving</strong> and <em>growing</em>.</p>

A) "Vizag is thriving and growing." — all in normal weight and style
B) "Vizag is thriving and growing." — "thriving" bold, "growing" italic
C) "Vizag is thriving and growing." — "thriving" italic, "growing" bold
D) A syntax error because <strong> and <em> cannot be nested inside <p>

Q3. A fellow students writes this table row:

<tr>
  <td>Name</td>
  <td>Role</td>
</tr>

They want the first row to be a header row that screen readers announce as column headings. What is the minimal fix?

A) Change <tr> to <thead>
B) Change both <td> elements to <th>
C) Add scope="col" to the <tr>
D) Wrap the row in a <caption> tag

Q4. You need a form field that collects a user's age and should only accept numbers between 1 and 120. Which tag and attributes achieve this?

A) <input type="text" name="age">
B) <input type="number" name="age" min="1" max="120">
C) <textarea name="age" min="1" max="120"></textarea>
D) <input type="range" name="age">

A1. B — <!DOCTYPE html> switches the browser into standards mode. Without it many browsers fall back to quirks mode, where layout rules differ unpredictably from the HTML5 specification.

A2. B — <strong> renders as bold by default; <em> renders as italic. Both are inline elements and nest cleanly inside a <p>.

A3. B — Replacing <td> with <th> marks those cells as header cells. Screen readers will announce them as column labels. Adding scope="col" is best practice but the minimal fix is the tag change itself.

A4. B — type="number" enables numeric input; min and max enforce the valid range both in the browser UI (spin arrows stop at the boundaries) and on form validation before submission.

🪞 Recap

Every HTML document needs the <!DOCTYPE html> declaration, <html lang>, <head> with <meta charset> and <title>, and a <body>.
Heading tags <h1>–<h6> must be used in order; inline tags like <strong>, <em>, and <mark> add semantic weight to text.
<ul> / <ol> with <li> children handle lists; <a> and <img> connect and embed external content.
Tables (<table>, <tr>, <th>, <td>) organise data — never page layout.
Forms (<form>, <input>, <textarea>, <button>) are the mechanism through which users communicate back to a server.

📚 Further Reading

MDN HTML element reference — the complete authoritative list of every HTML element and its attributes
HTML Living Standard — WHATWG — the canonical specification that browsers actually implement
web.dev: Learn HTML — Google's structured HTML course with interactive examples
⬅️ Previous: Recreate Task External CSS
➡️ Next: JavaScript Events

Topic 7 : Tags List