🏗️ HTML5 Mastery & Semantic Architecture

HTML (HyperText Markup Language) is the ultimate foundation of the internet. It is the invisible skeleton that gives structure to every web page, React component, and Next.js application in existence.

In this module, we will start from the absolute basics of how to write an HTML tag, and scale up to professional, semantic architecture.

1️⃣ What is an HTML Element?

HTML is a Markup Language, not a programming language. It doesn't have logic, loops, or variables. Instead, it uses Tags to "mark up" text so the browser knows how to display it.

Syntax of a Tag

A basic HTML element consists of an opening tag, the content, and a closing tag:

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

<p> is the opening tag.
This is a paragraph. is the content.
</p> is the closing tag (notice the forward slash /).

Paired vs. Unpaired (Void) Tags

Most tags are paired, meaning they wrap around content like a sandwich (<h1>Heading</h1>, <button>Click Me</button>).

However, some tags are unpaired (also called void or self-closing tags). They don't wrap content because they are the content itself.

<br>: Line Break (forces text to the next line).
<hr>: Horizontal Rule (draws a visible dividing line).
<img>: Image (embeds a picture into the page).

<p>First line of text.<br>Second line of text.</p>
<hr>

HTML Attributes

Tags can also have Attributes. Attributes provide extra information about the element and are always placed inside the opening tag. They usually come in name="value" pairs.

<!-- 'href' is the attribute telling the anchor tag where to link to -->
<a href="https://google.com">Click here to search</a>

<!-- 'src' tells the image tag where to find the picture, 'alt' describes it -->
<img src="logo.png" alt="Company Logo">

2️⃣ Text Content & Flow

Headings (`<h1>` through `<h6>`)

Headings are used for titles and subtitles. <h1> is the most important, and <h6> is the least important.

The Golden Rule: You must have exactly one <h1> per page for SEO.

Block vs. Inline Elements

This is a fundamental concept in web layout:

Block Elements: Start on a new line and take up the full width (e.g., <div>, <h1>, <p>, <section>).
Inline Elements: Stay on the same line and only take as much width as their content (e.g., <span>, <a>, <strong>, <img>).

Advanced Text Formatting

Beyond just paragraphs, we can style text semantically:

<strong>: Bold text (strong importance).
<em>: Italic text (emphasis).
<u>: Underlined text.
<s>: Strikethrough text.
<sub>: Subscript (e.g., H<sub>2</sub>O).
<sup>: Superscript (e.g., E = mc<sup>2</sup>).
<mark>: Highlighted text.

<p>The <sub>water</sub> level is high. <sup>[1]</sup></p>
<p><mark>Important:</mark> JavaScript is <strong>mandatory</strong>.</p>

3️⃣ Organizing Data: Lists & Tables

Lists

Unordered List (<ul>): For bulleted items where order doesn't matter.
Ordered List (<ol>): For numbered steps where sequence is key.
Both use <li> (List Item) for each entry.

<ul>
  <li>Rice</li>
  <li>Beans</li>
</ul>

Tables

Tables represent structured, tabular data.

<table>: The wrapper.
<thead>, <tbody>, <tfoot>: Logical segments.
<tr>: Table Row.
<th>: Table Header cell (bold/centered by default).
<td>: Table Data cell.

<table>
  <thead>
    <tr>
      <th>Course</th>
      <th>Duration</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Web Foundations</td>
      <td>4 Weeks</td>
    </tr>
  </tbody>
</table>

4️⃣ The Document Skeleton

Every HTML file needs this boilerplate:

<!DOCTYPE html>  
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Website</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

The Viewport Meta Tag

This tag ensures your site looks correct on mobile devices. It scales the content to fit the screen width.

5️⃣ The Death of "Div Soup" (Semantic HTML)

Instead of using generic <div> tags everywhere, use semantic tags to describe content:

<header>: Site banner/navigation.
<nav>: Navigation links.
<main>: Central content unique to the page.
<article>: Self-contained content (blog post).
<section>: Thematic grouping.
<footer>: Copyright/links at bottom.

6️⃣ Forms & Inputs

Control Selection

Radio Buttons: Pick exactly one (e.g., Gender).
Checkboxes: Pick zero or more (e.g., Skills).
Select (Dropdown): Pick one from a long list (e.g., Country).
Textarea: For long-form text (e.g., Message).

Form Example

<form>
  <label>Username: <input type="text" required></label>
  <label>Bio: <textarea></textarea></label>
  
  <p>Pick one color:</p>
  <label><input type="radio" name="color" value="red"> Red</label>
  <label><input type="radio" name="color" value="blue"> Blue</label>

  <button type="submit">Send</button>
</form>

💡 Summary

Concept	Key Takeaway
Block vs Inline	Block stacks vertically; Inline sits horizontally side-by-side.
Formatting	Use `<sub>`, `<sup>`, `<mark>` etc. for semantic text styling.
Lists	`<ul>` for bullets, `<ol>` for numbers.
Tables	`<tr>` for rows, `<td>` for data, `<th>` for headers.
Forms	Radios are for single choices; Checkboxes for multiple.

HTML5 Mastery