Module 01 — Basic HTML Foundations

1. What is it?

HTML (HyperText Markup Language) is the universal markup language that defines the semantic structure, architecture, and raw content of every webpage across the World Wide Web.

To understand HTML deeply, we must distinguish between its three defining terms:

HyperText: Text that links to other pieces of information, resources, or web documents across the Internet via hyperlinks. Unlike linear text in a printed book, hypertext enables non-linear exploration.
Markup: A system of annotating text with tags (e.g., <p>, <h1>, <img>) that instruct a user agent (such as a web browser or screen reader) how to interpret the meaning and hierarchy of the content, rather than merely rendering unformatted characters.
Language: A standardized syntax governed by the WHATWG HTML Living Standard and W3C specifications, ensuring universal interoperability across diverse operating systems and browsers.

2. Why do we use it?

Without HTML, a web browser receives an unstructured stream of binary text. It would have no way of knowing whether a block of text is an article title, a navigational menu, a table of financial data, an interactive form, or an image caption.

HTML provides:

Structural Hierarchy: Establishes a predictable parent-child tree structure known as the Document Object Model (DOM).
Universal Accessibility: Enables assistive technologies (such as screen readers used by visually impaired users) to parse headings, forms, tables, and landmarks.
Search Engine Optimization (SEO): Search engine crawlers (Googlebot, Bingbot) rely on semantic HTML tags to understand page topics, content relevance, and indexing signals.
Separation of Concerns: HTML handles Meaning & Structure, while CSS handles Presentation & Styling, and JavaScript handles Interactivity & State.

3. Simple Explanation

Imagine building a modern residential house:

HTML is the Concrete Foundation, Brick Walls, and Structural Framing: It defines where the front door is, where rooms begin and end, and where the windows are situated. Without bricks and concrete, you have no building.
CSS is the Interior Design, Wall Paint, Lighting, and Furniture: It makes the house beautiful, determines color schemes, and controls spatial proportions.
JavaScript is the Electrical Wiring, Plumbing, and Smart Automation: It makes the house functional, opening the automated garage door when you press a remote, or turning on lights when motion is detected.

You can live in a house made of bare brick walls (raw HTML), but you cannot paint walls or install smart switches if the physical walls do not exist.

4. Technical Explanation & Browser Rendering Pipeline

