🌙
☀️ Dark
PART 2

HTML

Document structure, semantic HTML, forms, accessibility, DOM.

Beginner 45 min read

Chapter Title: HTML - The Skeleton of the Web

Learning Objectives

  • Understand how browsers parse HTML into the DOM.
  • Master document structure and semantic HTML.
  • Build accessible and secure forms with proper validation.
  • Implement media, tables, and metadata for SEO foundations.
  • Adopt production-level HTML best practices.

Prerequisites

Basic understanding of how the internet works (clients, servers, and HTTP requests). No prior coding experience required.

Why Does This Exist?

When computers first started talking to each other, they needed a universal format to share documents. Plain text was too limited—it lacked structure, links, and formatting. HTML (HyperText Markup Language) was created to structure information so that any browser on any operating system could interpret and render it consistently.

The Problem Before the Solution

Before HTML, sharing rich text over a network was chaotic. Different systems used proprietary document formats (like early word processor files) that required specific software to open. If you didn't have the right program, you couldn't read the file. There was no concept of a "hyperlink" to connect related documents across different computers.

Why the Old Approach Breaks

Proprietary formats break at scale. A global network like the World Wide Web cannot rely on a single vendor's software. It requires an open standard. Without a standardized markup, automated systems (like early search engines) couldn't parse or index the world's information.

History

Tim Berners-Lee invented HTML in 1991 at CERN. It started with just 18 tags, focused entirely on structuring scientific documents. Over the decades, it evolved through HTML 2, 3, 4, XHTML, and finally HTML5 (released in 2014), which transformed HTML from a simple document format into a robust platform for complex web applications.

Mental Model (Analogy -> Reality)

Analogy: Building a house.

HTML is the concrete foundation and wooden framing of the house. It defines where the walls, doors, and rooms are. CSS is the paint and interior design. JavaScript is the electricity and plumbing that makes things work.

Reality: HTML is a tree of nodes.

You write text wrapped in angle brackets. The browser reads this text and constructs a hierarchical data structure called the Document Object Model (DOM), which represents the exact structure of your UI.

Internal Working (Memory, stack, process, network, etc.)

When a browser makes an HTTP request to a server, the server responds with an HTML file (a string of bytes). The browser's rendering engine processes this through a pipeline:

  1. Bytes to Characters: Converts raw bytes into characters based on the specified encoding (usually UTF-8).
  2. Tokens: A tokenizer scans the characters and converts them into specific tokens (e.g., StartTag, EndTag, Character).
  3. Nodes: Tokens are converted into objects ("Nodes") that possess properties and rules.
  4. DOM Tree: Nodes are linked together into a tree data structure based on the nesting of the HTML tags. This is the DOM.

Simultaneously, the browser preloads linked assets (CSS, images, scripts) to optimize performance.

Visual Explanation (ASCII diagrams)

HTML String:
<html>
  <body>
    <h1>Hello</h1>
  </body>
</html>

Browser Parsing -> DOM Tree:

       [ Document ]
            |
         [ html ]
            |
         [ body ]
            |
          [ h1 ]
            |
       "Hello" (Text Node)

Syntax

HTML consists of elements, which are typically made of a starting tag, content, and a closing tag. Tags can have attributes that provide extra information.

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

<!-- Example -->
<a href="https://example.com" class="link">Click me</a>

Tiny Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tiny HTML</title>
</head>
<body>
    <h1>Welcome to Engineering</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

Walkthrough

  1. <!DOCTYPE html>: Tells the browser to use the HTML5 standard. Without it, browsers enter "quirks mode" to support ancient websites.
  2. <html lang="en">: The root element. The lang attribute is crucial for accessibility (screen readers) and SEO.
  3. <head>: Contains metadata, title, and links to CSS/JS. It is NOT rendered on the screen.
  4. <meta charset="UTF-8">: Ensures the browser can correctly render almost any character, including emojis.
  5. <body>: Contains the actual content that the user sees on the screen.

Break It

What happens if we forget to close a tag? Or nest them incorrectly?

<p>This is a <strong>bold text</p></strong>

Result: Modern browsers are extremely forgiving. They use "error recovery" algorithms to guess what you meant and will silently fix the DOM tree. However, this is dangerous. Relying on browser error correction leads to inconsistent layouts across different browsers and terrible performance.

Debug It

To see how the browser *actually* interpreted your broken HTML, you do not look at the source file. You look at the DOM.

  1. Right-click the page in Chrome/Firefox and select "Inspect".
  2. Go to the "Elements" panel.
  3. You will see the generated DOM tree. You'll notice the browser has rearranged your broken tags into a valid tree.

Mini Project

Goal: Build a semantic user registration form.

<form action="/register" method="POST">
    <fieldset>
        <legend>User Registration</legend>

        <div>
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required minlength="3">
        </div>

        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>
        </div>

        <div>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required minlength="8">
        </div>

        <button type="submit">Register Account</button>
    </fieldset>
</form>

Key Engineering Concepts here: Proper use of <label for="..."> links the label to the input for screen readers and increases the click target area. HTML5 validation (required, minlength, type="email") provides free, native client-side validation before the form is ever submitted.

Real Application Feature

Building a semantic blog layout. Real applications don't just use <div> for everything (known as "div soup"). They use semantic tags.

<header>
    <nav>...</nav>
