1 How the Web and Browsers Work
Learn how HTML, CSS, and JavaScript work together and how a browser retrieves, interprets, and renders a web page.
The three building blocks
A web page is a document that a browser retrieves, interprets, and displays. Its main technologies have complementary roles: describes content and structure, controls presentation, and adds behavior. Together, they make pages that can be both readable and interactive.
A useful way to understand a web page is to follow how it is organized, how the browser turns it into a visible result, and how changes can cause parts of that process to happen again.
How a page is organized
elements are nested to describe relationships between parts of a document. A typical page has a root <> element, a <head> for metadata and resource references, and a <body> for visible content. Semantic elements such as <header>, <main>, and <footer> communicate what different sections mean.
The roles of the three building blocks are distinct:
identifies content and structure. For example, a
<button>marks an interactive control.describes how elements should look and be arranged, including color, typography, spacing, and layout.
runs instructions in the browser. It can respond to user actions, update the page, and request or process data.
Here, listens for a click and changes the heading text:
The provides the heading and button; connects the button click to a change in the heading. could control how both elements look. These technologies work together, but they are not interchangeable.
From markup to browser structures
As the browser parses , it builds the : a tree of objects representing the document’s elements and text. In the example, the heading and button are children within the <main> element. can use browser APIs to find and change these objects.
The browser also parses into style information, often called the . The DOM represents the document’s content and structure, while the CSSOM represents style information. Together, these internal representations help the browser determine what to display and how it should look.
These models connect a page’s authored technologies to the browser’s rendering work: supplies structure, supplies presentation rules, and can change content or styles through browser APIs.
How the browser renders a page
When you navigate to a page, the browser requests it from a web server. As arrives, the browser can begin parsing it and building the DOM before the entire document has downloaded. If it finds references to stylesheets, scripts, or images, it may request those resources too. Loading, parsing, and rendering can overlap; the browser does not always wait for every resource before showing anything.
A simplified rendering process is:
Parse to build the DOM and parse to build style information, including the CSSOM.
Calculate styles by matching rules to elements.
Build a from the content and styles needed for the visible page.
Lay out the page by calculating the size and position of visible elements.
Paint the result as pixels on the screen; the browser may also composite layers.
This sequence is a useful model, not a rigid, one-time chain. New content, changed styles, or a resized window can lead the browser to recalculate layout or repaint parts of the page.
Why rendering can change
can affect rendering when it changes the DOM or styles. A regular script without async or defer can pause parsing while the script is fetched and executed. As a result, script placement and loading options can affect when a page is ready to display.
The overall process is therefore dynamic: the browser retrieves resources, builds internal representations, calculates layout, and paints the page, while loading and rendering may overlap. If the page changes, some rendering work may happen again.
Takeaway: describes the page, presents it, and coordinates behavior. The browser turns these inputs into visible pixels through a process that can overlap and repeat as resources arrive or the page changes.