What Happens When You Type a URL into the Browser?

You do it a hundred times a day:

  • You open a tab in your browser and type youtube.com in the URL bar, then hit Enter.
  • After a second, the YouTube homepage opens up.
  • It feels like magic, right? But in the background, a lot of things are happening.

So what really happens in that one second? Your computer has to:

  • Find the right server sitting somewhere on the planet.
  • Open a connection to it.
  • Ask for the page, get it back, and draw it on your screen.

We’ll go through that whole journey one step at a time. By the end, you’ll be able to explain it to anyone, even an interviewer.

🎯 Why This Matters in Interviews

Here’s the pain:

  • You’re sitting in a system design or networking interview.
  • The interviewer asks the classic opener: “What happens when you type a URL into the browser and press Enter?”
  • It sounds simple, right? But they’re not testing whether you know YouTube exists.
  • They want to see if you really understand what’s going on when the web does its thing.

Here’s why this one question is gold for them:

  • It touches almost everything: domain names, IP addresses, connections, security, servers, and how pages get drawn.
  • A good answer shows you can think across the whole stack, not just one corner of it.
  • So it’s worth knowing cold.

We’ll keep it beginner-correct. Not dumbed down so much that it becomes wrong, but not drowning you in jargon either.

🌐 A Real-World Analogy

Let’s say you want to call your friend Alex, but you only remember Alex’s name, not the phone number. So here’s what you do:

  • You look up the number in your contacts, then you dial.
  • Alex picks up and says hello, you say hello back, and now you can actually talk.
  • You ask your question, Alex answers, then you hang up.

Typing a URL works almost exactly like that:

  • The website name (youtube.com) is like Alex’s name.
  • Looking up the phone number is like finding the website’s address on the internet.
  • Saying hello back and forth before you talk is like the computers agreeing to connect.
  • Asking your question and getting an answer is the actual page request.

Keep this phone call in your head. Every step below maps back to it.

🗺️ The Whole Journey at a Glance

Before we zoom into each step, here’s the big picture. When you press Enter, your request travels through a chain like this.

You type URL

Find IP address (DNS)

Open connection (TCP)

Secure it (TLS for HTTPS)

Send HTTP request

Server sends response

Browser renders page

That’s the entire trip. Now let’s slow down and look at each box.

🔎 Step 1: DNS Lookup — Finding the Address

So you typed youtube.com. Now here’s the thing, your browser can’t use that name directly. Let’s see why, and what it does about it:

  • Computers on the internet don’t talk using names, they talk using numbers called IP addresses.
  • An IP address is just the numeric address of a machine, something like 142.250.190.78. Think of it as the phone number of the server. (IP is short for Internet Protocol.)
  • So before anything else, your browser has to turn the name into a number. That lookup is called DNS resolution.
  • DNS stands for Domain Name System. It’s basically the internet’s phone book, it maps names you can remember to numbers machines can use.

Now your browser doesn’t ask one giant phone book directly. It checks the closest and fastest places first, and only goes further out if it has to. Here’s the order it follows:

  • Browser cache first. Your browser remembers names it looked up recently, so it checks its own memory.
  • OS cache next. If the browser doesn’t have it, your operating system might.
  • Router or resolver. Your request goes to a DNS resolver, the helper that does the real searching for you. This resolver is often run by your ISP (your Internet Service Provider, the company you pay for internet), but it can also be a public one like Google’s 8.8.8.8 or Cloudflare’s 1.1.1.1.
  • Root server. If the resolver doesn’t know, it asks a root server, which points it in the right direction.
  • TLD server. The root sends it to a TLD server. TLD means Top-Level Domain, that’s the .com or .org part, and this server knows where all .com names live.
  • Authoritative server. Finally the authoritative server for youtube.com gives back the real IP address. Authoritative just means it’s the official source for that name.

Once any step has the answer, it gets sent back, and it’s saved along the way so next time is faster. Now your browser finally knows the server’s IP address.

go to .com

go to youtube

IP address

Browser asks resolver

Root server

TLD server (.com)

Authoritative server

Why DNS uses caching

Looking up a name from scratch every single time would be slow. So each layer remembers answers for a while. That’s why visiting a site the second time often feels quicker. This saved-answer behavior is called caching, and you’ll see it again and again on the web.

🤝 Step 2: TCP Handshake — Opening a Connection

Great, we’ve got the address. But having someone’s number isn’t the same as talking to them, right? You still have to dial and wait for them to pick up. That’s what this step does:

  • Your browser opens a connection to the server using TCP. TCP stands for Transmission Control Protocol.
  • TCP’s job is to make sure your data arrives in order and nothing gets lost on the way. Think of it as a reliable phone line, not a shouted message that might get missed.
  • To set up that line, the two computers do a little back-and-forth greeting called the three-way handshake.