</header>

<main>
    <article>
        <header>
            <h1>Understanding Semantic HTML</h1>
            <time datetime="2026-08-08">August 8, 2026</time>
        </header>
        <p>Article content...</p>
    </article>
</main>

<aside>
    <h2>Related Posts</h2>
    <ul>...</ul>
</aside>

<footer>...</footer>

This structure tells search engines and assistive technologies exactly what each part of the page represents.

Production Implementation

In production, you rarely write pure static HTML files by hand. HTML is typically generated dynamically on the server (using templating engines like EJS, Jinja, or Next.js server components) or constructed on the client via JavaScript (React, Vue).

However, no matter what tool you use, the output MUST be valid, semantic HTML.

Production Usage

  • SEO Metadata: Utilizing <meta name="description"> and Open Graph tags (<meta property="og:title">) so your site looks good when shared on social media.
  • Accessibility (a11y): ARIA attributes (e.g., aria-expanded="true") are used when native HTML tags fall short for custom UI components (like a custom dropdown).
  • Forms and Security: Always specifying autocomplete attributes on inputs to help password managers, and understanding that client-side HTML validation is easily bypassed, so backend validation is still mandatory.

Performance

The structure of your HTML impacts how fast the page loads.

  • DOM Size: A massive DOM (thousands of nodes) consumes excessive memory and makes CSS recalculations and JavaScript queries incredibly slow. Keep your DOM shallow.
  • Resource Loading: The browser parses HTML top-to-bottom. If it hits a synchronous <script src="..."> in the <head>, it STOPS parsing the HTML, downloads the script, executes it, and only then continues. Use <script defer> or place scripts at the bottom of the body to prevent render-blocking.
  • Preloading: Use <link rel="preload" as="font" ...> to tell the browser to fetch critical assets early.

Best Practices

  • Use semantic tags (<main>, <article>, <nav>) instead of <div> whenever possible.
  • Always include an alt attribute on <img> tags for screen readers and broken image fallback.
  • Never use HTML to style elements (e.g., avoid <b> or <i> if you just want visual bold/italics; use CSS. Use <strong> or <em> for semantic emphasis).
  • Keep the hierarchy logical. Only one <h1> per page, followed by <h2>, then <h3>. Never skip heading levels just for sizing.

Interview Questions

Easy: What is the difference between an inline element and a block-level element?

Block-level elements (like <div>, <p>, <h1>) take up the full width available and start on a new line. Inline elements (like <span>, <a>, <strong>) only take up as much width as necessary and do not start on a new line.

Medium: Explain the purpose of the alt attribute on images. What should you do for purely decorative images?

The alt attribute provides alternative text for screen readers and displays if the image fails to load. For purely decorative images that add no informational value, you should use an empty alt attribute (alt="") so screen readers skip it, rather than omitting the attribute entirely.

Hard: How does the browser handle script tags during HTML parsing, and what is the difference between async and defer?

By default, script tags block HTML parsing while they are downloaded and executed. async downloads the script in the background and executes it immediately when ready, interrupting parsing. defer downloads the script in the background but waits until HTML parsing is completely finished before executing it. defer guarantees execution in the order the scripts appear in the document; async does not.

Senior: You are tasked with optimizing the initial load time of a massive web application. How can you leverage HTML to improve the critical rendering path?

1. Inline critical CSS in the <head> to avoid render-blocking network requests. 2. Use <link rel="preload"> for critical fonts or hero images. 3. Use <script defer> for all JavaScript. 4. Implement resource hints like <link rel="preconnect"> for third-party domains (e.g., CDNs, APIs). 5. Ensure the server streams the HTML response (Transfer-Encoding: chunked) so the browser can start parsing before the entire document is received.

Engineering Challenge

Task: Without using any CSS or JavaScript, create an accessible, fully functional multi-step form simulation using only HTML. Use the <details> and <summary> tags to create native accordions for the steps, and utilize every relevant HTML5 input type (date, range, color, email) with proper client-side constraints.

View Solution Approach

The core of this relies on using semantic HTML5 inputs to offload work to the browser. By wrapping each "step" in a <details> tag, you achieve interactivity without JS. Using inputs like <input type="range" min="1" max="10"> and <input type="date" min="2026-01-01"> ensures data is constrained at the source.

Revision Sheet

  • HTML = Structure. It builds the DOM tree.
  • Tags vs Nodes: Tags are text syntax; Nodes are the living objects in the browser's memory.
  • Semantics Matter: Use <main>, <article>, <nav> for SEO and accessibility.
  • Forms: Always link <label for="id"> to <input id="id">.
  • Performance: Beware of render-blocking scripts; use defer.

Connections

You now understand the skeleton (HTML) and how the browser constructs the DOM tree. However, this skeleton is currently ugly and unstyled. Next, we will introduce the engine that makes the web beautiful: CSS and the CSSOM (CSS Object Model).

Mini Project (20-30 min)

▶ View Solution

Implementation

javascript 
// code here

Bigger Project (1-2 hours)

Build a comprehensive project for this chapter's topic.

▶ View Solution

Full implementation details

typescript 
// code here

Interview Questions

Easy: What is a core concept?

A core concept is fundamental to understanding this topic.

PreviousVolume 1 🏠 Curriculum NextVolume 3
🏠 Curriculum NextVolume 2