Unit 2: The DOM Architecture Sandbox

Real-time compilation of HTML elements, attributes, and tree structure.

Identify and use core HTML elements (headings, paragraphs, links, lists, tables, images)
Understand the DOM tree structure and how nested elements form parent-child relationships
Apply character entities and URL encoding to display reserved characters safely
Compare legacy framesets with modern iframes and explain when to use each

▶ How this sandbox works

Edit the HTML in the left panel — the Browser Render updates live as you type.
The DOM Tree Structure panel shows how the browser interprets your HTML as a tree of nested elements. Each indent = a child inside a parent.
Click any snippet button (User Profile, Form, etc.) to load a pre-built example and inspect its structure.

Try it: change <h2> to <h1> in the editor and watch both panels update.

Raw HTML Input (edit and see live)

Load:

Browser Render

DOM Tree Structure

1. HTML Fundamentals — Elements, Tags & Attributes

HTML (HyperText Markup Language) is the standard language for creating web pages. It describes the structure of content using a system of tags and attributes. Every HTML document follows a tree hierarchy called the DOM (Document Object Model).

An HTML element typically consists of:

An opening tag with optional attributes: <tagname attr="value">
The content (text or other nested elements)
A closing tag: </tagname>
Self-closing elements (void elements) like <br>, <img>, <input> have no closing tag.

2. Core HTML Element Reference

Sectioning & Grouping:

Element	Description	Attributes
`<div>`	Generic block-level container (used for layout)	global
`<span>`	Generic inline container (used for text styling)	global
`<header>`	Introductory content / navigation	global
`<nav>`	Section with navigation links	global
`<main>`	Dominant content of the document	global
`<section>`	Thematic grouping of content	global
`<footer>`	Footer for its nearest sectioning ancestor	global

Text Content & Formatting:

Element	Description	Example
`<h1>-<h6>`	Headings (h1 = highest, h6 = lowest)	`<h1>Title</h1>`
`<p>`	Paragraph	`<p>Text</p>`
`<a>`	Hyperlink	`<a href="url">link</a>`
`<ul> / <ol>`	Unordered / Ordered list	`<ul><li>item</li></ul>`
`<li>`	List item	—
`<table>`	Table container	`border, cellpadding`
`<tr>`	Table row	—
`<th> / <td>`	Table header / data cell	`colspan, rowspan`
`<img>`	Embeds an image (void element)	`src, alt, width, height`
`<br>`	Line break (void element)	—
`<strong>`	Bold / strong importance	—
`<em>`	Italic / emphasized text	—

3. HTML Character Entities & URL Encoding

Character entities are used to display reserved characters (like <, >, &) that would otherwise be interpreted as HTML code. They start with & and end with ;.

There are three formats: named (<), decimal numeric (<), and hex numeric (<).

Char	Named	Numeric	URL Encoded	Description
<	`<`	`<`	`%3C`	Less than (starts tags)
>	`>`	`>`	`%3E`	Greater than (ends tags)
&	`&`	`&`	`%26`	Ampersand (starts entities)
"	`"`	`"`	`%22`	Double quote (attribute values)
'	`'`	`'`	`%27`	Single quote / apostrophe
	` `	` `	`%C2%A0`	Non-breaking space
©	`©`	`©`	`%C2%A9`	Copyright symbol
®	`®`	`®`	`%C2%AE`	Registered trademark
€	`€`	`€`	`%E2%82%AC`	Euro currency
→	`→`	`→`	—	Right arrow

URL Encoding (percent-encoding) replaces unsafe characters in URLs with a % followed by two hex digits representing the byte. For example, a space becomes %20. The JavaScript function encodeURIComponent() performs this encoding automatically.

4. Frames & Framesets (Legacy) vs Modern Iframes

Framesets (HTML 4 / deprecated in HTML5) divided the browser window into multiple independent sections, each loading a separate HTML document. The <frameset> element replaced <body>, and <frame> defined each region.

Modern HTML uses <iframe> (inline frame) to embed one HTML document inside another. Unlike framesets, iframes work within the <body> and are responsive by default.

Feature	`<frameset>` (Legacy)	`<iframe>` (Modern)
Replaces <body>?	Yes — body must be omitted	No — works inside body
Deprecated?	Yes — not supported in HTML5	No — fully supported
Responsive?	No — fixed pixel dimensions	Yes — can use CSS width/100%
Attributes	`cols, rows`	`src, srcdoc, sandbox, loading`

ASCII vs Unicode vs UTF-8

Understanding the difference between these three is critical for building web applications that handle text correctly across languages:

ASCII (1960s) — 7-bit encoding, 128 characters (A-Z, a-z, 0-9, punctuation, control codes). Only covers English. Each character = 1 byte.
Unicode (1990s) — A universal character set assigning every character from every writing system a unique code point (e.g., U+0041 = 'A', U+0905 = 'अ', U+1F600 = '😀'). It does NOT define how bytes are stored — only the mapping.
UTF-8 — The dominant encoding on the web (>98% of pages). It stores Unicode code points in 1-4 bytes. ASCII characters (U+0000-U+007F) use 1 byte — making UTF-8 backward compatible with ASCII. Non-Latin scripts use 2-4 bytes.

Why This Matters for HTML

The <meta charset="UTF-8"> declaration tells the browser to interpret the page as UTF-8. Without it, the browser may guess the encoding (often Western/ASCII), which breaks special characters, emojis, and non-Latin scripts. Always include <meta charset="UTF-8"> in the <head>.

Character Entities vs Raw Unicode

You can include any Unicode character directly in your HTML if the file is saved as UTF-8:

<p>日本語, हिन्दी, ελλάδα, 😀 are all valid in UTF-8</p>

Use character entities only for characters that have special meaning in HTML: < (<), > (>), & (&), " ("). Everything else is better as the literal character.