📖 Programmer's Bible
First Chapter: From Zero to Your Own Website › Part 2: The Network › 51 of 60 · See on the map

Web Browser

⏱ 6 min read

In one sentence: A web browser is a program that asks web servers for pages, receives their files, and puts them together into the page you see and use on your screen.

Why should I care?

You are using a web browser right now. Chrome, Edge, Firefox and Safari are all browsers. MDN, a website that documents how the web works, gives this definition: a browser is "a program that retrieves and displays pages from the web, and lets users access additional pages through hyperlinks". (To retrieve means to fetch. A hyperlink is a link.)

So a browser is Software and Programs, like other programs on your computer. In The World Wide Web, you saw that the browser is the client: it asks a web server for pages.

Analogy

Think of furniture that comes in a flat box, with parts and a sheet of instructions. Someone follows the instructions and builds it.

A web page arrives in a similar way. The server sends files: instructions that say what the page contains and how it should look, plus parts such as pictures. The browser is the builder. MDN says the browser "assembles" these pieces into a web page. (To assemble means to put parts together.)

Where the analogy breaks down: furniture comes in one box, from one shop. A web page often arrives as many files, and they can come from several different servers. Also, furniture stays the same after you build it. A web page can contain code that changes the page after it appears.

How it actually works

Three kinds of files

MDN says websites are built mainly from code in three languages: HTML, CSS and JavaScript. Each has its own job:

  • HTML describes "the web page content and its structure": the text, the headings, the links.
  • CSS describes "styling and layout": colors, sizes, and where things go.
  • JavaScript describes "the behavior of interactive parts": what happens when you click or type.

Pictures and videos come as separate files too. Remember this: the server sends code, and the browser turns it into the page you see.

From an address to a page

MDN describes these steps (simplified here):

  1. You ask for a page. You type an address into the address bar, or you click a link.
  2. The browser finds the server. A web address contains the server's name. In info.cern.ch/hypertext/WWW/TheProject.html, the name is info.cern.ch. But the browser needs the server's IP address: a number that identifies each device on the network. So the browser asks DNS, a kind of address book for the internet. DNS answers with the IP address. (This is simplified. The full story is in DNS.)
  3. The browser sends a request. It uses HTTP: the set of rules that browsers and web servers use to send requests and responses. The first request is usually for the HTML file.
  4. The server sends a response. The response holds the HTML file.
  5. The browser reads the HTML. Inside, it may find links to more files: CSS files, JavaScript files, and media files such as pictures and video. The browser requests each of them. Some of these files may come from other servers.
  6. The browser draws the page. It puts all the pieces together. MDN calls this rendering. The step where the page appears on the screen is called painting.
How a browser gets and shows a pageThe browser asks DNS for the IP address of the server named in the web address, and DNS answers with it. The browser sends a request to the web server for the page, and the server sends back the HTML file. The browser reads it and requests more files, such as CSS, JavaScript and pictures, and the server sends those files. Then the browser puts the pieces together and paints the page on your screen. For simplicity, the diagram shows only one web server.ServerDNSBrowserBuilds andpaints thepageWhich IP address?The IP addressRequest: the pageThe HTML fileCSS, JavaScript, picturesThose files

Inside a browser is a part that turns the HTML and CSS into what you see on the screen. MDN calls it the rendering engine (or browser engine).

How it came to be

Tim Berners-Lee wrote the first web browser in 1990, on a NeXT computer. He called it WorldWideWeb. By late 1990, it was running at CERN, where he had invented the web. With it, you could read pages and also edit pages stored on the same computer. Much later, it was renamed Nexus, so that people would not confuse the program with the web itself.

CERN says that only a few people had a NeXT computer. So a simpler browser, the line-mode browser, was made. It "could run on any system".

In early 1993, the National Center for Supercomputing Applications (NCSA) at the University of Illinois released the first version of its Mosaic browser. NCSA then also released versions for PC and Macintosh computers. CERN says these user-friendly browsers had "an immediate impact on the spread of the WWW" (the World Wide Web).

🧪 Try it in your browser

You will see the code that a browser receives, before it turns it into a page. You need a computer with Chrome, Edge or Firefox. These steps only look. They change nothing.

  1. Open this early CERN web page: info.cern.ch/hypertext/WWW/TheProject.html. What you should see: a big heading, World Wide Web, and text with links, such as hypermedia.

  2. Open the page's source: the HTML code the server sent.

    • Windows (all three browsers) or Linux (Chrome, Firefox): press Ctrl + U.
    • Mac: in Chrome, press Cmd + Option + U. In Firefox, press Cmd + U. (Edge's help lists no Mac shortcut for this, so on a Mac use Chrome or Firefox.)

    What you should see: the same page as plain text, in a new tab or window. Many words are inside angle brackets, such as <BODY> and <H1>.

  3. Near the top, find the line that starts with <H1>World Wide Web</H1>. In HTML, H1 marks the highest-level heading on a page. The browser followed this instruction and drew the big heading you saw in step 1.

  4. Two lines below it, find hypermedia</A>. The text before it, from <A to HREF="WhatIs.html">, starts a link. (In HTML, A with HREF makes a link, and HREF says where the link goes.) The browser drew hypermedia as a link that you can click.

  5. Close the source tab or window.

What happened: the server did not send a picture of the page. It sent HTML code. Your browser read that code and built the page.

Common misunderstandings

  • "The browser is the internet." No. The browser is one program that uses the internet. The web is not the internet either: MDN calls the web "one of many applications built on top of the Internet".
  • "Google is my browser." Google Search is a search engine. MDN describes a search engine as a system that "collects information from the World Wide Web and presents it to users". You visit a search engine in a browser, like any other website. Chrome is the browser.
  • "Websites live inside my browser." No. A website lives on a server. MDN says a copy of the page's code "is downloaded from the server" to your device, and then the browser shows it.

Recap

  • A web browser is a program that fetches web pages from servers and shows them to you. It is the client in the web's client and server system.
  • The browser sends HTTP requests, receives HTML, CSS, JavaScript and pictures, and puts them together into a page. This is called rendering.
  • Tim Berners-Lee wrote the first browser at CERN in 1990. In 1993, NCSA's Mosaic helped the web spread.

Sources

Written with AI · Reviewed by AI · Not yet checked by a human

Found a mistake, or something you did not understand? Report a problem.