It works in three quick messages:

  • Your browser says SYN, which basically means “hi, can we talk?” (SYN is short for synchronize.)
  • The server replies SYN-ACK, meaning “yes, let’s talk, and I heard you.” (ACK is short for acknowledge.)
  • Your browser says ACK, meaning “great, I heard you too.”

After those messages, the connection is open and both sides are ready. That’s the “hello, hello back” moment from our phone call.

Browser: SYN (can we talk?)

Server: SYN-ACK (yes, I heard you)

Browser: ACK (I heard you too)

Connection open

🔒 Step 3: TLS Handshake — Locking It Down (for HTTPS)

Now if the site uses HTTPS, there’s one more step before any real talking happens. (HTTPS is just the secure version of HTTP, the little lock icon you see in the address bar.) Here’s what’s going on:

  • We need to make the line private, so nobody snooping in between can read it. That’s the job of the TLS handshake.
  • TLS stands for Transport Layer Security. It scrambles the data so only your browser and the server can understand it, and scrambling data like that is called encryption.
  • It also proves you’re really talking to the right server and not an imposter, which is called authentication.
  • And this happens right after the TCP connection from Step 2, not instead of it. So for a secure site the order is: open the TCP line, then secure it with TLS, then talk.

During the handshake, a few things get sorted out quickly:

  • The server proves it’s really who it claims to be, using a certificate (a kind of digital ID card).
  • Both sides agree on how to scramble the messages.
  • They set up a shared secret key, so only they can unlock each other’s data.

Once that’s done, the connection is both reliable and private. Now we can finally ask for the page.

HTTP vs HTTPS in one line

HTTP sends everything in plain text, so anyone in the middle could read it. HTTPS adds the TLS step on top, so the data is scrambled. That’s the whole difference, and it’s why every serious site uses HTTPS today.

📤 Step 4: The HTTP Request

The line is open and secure. So now your browser actually asks for what it wants. It sends an HTTP request. HTTP stands for HyperText Transfer Protocol, it’s just the agreed format for asking a web server for things and getting answers back.

A request is basically a small note. It says what you want, plus a few details about you. For loading a page, it looks roughly like this.

GET / HTTP/1.1
Host: youtube.com
User-Agent: Chrome
Accept: text/html

Let’s read it line by line:

  • GET is the method. It means “give me this thing”. (Other methods like POST send data instead.)
  • The / is the path, that’s the specific page you want, here the homepage.
  • Host says which site, since one server can host many.
  • User-Agent tells the server what browser you’re using.
  • Accept says what kind of content you’d like back.

So in plain words, this note says: “Hey YouTube, please send me your homepage. I’m Chrome, and I’d like HTML.” Then it travels down the connection to the server.

⚙️ Step 5: The Server Does Its Work

The server gets your note, and now it has to figure out what to send back. This is the server processing step. Here’s roughly what happens:

  • For a simple page, it just grabs a ready-made file.
  • For something like YouTube, it does real work. It checks if you’re logged in, looks up your recommendations in a database, and maybe pulls a few things from a cache. Then it builds the page for you. (A database is just an organized store of data.)
  • You don’t see any of this, you just wait a moment.
  • That wait has a name, latency. Latency is the round-trip time for your request to reach the server and the answer to come back. Lower latency means a faster site, which is why companies work so hard to keep servers fast and close to users.

📥 Step 6: The HTTP Response

When the server is done, it sends back an HTTP response. This is the answer to your note:

  • It comes with a status code, a short number that says how things went.
  • You’ve probably seen 404 before, right? That’s a status code that means “page not found”.

Here are the common ones worth knowing.

Status Code Meaning In plain words
200 OK All good, here’s your page
301 Moved Permanently The page lives at a new address now
404 Not Found That page doesn’t exist
500 Internal Server Error Something broke on the server side

Along with the status code, the response carries the actual content, usually the HTML of the page. HTML is the text that describes the page’s structure, its headings, paragraphs, images, and so on. Now your browser has the raw page in hand, and it needs to turn it into something you can see.

🎨 Step 7: Browser Rendering — Drawing the Page

This last step is where the page actually shows up on your screen. Turning raw code into a visible page is called rendering, and the browser goes through a clear pipeline to do it:

  • First it reads the HTML and builds the DOM. The DOM is a tree of all the elements on the page, like a family tree of every heading, image, and button. (DOM is short for Document Object Model.)
  • Then it reads the CSS and builds the CSSOM. The CSSOM is the same kind of tree, but for styles. (CSS is the code that says how things look, the colors, sizes, and spacing.)
  • It combines the two into the render tree, which holds only the things that will actually be shown.
  • Then comes layout, where the browser works out where each element goes and how big it is.
  • Finally comes paint, where it fills in the real pixels you see, the colors, text, and images.

