โ“ What Happens When You Type a URL in the Browser?

Noura MostafaNoura Mostafa
3 min read

It seems simple: you type a URL like www.google.com in your browser, hit Enter, and the website magically appears. But under the hood, thereโ€™s a complex sequence of processes happening in milliseconds.

In this article, weโ€™ll answer one of the most common programming interview questions:
๐Ÿ” โ€œWhat happens when you type a URL into the browser and press Enter?โ€
Let's walk through the key steps that make the web work.


๐ŸŒ Step 1: URL Parsing

When you type https://www.example.com, the browser breaks it into components:

  • Protocol: https

  • Domain: www.example.com

  • Path: (optional) /blog/article

  • Query string: (optional) ?search=js

The browser identifies what kind of request it needs to make (HTTP, HTTPS, FTP, etc.) based on the protocol.


๐Ÿ“ฅ Step 2: DNS Lookup

Next, the browser needs to translate the domain name (like www.example.com) into an IP address (like 192.0.2.1) to find the actual server.

This process is handled by the DNS (Domain Name System):

  1. The browser checks its own DNS cache.

  2. If not found, it asks the operating system.

  3. Then it queries a DNS resolver (usually your ISP).

  4. Eventually, it reaches the authoritative DNS server for the domain.

Once resolved, the IP address is cached for future requests.


๐Ÿ”Œ Step 3: Establishing a TCP Connection

The browser now knows the IP address of the server and needs to connect to it. This is done using the TCP (Transmission Control Protocol).

  • The client (your browser) and server perform a 3-way handshake:

    1. SYN

    2. SYN-ACK

    3. ACK

This connection is established on port 80 (HTTP) or 443 (HTTPS).


๐Ÿ” Step 4: TLS/SSL Handshake (If HTTPS)

If you're using HTTPS, the browser and server must agree on encryption settings to secure the connection. This includes:

  • Sharing public keys

  • Generating session keys

  • Verifying certificates

This is known as the TLS (Transport Layer Security) handshake.


๐Ÿ“จ Step 5: Sending the HTTP Request

Now the browser sends an HTTP request to the server:

httpCopyEditGET / HTTP/1.1  
Host: www.example.com  
User-Agent: Chrome/123  
Accept: text/html

The request may also contain cookies, authentication headers, and more.


๐Ÿ› ๏ธ Step 6: Server Processes the Request

The server receives the request and processes it:

  • It may access a database

  • Run backend logic (Node.js, Python, PHP, etc.)

  • Generate a response (HTML, JSON, etc.)

It sends back a response with a status code:

httpCopyEditHTTP/1.1 200 OK  
Content-Type: text/html

The body contains the HTML content of the page.


๐Ÿ“ฆ Step 7: Browser Renders the Page

The browser receives the HTML and begins rendering:

  1. Parse HTML and build the DOM (Document Object Model)

  2. Parse CSS and build the CSSOM

  3. Run JavaScript

  4. Handle layout and painting

The browser may send additional requests for assets like:

  • Images

  • CSS files

  • JavaScript files

  • Fonts

This is done asynchronously, often through multiple parallel requests.


๐Ÿš€ Step 8: Page Fully Loaded

Once all resources are loaded, the browser fires the DOMContentLoaded and load events.
The page is now interactive and ready for the user.


๐Ÿง  Summary

Hereโ€™s a simplified version of what happens:

  1. Parse the URL

  2. DNS lookup

  3. TCP connection

  4. TLS handshake (if HTTPS)

  5. Send HTTP request

  6. Server processes and sends response

  7. Browser renders the content

  8. Assets are fetched and the page is displayed

This whole process takes fractions of a second โ€” the magic of the internet!


๐Ÿ“š Final Thoughts

Understanding this flow is crucial for web developers. It gives you insights into performance optimization, security (like HTTPS), debugging slow websites, and backend/frontend integration.

Next time you hit "Enter" in your browser, remember โ€” you're triggering one of the most elegant orchestras in modern computing.

0
Subscribe to my newsletter

Read articles from Noura Mostafa directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Noura Mostafa
Noura Mostafa

๐Ÿš€ Aspiring Full-Stack Developer Blogger ๐Ÿ‘จโ€๐Ÿ’ป Passionate about web development and coding. โœ๏ธ Sharing my journey through tech via CodeOdyssey ๐ŸŒ "The code is a journey, not a destination."