Frontend Basics: HTML & the DOM
Start here: what the frontend is, how a page loads, HTML tags & attributes, and the DOM — the live tree the browser builds from your HTML.
What is the frontend? The frontend is everything a person sees and touches in the browser — text, buttons, images, motion. Your code runs in the user's browser (the part you can see); the backend runs on a server you can't see (databases, logic, APIs). The frontend is built from three layers, each with exactly one job.
The three layers. HTML = structure — the content and its meaning, the skeleton of the page. CSS = style — how it looks: color, spacing, layout, type (the skin). JavaScript = behaviour — what happens when you interact (the muscles and brain). Keep them separate and pages stay maintainable.
How a page loads (5 steps). (1) Request — you enter a URL and the browser asks a server for the page. (2) Response — the server sends back files: HTML, CSS, JS. (3) Parse — the browser reads the HTML top to bottom and builds the DOM, a tree of objects for every element. (4) Render — using the DOM + CSS it paints actual pixels on screen. (5) Run & react — JavaScript runs, changes the DOM in response to clicks and typing, and the page updates live.
HTML basics. HTML (HyperText Markup Language) describes structure using tags (also called elements). A page is just nested tags inside a fixed skeleton: <!DOCTYPE html>, then <html> containing a <head> (metadata like <title>) and a <body> (everything visible).
Anatomy of an element. Almost every element has the same shape: an opening tag, some content, and a closing tag — e.g. <a href="/home">Go home</a>. Attributes (name="value") sit in the opening tag and configure the element. A few elements are self-closing / void with no content: <img>, <br>, <input>.
Attributes you'll use most. id is a unique name for one element; class is a shared name for styling/JS. Others: src (file an image/script loads), alt (fallback text), href (where a link goes), type (kind of input/button), placeholder, value, boolean ones like disabled/checked, and data-* for your own custom data. id and class matter most — they're the handles JavaScript uses to find an element.
Semantic HTML. Prefer tags that describe their meaning over generic <div>s: <header>, <nav>, <main>, <article>, <section>, <footer>. Semantic markup is easier to read, better for accessibility, and friendlier to search engines.
The DOM — your page as a live tree. DOM = Document Object Model. When the browser parses your HTML, it builds a tree of objects — one node per tag and per piece of text. That live tree is the DOM. Useful image: HTML is the blueprint; the DOM is the building the browser constructs from it. You renovate the building, not the blueprint.
HTML vs DOM. HTML is the text you write in a .html file on disk — always there, unchanging, and JS cannot change it. The DOM is a tree of live objects in the browser's memory, built when the page loads, and JavaScript can change it instantly.
Family-tree vocabulary. Nodes relate exactly like a family tree, and these are the words you use in code: parent / child (a <body> is the parent of the <h1> and <p> inside it), siblings (two tags sharing a parent), ancestor / descendant (an <a> deep inside <body>), and the root (the document node at the very top). Note: words become their own text nodes ("Hi " and "link" are separate children), and attributes hang off their element.
Making it interactive. JavaScript reaches into the DOM to find elements, change them, and listen for what the user does. Three lines cover most of it: find a node (document.querySelector("#like")), listen for an event (btn.addEventListener("click", ...)), and change the DOM inside the handler (btn.textContent = "Liked!").
Events — reacting to the user. An event is something that happens: a click, input (value changes as you type), change (value committed), submit (a form is submitted), keydown, mouseover, load, DOMContentLoaded. You attach a function with addEventListener and the browser runs it every time the event fires.
The mental model (memorise this). HTML → structure (what's on the page). CSS → style (how it looks). JS → behaviour (what it does). DOM → the live tree the browser builds from HTML, and the thing JavaScript changes to make the page come alive.
Think of HTML as your schema/DTO definition (the static shape), and the DOM as the deserialized object graph loaded into memory at runtime — the live tree your code actually mutates. The .html file is like a JSON payload on disk; the DOM is the parsed in-memory object you call getters/setters on. `addEventListener` is your event listener / message handler, and updating `textContent` is like mutating a field on a managed entity — the framework (browser) flushes the change on the next cycle.
- Three layers, one job each: HTML = structure, CSS = style, JavaScript = behaviour.
- Page-load pipeline: Request → Response → Parse (build DOM) → Render (paint pixels) → Run & react (JS mutates DOM).
- HTML is the text on disk (unchanging, JS can't touch it); the DOM is the live in-memory tree (JS changes it instantly).
- Every tag becomes an element node; every piece of text becomes its own text node; attributes hang off their element.
- `id` (unique) and `class` (shared) are the handles JS uses to find elements in the DOM.
- Interactivity is three steps: find an element → listen for an event → change the DOM.
- Prefer semantic tags (`<header>`, `<nav>`, `<main>`, `<article>`, `<footer>`) over generic `<div>`s for accessibility and SEO.
Worked Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>My first page</title>
</head>
<body>
<h1>Hello world</h1>
<p>This is my first web page.</p>
<!-- anatomy: opening tag + attribute + content + closing tag -->
<a href="/home">Go home</a>
<!-- self-closing (void) elements have no content -->
<img src="cat.jpg" alt="A sleeping cat">
<input type="email" placeholder="you@mail.com" required>
</body>
</html><html> <!-- root element -->
<body> <!-- parent of <h1> and <p> -->
<h1>Hello</h1> <!-- element node -> text node "Hello" -->
<p>Hi <a href="/">link</a></p>
<!-- "Hi " is a text node; <a> is a sibling-less child; -->
<!-- href="/" is an attribute hanging off <a>; "link" is text -->
</body>
</html>// 1. FIND an element in the DOM
const btn = document.querySelector("#like"); // first match
const all = document.querySelectorAll(".item"); // every match
// 2. LISTEN for an event
btn.addEventListener("click", () => {
// 3. CHANGE the DOM
btn.textContent = "Liked!"; // read / set text
btn.style.color = "tomato"; // change one style
btn.classList.toggle("active"); // add / remove a class
});
// build a new node and add it to the tree
const li = document.createElement("li");
li.textContent = "New item";
document.querySelector("ul").appendChild(li);
// read what a user typed
const name = document.querySelector("#name").value;▶Try It Live
Edit the code and press Run — it executes safely in a sandboxed iframe. Use the Console tab for log output.
Interview-Ready Q&A
HTML is the static text you write in a .html file on disk — it never changes on its own and JavaScript can't modify it. The DOM (Document Object Model) is the live tree of objects the browser builds in memory when it parses that HTML. JavaScript reads and mutates the DOM, not the HTML. Analogy: HTML is the blueprint, the DOM is the building.
- 1HTML = structure, CSS = style, JS = behaviour — one job each.
- 2Page load: Request → Response → Parse (DOM) → Render (paint) → Run & react.
- 3The DOM is a live tree of nodes; tags become element nodes, text becomes text nodes, attributes hang off elements.
- 4JS changes the DOM (the building), never the HTML file (the blueprint).
- 5Interactivity = find an element → addEventListener → change the DOM.
- 6Common events: click, input, change, submit, keydown, load, DOMContentLoaded.