HTML

DOM tree

CSS

CSSOM tree

Render tree

Layout

Paint to screen

And that’s it. The page is on your screen. All of this happens in well under a second, from typing the URL to seeing pixels.

🧩 Putting It All Together

Let’s recap the full flow, the way you’d say it in an interview:

  • You type youtube.com and press Enter.
  • The browser turns that name into an IP address using DNS. It checks its own cache first, then reaches out to resolvers and name servers if needed.
  • Now it has the address, so it opens a reliable connection using the TCP three-way handshake.
  • If the site is HTTPS, it then runs the TLS handshake to make that connection private.
  • Over this connection it sends an HTTP request asking for the page.
  • The server processes the request, maybe hitting a database, then sends back an HTTP response with a status code like 200 and the HTML.
  • Finally the browser renders it. It builds the DOM from the HTML and the CSSOM from the CSS, combines them into the render tree, lays everything out, and paints it to your screen.

That’s the whole story.

⚡ Where This Shows Up in the Real World

Understanding this flow isn’t just trivia. It explains a lot of things you’ll bump into as a developer:

  • Caching shows up everywhere, from DNS to the browser saving images. That’s why repeat visits feel instant.
  • CDNs keep copies of a site close to users, which cuts down latency. (A CDN, or Content Delivery Network, is a set of servers spread around the world.)
  • When a site feels slow, these steps help you guess where the holdup is. Is it DNS, the connection, the server, or the rendering?

Each of these is a whole topic on its own. And they all start to make sense once you’ve got this journey in your head.

⚠️ Common Mistakes and Misconceptions

A few things trip people up when they first learn this. Let’s clear them out:

  • “DNS and the request are the same thing.” No. DNS just finds the address. The request comes later, over a separate connection.
  • “HTTPS replaces TCP.” It doesn’t. TLS runs on top of the TCP connection, it happens after the handshake, not instead of it.
  • “The browser shows the page the instant the response arrives.” Not quite. There’s still the whole render pipeline to go: the DOM, the CSSOM, the render tree, layout, and paint.
  • “One URL means one request.” Usually a page pulls in many more requests for images, styles, and scripts, and each one follows a similar path.

🛠️ Design Challenge

Try this on your own to test yourself.

Imagine you type amazon.com and the page takes a full ten seconds to load. Walk through each step and write down one thing that could go wrong there. For example:

  • Maybe DNS resolution is slow.
  • Maybe the server is far away, so latency is high.
  • Maybe the page has huge images that take a while to paint.

See how many slow points you can name across the whole flow. This is exactly how you’d reason about performance in a real interview.

🧩 What You’ve Learned

You can now explain the full trip a URL takes. Here’s what you’ve picked up.

  • ✅ DNS turns a website name into an IP address, checking caches first.
  • ✅ TCP opens a reliable connection using the three-way handshake.
  • ✅ TLS secures that connection for HTTPS sites, after TCP and before the request.
  • ✅ HTTP carries your request and the server’s response, with status codes like 200 and 404.
  • ✅ The browser renders the page through DOM, CSSOM, render tree, layout, and paint.
  • ✅ Caching and CDNs make all of this faster on repeat visits.

Check Your Knowledge

Test what you learned. Pick an answer for each question, then click Check.

  1. 1

    What is the first step after you type a URL and press Enter?

    Why: Computers route using numbers, so the browser must first use DNS to turn the name into an IP address before it can connect.

  2. 2

    What does the TCP three-way handshake do?

    Why: The three-way handshake (SYN, SYN-ACK, ACK) opens a reliable TCP connection between the browser and the server before data flows.

  3. 3

    Where does the TLS handshake happen in the flow?

    Why: For HTTPS, TLS runs on top of the TCP connection, after the handshake and before the HTTP request, to encrypt the data.

  4. 4

    What does the browser do after it receives the HTML?

    Why: Rendering turns the HTML and CSS into the DOM, CSSOM, and render tree, then layout and paint put the pixels on your screen.

🚀 What’s Next?

This lesson is your map of the whole journey. Next, we’ll zoom into the individual stops and go deeper.

  • DNS Explained takes a closer look at how name resolution really works.
  • HTTP vs HTTPS breaks down requests, responses, and how encryption keeps you safe.
  • Caching and CDNs shows how the web stays fast at huge scale.

Once you’ve got those, you’ll have a solid grip on the network fundamentals every backend and system design interview leans on.

Share & Connect