When you type a URL into your browser (e.g., https://example.com) and hit Enter, a multi-step sequence occurs:

[ DNS Lookup ] ──► [ TCP Handshake & TLS ] ──► [ HTTP GET Request ]
                                                        │
                                                        ▼
                                                [ 200 OK HTML Stream ]

Once raw HTML bytes arrive at the browser engine (such as Google Chromium's Blink, Apple WebKit, or Mozilla Gecko), the Critical Rendering Path initiates:

Raw Bytes (e.g., 3C 68 74 6D 6C...)
       │
       ▼
Character Stream (UTF-8 Decoding)
       │
       ▼
Tokenization (<html>, <head>, <body>, <p> start/end tokens)
       │
       ▼
Node Creation (C++ Objects representing HTML elements)
       │
       ▼
DOM Tree Construction ──────────┐
                                │
CSSOM Tree Construction ────────┼──► [ Render Tree ] ──► [ Layout (Reflow) ] ──► [ Painting ] ──► [ Compositing ]

Key Stages:

Tokenization: The browser breaks characters into tokens representing opening tags, closing tags, attribute names, and attribute values.
DOM Construction: Tokens are converted into Node objects in memory, linked together into a tree based on their nested relationships.
Render Tree: The DOM and the CSSOM (CSS Object Model) merge into the Render Tree, containing only visible elements.
Layout (Reflow): The browser computes the exact geometric coordinates and pixel dimensions for every element on the screen.
Painting & Compositing: Pixels are drawn to memory layers and composited onto the user's display hardware.

5. Syntax & Anatomy of an HTML Element

An HTML element typically consists of a start tag, optional attributes, the content, and an end tag:

<tagname attribute="value">Content goes here</tagname>

┌──────────────────────────────────────────────────────────────┐
│                         HTML ELEMENT                         │
├────────────────────────────────┬───────────────┬─────────────┤
│           START TAG            │    CONTENT    │   END TAG   │
├─────────┬──────────────────────┤               ├─────────────┤
│ <button │ class="primary-btn"> │ Click Here    │ </button>   │
└─────────┴──────────────────────┴───────────────┴─────────────┘
  ▲         ▲             ▲
  │         │             └─ Attribute Value (enclosed in double quotes)
  │         └─ Attribute Name
  └─ Tag Name

Element Classifications:

Container Elements (Paired Tags): Have opening and closing tags with text or other nested elements inside (e.g., <p>Text</p>, <div>...</div>, <button>Submit</button>).
Void / Self-Closing Elements: Cannot contain child nodes or closing tags in HTML5 (e.g., <img>, <input>, <br>, <hr>, <meta>, <link>). In HTML5, writing <img src="..." /> with a trailing slash is optional and treated identically to <img src="...">.
Block-level Elements: By default, start on a new line and stretch to occupy the full available width of their parent container (e.g., <div>, <h1>–<h6>, <p>, <ul>, <section>).
Inline Elements: Flow within surrounding text, do not start on a new line, and only occupy the width required by their content (e.g., <span>, <a>, <strong>, <em>, <code>).

6. Basic Example: Standard HTML5 Document Skeleton

Every production HTML document must begin with the standard HTML5 doctype declaration and basic metadata wrapper:

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Developer Portfolio — Alex Morgan</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <nav>
      <a href="#about">About</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main>
    <h1>Alex Morgan — Frontend Software Engineer</h1>
    <p>Building high-performance, accessible web applications.</p>
  </main>

  <footer>
    <p>&copy; 2026 Alex Morgan. All rights reserved.</p>
  </footer>
</body>
</html>

7. Step-by-Step Walkthrough

Let us deconstruct each mandatory line of the standard skeleton:

<!DOCTYPE html>:
- Purpose: Informs the browser that this document must be parsed using modern HTML5 Standards Mode.
- Why it matters: If omitted, browsers drop into Quirks Mode (backwards compatibility for 1990s Netscape Navigator and Internet Explorer 5), causing inconsistent box model calculations and broken CSS layouts.
<html lang="en">:
- Purpose: The root container for all HTML content on the page.
- The lang attribute: Informs search engines and screen readers of the primary language. Screen readers use this to switch voice synthesizers and phonetic pronunciations.
<head>:
- Purpose: Contains machine-readable metadata that is not directly rendered in the visible viewport (character encoding, title, viewport, external styles, scripts, fonts).
<meta charset="UTF-8">:
- Purpose: Declares the character encoding standard. UTF-8 covers almost all characters, symbols, emojis, and alphabets across every human language.
<meta name="viewport" content="width=device-width, initial-scale=1.0">:
- Purpose: Essential for responsive mobile design. It instructs mobile browsers to set the viewport width equal to the physical device screen width (width=device-width) at a 1:1 scale without artificial zoom-out (initial-scale=1.0).
<title>:
- Purpose: Defines the browser tab title, bookmark title, and primary headline in Google Search results.
<body>:
- Purpose: The visible document canvas containing all rendered headings, text, media, navigation, and application interfaces.

8. Visual / Mental Model: The HTML Document Tree (DOM)

The browser parses nested HTML tags into a strict hierarchical tree:

                           Document
                              │
                           <html>
                              │
               ┌──────────────┴──────────────┐
               │                             │
            <head>                        <body>
               │                             │
        ┌──────┴──────┐               ┌──────┴──────┐
        │             │               │             │
     <meta>        <title>        <header>        <main>
                      │               │             │
                   "Title"          <nav>          <h1>
                                      │             │
                                     <a>         "Heading"

9. Comprehensive Core HTML Features

A. Text & Formatting Semantics

Never use tags purely for visual bolding or italicization; use tags that communicate true semantic intent:

<h1> to <h6>: Headings representing content hierarchy. There should be only one <h1> per page representing the primary topic.
<p>: Paragraph block.
<strong>: Indicates strong importance, seriousness, or urgency (traditionally rendered bold). Screen readers emphasize this with increased vocal weight.
<em>: Indicates stressed emphasis, altering the spoken meaning of a sentence (traditionally rendered italic).
<mark>: Highlighted text indicating relevance in a search result or reference context.
<code>, <pre>, <kbd>, <samp>: Elements for technical documentation, source code blocks, and keyboard inputs.
<blockquote> & <cite>: Long quotations with attribution citations.

html

<p>
  To install dependencies, run <kbd>npm install</kbd> in your terminal.
  Ensure that <strong>Node.js 20+</strong> is already installed.
</p>

B. Hyperlinks (`<a>`)

Hyperlinks connect documents across the Internet using the href (Hypertext REFerence) attribute:

html

<!-- External Absolute URL with security attributes -->
<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">
  MDN Web Docs (opens new window)
</a>

<!-- Internal Relative Page Link -->
<a href="/about.html">About Our Team</a>

<!-- In-Page Fragment Anchor -->
<a href="#pricing-table">Jump to Pricing</a>

<!-- Protocol Links -->
<a href="mailto:support@example.com">Email Support</a>
<a href="tel:+18005550199">Call Us Directly</a>

WARNING

Whenever using target="_blank", always append rel="noopener noreferrer". Without noopener, the newly opened page gains access to the originating tab via window.opener, creating a severe security vulnerability known as Reverse Tabnabbing.

C. Images & Figures (`<img>`, `<figure>`)

Images are void elements embedded using the src and alt attributes:

html

<figure>
  <img 
    src="/images/system-architecture.webp" 
    alt="Detailed architectural diagram showing browser client, API gateway, and microservice database clusters" 
    width="800" 
    height="450"
    loading="lazy"
  >
  <figcaption>Figure 1.1 — High-level distributed system architecture.</figcaption>
</figure>

The alt Rule:
- Informational images MUST have descriptive alt text explaining what the image shows.
- Purely decorative images (background flourishes, divider lines) should have an empty alt string (alt="") so screen readers skip them instead of announcing file names.
Layout Shift Prevention: Always declare explicit width and height integer attributes. Modern browsers calculate the aspect ratio before image downloading completes, preventing disruptive Cumulative Layout Shift (CLS).

D. Semantic Lists

Unordered List (<ul>): Items where sequence does not matter (bullet points).
Ordered List (<ol>): Step-by-step sequences, tutorials, or ranked rankings where numerical position matters.
Description List (<dl>, <dt>, <dd>): Glossary term-definition pairs or key-value metadata.

html

<!-- Description List for System Metadata -->
<dl>
  <dt>Status Code</dt>
  <dd>200 OK — Request succeeded.</dd>
  <dt>Payload Format</dt>
  <dd>application/json</dd>
</dl>

E. Accessible Data Tables

Tables should strictly be used for tabular data (such as financial statements, comparison matrices, schedules), never for page layout styling.

html

<table>
  <caption>Quarterly Infrastructure Cost Breakdown (USD)</caption>
  <thead>
    <tr>
      <th scope="col">Region</th>
      <th scope="col">Compute (EC2)</th>
      <th scope="col">Storage (S3)</th>
      <th scope="col">Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">US-East (N. Virginia)</th>
      <td>$1,240.00</td>
      <td>$380.00</td>
      <td>$1,620.00</td>
    </tr>
    <tr>
      <th scope="row">EU-Central (Frankfurt)</th>
      <td>$1,420.00</td>
      <td>$410.00</td>
      <td>$1,830.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Consolidated Total</th>
      <td>$2,660.00</td>
      <td>$790.00</td>
      <td><strong>$3,450.00</strong></td>
    </tr>
  </tfoot>
</table>

scope="col" and scope="row": Explicitly ties headers to their respective columns or rows, enabling screen reader users to navigate complex matrices without losing contextual orientation.

F. Interactive HTML Forms

Forms are how users submit data to servers or client scripts:

html

<form action="/api/v1/subscribe" method="POST">
  <fieldset>
    <legend>Account Registration</legend>

    <!-- Explicit Label Binding with 'for' and 'id' -->
    <div class="form-group">
      <label for="user-email">Work Email Address *</label>
      <input 
        type="email" 
        id="user-email" 
        name="email" 
        placeholder="alex@company.com" 
        required 
        autocomplete="email"
      >
    </div>

    <div class="form-group">
      <label for="account-role">Primary Role</label>
      <select id="account-role" name="role">
        <option value="">-- Please Select --</option>
        <option value="frontend">Frontend Engineer</option>
        <option value="backend">Backend Engineer</option>
        <option value="fullstack">Full-Stack Architect</option>
      </select>
    </div>

    <div class="form-group">
      <input type="checkbox" id="terms-agree" name="terms" required>
      <label for="terms-agree">I agree to the Terms of Service and Privacy Policy</label>
    </div>

    <button type="submit">Complete Registration</button>
  </fieldset>
</form>

10. Common Mistakes & Gotchas

Missing <label> Associations:
- Bad: <input type="text" placeholder="Your Name">
- Fix: Always link an input to a <label for="id"> or wrap the input inside the label. Placeholder text is not an accessible replacement for a label; placeholders vanish upon typing, confusing users with cognitive impairments.
Skipping Heading Levels:
- Bad: <h1>Site Title</h1> immediately followed by <h4>Subsection</h4>.
- Fix: Headings represent an outline hierarchy (h1 → h2 → h3). Never skip levels just to achieve a smaller font size—use CSS for styling.
Div Soup (Overusing <div>):
- Bad: <div class="nav"><div class="button">Click</div></div>
- Fix: Use <nav> and <button>. A <div> carries zero semantic meaning and cannot be focused with the keyboard by default.
Using Buttons for Navigation or Links for Actions:
- <a> Rule: Navigates to a new URL, page, or anchor.
- <button> Rule: Triggers an action, script, modal, or form submission on the current page.

11. Modern Best Practices

Always Specify UTF-8: <meta charset="UTF-8"> should be within the first 1024 bytes of the document.
Semantic First: If a native HTML element exists for your use case (<button>, <dialog>, <details>, <nav>), always use it before building custom <div> widgets with JavaScript.
Responsive Viewport: Include <meta name="viewport" content="width=device-width, initial-scale=1.0"> on every page.
Clean Code Indentation: Maintain 2-space indentation for every nested level to ensure readability and maintainability across teams.

12. Accessibility, Performance & Security Notes

Accessibility: Screen reader users navigate pages by jumping across landmarks (<header>, <nav>, <main>, <footer>) and headings (h1–h6). Without semantic tags, a visually impaired user must listen to every single word sequentially.
Performance: Use loading="lazy" on below-the-fold images to save bandwidth and accelerate initial page loads.
Security: Never output untrusted user input directly into HTML without HTML-entity sanitization to prevent Cross-Site Scripting (XSS) attacks.

13. Practice Questions

Explain the difference between <main> and <section>.
Why is <!DOCTYPE html> required at the top of every modern webpage?
What is the difference between an inline element and a block-level element? Provide 3 examples of each.
How do the for attribute in <label> and the id attribute in <input> interact?
What are the accessibility implications of an image having an empty alt="" versus a missing alt attribute?

14. Mini Coding Challenge

Challenge: Build a semantic "Job Application Contact Card" featuring:

A <header> with an <h1> and a subtitle.
A <figure> with an avatar image containing explicit width, height, and alt text.
A semantic form with fields for Full Name (text, required), Email (email, required), Portfolio URL (url), and Experience Level (select dropdown).
A submit <button>.

15. Technical Interview Questions & Answers

Q1: What happens under the hood if you omit the `<!DOCTYPE html>` declaration?

Answer: When <!DOCTYPE html> is missing, modern web browsers enter Quirks Mode instead of No-Quirks (Standards) Mode. In Quirks Mode, browsers emulate legacy non-standard bugs from Internet Explorer 5 and Netscape Navigator to avoid breaking websites written in the late 1990s. Specifically, the box model calculation alters so that width includes padding and borders (pre-CSS3 box-sizing), percentage heights fail to resolve predictably, and font sizes inherit inconsistently.

Q2: Why should you avoid using `<b>` and `<i>` in favor of `<strong>` and `<em>`?

Answer: <b> and <i> are purely stylistic tags historically originating from typography (bold and italic). They communicate no semantic importance to user agents. <strong> indicates semantic importance, seriousness, or urgency, while <em> indicates stressed verbal emphasis. Screen readers alter pitch, volume, and inflection when encountering <strong> and <em>, providing equal access to non-visual users.

16. Quick Revision Checkpoints

HTML represents Structure & Meaning, not visual presentation.
Standard skeleton requires: <!DOCTYPE html>, <html lang="en">, <head>, <meta charset="UTF-8">, <meta name="viewport">, <title>, and <body>.
Every page should have exactly one <h1>.
Always use <label> with <input> for accessible form UX.
Always add rel="noopener noreferrer" when using target="_blank".

17. Next Topic & Learning Path

Proceed to Module 02 — Advanced Semantic HTML & Accessibility, where we explore complex semantic architecture, SEO metadata, native <dialog> modals, responsive <picture> multi-source switching, HTML5 constraint validation APIs, and WCAG/ARIA deep dives.

Module 01 — Basic HTML Foundations ​

1. What is it? ​

2. Why do we use it? ​

3. Simple Explanation ​

4. Technical Explanation & Browser Rendering Pipeline ​

Key Stages: ​

5. Syntax & Anatomy of an HTML Element ​

Element Classifications: ​

6. Basic Example: Standard HTML5 Document Skeleton ​

7. Step-by-Step Walkthrough ​

8. Visual / Mental Model: The HTML Document Tree (DOM) ​

9. Comprehensive Core HTML Features ​

A. Text & Formatting Semantics ​

B. Hyperlinks (<a>) ​

C. Images & Figures (<img>, <figure>) ​

D. Semantic Lists ​

E. Accessible Data Tables ​

F. Interactive HTML Forms ​

10. Common Mistakes & Gotchas ​

11. Modern Best Practices ​

12. Accessibility, Performance & Security Notes ​

13. Practice Questions ​

14. Mini Coding Challenge ​

15. Technical Interview Questions & Answers ​

Q1: What happens under the hood if you omit the <!DOCTYPE html> declaration? ​

Q2: Why should you avoid using <b> and <i> in favor of <strong> and <em>? ​

16. Quick Revision Checkpoints ​

17. Next Topic & Learning Path ​

Module 01 — Basic HTML Foundations

1. What is it?

2. Why do we use it?

3. Simple Explanation

4. Technical Explanation & Browser Rendering Pipeline

Key Stages:

5. Syntax & Anatomy of an HTML Element

Element Classifications:

6. Basic Example: Standard HTML5 Document Skeleton

7. Step-by-Step Walkthrough

8. Visual / Mental Model: The HTML Document Tree (DOM)

9. Comprehensive Core HTML Features

A. Text & Formatting Semantics

B. Hyperlinks (`<a>`)

C. Images & Figures (`<img>`, `<figure>`)

D. Semantic Lists

E. Accessible Data Tables

F. Interactive HTML Forms

10. Common Mistakes & Gotchas

11. Modern Best Practices

12. Accessibility, Performance & Security Notes

13. Practice Questions

14. Mini Coding Challenge

15. Technical Interview Questions & Answers

Q1: What happens under the hood if you omit the `<!DOCTYPE html>` declaration?

Q2: Why should you avoid using `<b>` and `<i>` in favor of `<strong>` and `<em>`?

16. Quick Revision Checkpoints

17. Next Topic & Learning Path