Study Material

What Happens When You Type a URL in Your Browser?

Every time you type a website address into your browser and press Enter, a series of networking, security and browser-processing steps happens in the background.

For example, suppose you enter:

https://example.com

You may see the webpage almost immediately, but the browser has to perform several operations before the content appears.

A simplified process looks like this:

Enter URL
   ↓
Browser Parses URL
   ↓
DNS Resolution
   ↓
Find Destination IP
   ↓
Network Connection
   ↓
TLS Security
   ↓
HTTP Request
   ↓
Server Processing
   ↓
HTTP Response
   ↓
Browser Receives Resources
   ↓
HTML / CSS / JavaScript Processing
   ↓
Rendering
   ↓
Webpage Appears

Let's examine each stage.

Step 1: You Enter a URL

A URL stands for Uniform Resource Locator.

It identifies a resource and provides information about how it can be accessed.

For example:

https://example.com/products?id=10

This URL contains several parts.

Breaking Down a URL

Part	Example	Purpose
Scheme	https	Specifies the protocol scheme
Host	example.com	Identifies the destination host
Path	/products	Identifies the requested resource or route
Query	?id=10	Carries additional request parameters

Step 2: The Browser Parses the URL

The browser determines what kind of resource you are requesting.

If you enter:

https://example.com

the browser recognizes:

The HTTPS scheme
The hostname example.com
The default path if none is explicitly specified

The browser then needs to determine where the hostname can be reached.

Step 3: Browser Checks Existing Information

Before contacting a DNS server, a browser and operating system may already have useful information cached.

Depending on the browser and environment, information can come from:

Browser caches
Operating-system DNS caches
Configured DNS resolvers
Existing connections
Other cached networking information

This can reduce the amount of work required for repeated visits.

What Is Caching?

Caching means storing information temporarily so that it can be reused later.

Caching can happen at multiple layers.

Browser Cache
      ↓
Operating System
      ↓
DNS Resolver Cache
      ↓
CDN Cache
      ↓
Origin Server

Not every request uses all these layers.

Step 4: DNS Lookup Begins

If the required DNS information is not already available, the system performs DNS resolution.

DNS stands for Domain Name System.

Its job includes helping map domain names to information used to locate internet services.

Instead of remembering something like:

203.0.113.20

you can type:

example.com

Step 5: DNS Resolver Searches for the Domain

Your device usually communicates with a DNS resolver configured by your network or chosen by you.

A simplified DNS resolution process can involve:

Your Computer
      ↓
DNS Resolver
      ↓
Root DNS Servers
      ↓
TLD DNS Servers
      ↓
Authoritative DNS Server
      ↓
DNS Answer

This is a simplified representation. DNS resolvers use caching, recursive queries and other mechanisms to make resolution efficient.

What Are Root DNS Servers?

Root DNS servers are part of the DNS hierarchy and direct resolvers toward the appropriate top-level-domain infrastructure.

For example, a domain ending in:

.com

belongs to the .com top-level domain.

What Are TLD DNS Servers?

TLD stands for Top-Level Domain.

Examples include:

.com
.org
.net
.in

TLD DNS infrastructure directs resolvers toward authoritative servers for specific domains.

What Is an Authoritative DNS Server?

An authoritative DNS server contains the DNS records for a domain or zone.

It can provide records such as:

A records
AAAA records
CNAME records
MX records
TXT records

What Is an A Record?

An A record maps a hostname to an IPv4 address.

A simplified example is:

example.com
     ↓
203.0.113.20

What Is an AAAA Record?

An AAAA record maps a hostname to an IPv6 address.

For example:

example.com
     ↓
2001:db8::20

Step 6: Browser Gets the Destination Address

After DNS resolution, the browser has the information it needs to attempt communication with the destination service.

It now has to establish an appropriate network connection.

Step 7: The Network Finds a Path

Your computer sends traffic through its local network.

A typical home setup may look like:

Laptop
  ↓
Wi-Fi / Ethernet
  ↓
Home Router
  ↓
ISP
  ↓
Internet
  ↓
Destination Network
  ↓
Server

Traffic may pass through several routers before reaching the destination.

What Is Routing?

Routing is the process of forwarding network traffic between networks using routing information.

A packet can travel through multiple network hops.

Step 8: A Transport Connection Is Established

For many HTTPS connections, TCP has traditionally been an important transport protocol.

With TCP, a connection begins through a process commonly called the TCP three-way handshake.

The simplified sequence is:

Client → SYN → Server

Client ← SYN-ACK ← Server

Client → ACK → Server

This establishes the TCP connection.

Modern web traffic can also use other transport protocols and HTTP versions, such as HTTP/3 over QUIC, so the exact connection process is not always a TCP handshake.

What Is a Port?

A port identifies a logical endpoint associated with a transport-layer service.

HTTPS commonly uses:

TCP 443

HTTP commonly uses:

TCP 80

Services can be configured differently, but these are the standard well-known associations.

Step 9: TLS Handshake for HTTPS

Because our URL begins with https://, the browser establishes a secure TLS session.

At a high level, TLS allows the browser and server to establish cryptographic protections for the connection.

A simplified concept is:

Browser
   ↕
TLS Handshake
   ↕
Server

       ↓

Secure Session

What Does TLS Provide?

TLS is designed to provide properties such as:

Confidentiality
Integrity
Authentication of the server using certificates

What Is a TLS Certificate?

A TLS certificate contains information used to establish trust in the identity of a server for a domain.

The browser checks the certificate chain and other certificate properties according to its security rules.

Step 10: Browser Sends an HTTP Request

Once the appropriate connection is ready, the browser sends an HTTP request.

A simplified request might be:

GET / HTTP/1.1
Host: example.com

Actual browser requests contain many additional headers depending on the browser, page and connection.

What Is an HTTP Request?

An HTTP request contains:

Method
Target
Headers
Optional body

Common HTTP Methods

Method	Typical Purpose
GET	Retrieve a resource
POST	Submit data or request processing
PUT	Replace a resource
PATCH	Partially update a resource
DELETE	Request removal of a resource

What Are HTTP Headers?

HTTP headers carry metadata about the request or response.

Examples include:

Host
User-Agent
Accept
Accept-Encoding
Cookie
Authorization

Different requests contain different headers.

Step 11: Request Reaches the Web Infrastructure

The HTTP request may first reach infrastructure such as:

CDN
Reverse proxy
Load balancer
Web server
Application server

A large website can use several of these components.

Example Infrastructure

Browser
   ↓
CDN
   ↓
Reverse Proxy
   ↓
Load Balancer
   ↓
Application Server
   ↓
Database

Step 12: Server Determines What to Do

Suppose you request:

GET /products/101

The application may:

Identify the requested route.
Validate parameters.
Check authentication if required.
Run business logic.
Query a database.
Prepare the response.

Static Website Example

If the website is static, the server may simply return an existing file.

Request
  ↓
Web Server
  ↓
index.html
  ↓
Response

Dynamic Website Example

A dynamic application may perform additional processing:

Request
  ↓
Backend
  ↓
Database
  ↓
Business Logic
  ↓
HTML / JSON
  ↓
Response

Step 13: Database Query May Happen

Suppose the application needs product information.

The backend might execute a database query such as:

SELECT *
FROM products
WHERE id = 101;

The database returns the matching information, and the backend uses it to construct the response.

Step 14: Server Creates the Response

The server now sends an HTTP response back to the browser.

A simplified response might look like:

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

The response contains:

Status code
Headers
Response body

What Is an HTTP Status Code?

An HTTP status code indicates the result of an HTTP request.

Code	Meaning
200	Success
301	Permanent redirect
302	Temporary redirect
400	Bad request
401	Authentication required or failed
403	Forbidden
404	Not found
500	Internal server error

Step 15: Browser Receives the Response

The browser receives the HTTP response and begins processing its contents.

If the content type is HTML, the browser parses the HTML document.

What Is HTML?

HTML stands for HyperText Markup Language.

It defines the structure of a webpage.

Example:

<h1>Welcome to CodeWithAV</h1>

<p>
Learn programming and technology.
</p>

Step 16: Browser Finds More Resources

The HTML document may reference:

CSS files
JavaScript files
Images
Fonts
Video
Other resources

The browser may then make additional requests.

For example:

GET /style.css
GET /app.js
GET /logo.png
GET /font.woff2

Why Does One Website Make So Many Requests?

A modern webpage is usually made from many individual resources.

Therefore, loading one page can involve many network requests.

Step 17: CSS Is Processed

CSS controls how webpage elements are presented.

For example:

h1 {
    font-size: 32px;
}

.card {
    padding: 20px;
}

The browser combines HTML structure and CSS rules to determine how elements should appear.

Step 18: JavaScript Runs

JavaScript can add behavior and interactivity to the webpage.

For example:

document
    .querySelector("#button")
    .addEventListener("click", () => {
        alert("Hello!");
    });

JavaScript can also make additional network requests.

Step 19: Browser Builds the DOM

The browser creates a DOM (Document Object Model) representation of the HTML.

A simplified structure could look like:

HTML
 |
 +-- HEAD
 |
 +-- BODY
      |
      +-- H1
      |
      +-- P
      |
      +-- BUTTON

JavaScript can interact with this structure.

Step 20: Browser Calculates Layout

The browser determines where elements should appear on the screen.

It considers:

Element dimensions
Margins
Padding
Fonts
Positioning
Responsive rules

Step 21: Browser Paints the Page

The browser converts the calculated layout into visual pixels.

It may then composite different layers before presenting the final result.

A simplified rendering flow is:

HTML
 ↓
DOM
 ↓
CSS
 ↓
Style Calculation
 ↓
Layout
 ↓
Paint
 ↓
Compositing
 ↓
Screen

Step 22: Page Becomes Interactive

Once the relevant resources and scripts have loaded and executed, the user can interact with the page.

For example:

Click buttons
Submit forms
Open menus
Scroll
Search
Load additional content

What Happens When You Click a Button?

Modern websites often respond without a complete page reload.

A simplified process could be:

Click
 ↓
JavaScript Event
 ↓
Fetch / API Request
 ↓
Backend
 ↓
Database
 ↓
JSON Response
 ↓
JavaScript
 ↓
Update UI

What Is AJAX?

AJAX is a historical term for techniques that allow web pages to communicate with servers asynchronously and update parts of a page without requiring a traditional full-page navigation.

Modern applications commonly use the Fetch API and other browser APIs for such communication.

What Is JSON?

JSON stands for JavaScript Object Notation.

It is commonly used for exchanging structured data.

Example:

{
    "name": "Laptop",
    "price": 55000
}

What If the URL Does Not Exist?

If the requested resource does not exist, the server may return:

404 Not Found

The browser may display a custom error page.

What If the Server Has a Problem?

If the server experiences an internal error, it may return:

500 Internal Server Error

The exact status depends on the nature of the failure.

What If DNS Fails?

If the domain cannot be resolved, the browser cannot determine the destination using normal DNS-based resolution.

You may see a browser error indicating a DNS or name-resolution problem.

What If the TLS Certificate Is Invalid?

Modern browsers can warn or block access when a TLS certificate is invalid, expired, incorrectly configured or otherwise fails security checks.

This protects users against certain types of connection problems and attacks.

What If the Server Is Slow?

The page may take longer to load.

Possible causes include:

High network latency
Server processing time
Database queries
Large files
Slow external services
Network congestion

What Is Time to First Byte?

Time to First Byte (TTFB) measures the elapsed time from a request until the first byte of the response is received.

It can be affected by:

DNS time
Connection setup
TLS negotiation
Server processing
Network latency

TTFB is useful, but it is only one part of overall web performance.

What Is Browser Caching?

Browsers can store copies of cacheable resources locally.

For example:

First Visit
   ↓
Download CSS / JS / Images
   ↓
Store Cache

Later Visit
   ↓
Reuse Suitable Cached Resources

This can reduce network requests and improve subsequent page loads.

What Is CDN Caching?

A CDN can cache suitable resources at edge locations closer to users.

For example:

User
 ↓
CDN Edge
 ↓
Cached Image

or

User
 ↓
CDN Edge
 ↓
Origin Server

Whether something can be cached depends on configuration, HTTP caching rules and the type of resource.

What Is a Redirect?

A server can tell the browser that a resource has moved to another location.

For example:

Old URL
  ↓
301 Redirect
  ↓
New URL

The browser then requests the new destination.

Can One URL Cause Multiple Redirects?

Yes.

A poorly configured website can create redirect chains.

For example:

URL A
 ↓
URL B
 ↓
URL C
 ↓
URL D

Multiple unnecessary redirects can increase latency.

What Happens With Cookies?

A website can use cookies to maintain certain client-side state.

For example, an authentication session can involve:

Login Request
    ↓
Server Creates Session
    ↓
Cookie Sent
    ↓
Browser Stores Cookie
    ↓
Future Requests Include Cookie

Cookie behavior is controlled by attributes and browser security policies.

What Is Same-Origin Policy?

The same-origin policy is a fundamental browser security mechanism that restricts how scripts from one origin can interact with resources from another origin.

It helps limit unauthorized access between unrelated websites.

What Is CORS?

CORS stands for Cross-Origin Resource Sharing.

It provides a controlled mechanism through which a server can allow certain cross-origin browser requests.

For example:

Frontend
https://app.example.com

        ↓

API
https://api.example.com

        ↓

CORS Policy

Whether the request is allowed depends on the server's CORS configuration and the browser's rules.

What Happens if JavaScript Calls an API?

A page can make additional requests after loading.

For example:

fetch("/api/users")
    .then(response => response.json())
    .then(data => {
        console.log(data);
    });

This creates another HTTP request.

Complete Example: Opening an Online Store

Suppose you open:

https://store.example.com/products/101

The simplified sequence may be:

Browser parses the URL.
Browser checks available cached information.
DNS resolution determines the destination.
Network traffic travels toward the destination.
A suitable transport connection is established.
TLS secures the HTTPS connection.
Browser sends an HTTP request.
CDN or reverse proxy may receive it.
Backend application processes the request.
Backend may query a database.
Server generates HTML.
HTTP response returns to the browser.
Browser parses HTML.
Browser requests CSS, JavaScript and images.
JavaScript runs.
Browser calculates layout.
Browser paints the page.
User sees the product page.

The Entire Process in One Diagram

User Types URL
       ↓
Browser Parses URL
       ↓
Cache Check
       ↓
DNS Resolution
       ↓
Destination IP
       ↓
Network Routing
       ↓
Transport Connection
       ↓
TLS Handshake
       ↓
HTTP Request
       ↓
CDN / Proxy / Server
       ↓
Backend Processing
       ↓
Database / APIs
       ↓
HTTP Response
       ↓
HTML Parsing
       ↓
CSS + JavaScript + Images
       ↓
DOM + Layout
       ↓
Paint + Composite
       ↓
Interactive Webpage

Why Understanding This Process Matters

If you want to become a web developer, networking engineer or cybersecurity professional, understanding what happens after you enter a URL is extremely useful.

It connects many concepts:

DNS
IP addresses
Routing
TCP
QUIC
TLS
HTTP
Servers
Databases
HTML
CSS
JavaScript

How Developers Can Observe This Process

You do not need to imagine everything happening in the background. Your browser can show you many of these details.

Open Developer Tools → Network.

You can inspect:

Request URLs
HTTP methods
Status codes
Response headers
Request headers
Timing information
Transferred data
Cached resources

Try This Practical Exercise

Open any website and inspect its Network panel.

Look for:

HTML
CSS
JavaScript
Images
Fonts
API Requests
Redirects
Status Codes

Then refresh the page and compare the requests.

You may notice that some resources are loaded differently because of caching or connection reuse.

Useful Commands for Beginners

You can also learn networking from the command line.

Check DNS

Windows:

nslookup example.com

Linux/macOS systems may support:

dig example.com

Test Network Reachability

ping example.com

Remember that a host can be reachable even when it does not respond to ICMP echo requests.

Inspect the Network Path

Windows:

tracert example.com

Linux/macOS commonly use:

traceroute example.com

Common Errors You May See

Problem	Possible Area
DNS error	Domain resolution
Connection refused	Destination service or firewall
Timeout	Network, routing or server issue
404	Requested resource not found
403	Access forbidden
500	Server-side error
TLS warning	Certificate or TLS configuration problem

Final Cheat Sheet

Stage	Main Technology / Concept
URL Parsing	Browser / URL syntax
Name Resolution	DNS
Addressing	IP
Routing	Routers / IP routing
Transport	TCP, UDP, QUIC
Security	TLS
Web Communication	HTTP / HTTPS
Application	Backend / APIs / Database
Page Processing	HTML / CSS / JavaScript
Display	Browser rendering

Final Thoughts

Typing a URL looks like a simple action, but it starts a chain of operations across browsers, DNS systems, networks, servers and rendering engines.

The simplified sequence is:

URL
 ↓
DNS
 ↓
IP
 ↓
Network
 ↓
Transport
 ↓
TLS
 ↓
HTTP
 ↓
Server
 ↓
Response
 ↓
Browser
 ↓
Rendering

Once you understand this process, many web-development and networking concepts become easier to understand because you can see how they connect together.

For beginners, one of the best exercises is to open your browser's Network tab and inspect what actually happens when you load a page. Look at the request URLs, status codes, timing, response headers and downloaded resources.

What appears to be “opening a website” is actually a carefully coordinated conversation between many software and network components.

Frequently Asked Questions

What happens first when you type a URL?

The browser parses the URL and determines what scheme and host are being requested. It may also use cached information before performing additional network operations.

What is the first network service usually involved?

For a normal domain-based web request, DNS resolution may be needed to obtain information used to locate the destination.

Why does the browser need DNS?

DNS allows applications to use human-readable domain names while networking systems use IP-based addressing to communicate across networks.

Does every website use TCP?

No. Traditional HTTP/1.1 and HTTP/2 connections commonly use TCP, while HTTP/3 uses QUIC, which operates over UDP.

Why does HTTPS use TLS?

TLS provides cryptographic protections such as confidentiality and integrity and allows the browser to authenticate the server through certificates.

What is the difference between HTTP and HTTPS?

HTTPS is HTTP communicated over TLS, providing security protections for the connection.

What happens after the browser sends an HTTP request?

The request may pass through a CDN, reverse proxy, load balancer or web server before reaching application logic. The backend may then access databases or other services and generate the response.

Why does a webpage make many requests?

A webpage can require HTML, CSS, JavaScript, images, fonts and API data, so the browser may request many separate resources.

What happens when a website returns 404?

A 404 status generally means that the requested resource was not found at the requested location.

What happens when DNS fails?

The browser may be unable to determine the destination address and can show a DNS or name-resolution error.

What is browser caching?

Browser caching stores suitable resources locally so they can sometimes be reused on later requests without downloading them again.

What is a CDN?

A Content Delivery Network distributes suitable content through geographically distributed infrastructure and can serve cached resources closer to users.

What should I learn after understanding URL processing?

Continue with DNS, IP addressing, TCP/UDP/QUIC, HTTP/HTTPS, web servers, APIs, databases, browser rendering and web security.

Useful Resources

MDN HTTP Documentation
MDN Web Development Learning
ICANN
Internet Engineering Task Force
Cloudflare Learning – DNS

What Happens When You Type a URL? Step-by-Step Browser to Server Explained

What Happens When You Type a URL in Your Browser?

Step 1: You Enter a URL

Breaking Down a URL

Step 2: The Browser Parses the URL

Step 3: Browser Checks Existing Information

What Is Caching?

Step 4: DNS Lookup Begins

Step 5: DNS Resolver Searches for the Domain

What Are Root DNS Servers?

What Are TLD DNS Servers?

What Is an Authoritative DNS Server?

What Is an A Record?

What Is an AAAA Record?

Step 6: Browser Gets the Destination Address

Step 7: The Network Finds a Path

What Is Routing?

Step 8: A Transport Connection Is Established

What Is a Port?

Step 9: TLS Handshake for HTTPS

What Does TLS Provide?

What Is a TLS Certificate?

Step 10: Browser Sends an HTTP Request

What Is an HTTP Request?

Common HTTP Methods

What Are HTTP Headers?

Step 11: Request Reaches the Web Infrastructure

Example Infrastructure

Step 12: Server Determines What to Do

Static Website Example

Dynamic Website Example

Step 13: Database Query May Happen

Step 14: Server Creates the Response

What Is an HTTP Status Code?

Step 15: Browser Receives the Response

What Is HTML?

Step 16: Browser Finds More Resources

Why Does One Website Make So Many Requests?

Step 17: CSS Is Processed

Step 18: JavaScript Runs

Step 19: Browser Builds the DOM

Step 20: Browser Calculates Layout

Step 21: Browser Paints the Page

Step 22: Page Becomes Interactive

What Happens When You Click a Button?

What Is AJAX?

What Is JSON?

What If the URL Does Not Exist?

What If the Server Has a Problem?

What If DNS Fails?

What If the TLS Certificate Is Invalid?

What If the Server Is Slow?

What Is Time to First Byte?

What Is Browser Caching?

What Is CDN Caching?

What Is a Redirect?

Can One URL Cause Multiple Redirects?

What Happens With Cookies?

What Is Same-Origin Policy?

What Is CORS?

What Happens if JavaScript Calls an API?

Complete Example: Opening an Online Store

The Entire Process in One Diagram

Why Understanding This Process Matters

How Developers Can Observe This Process

Try This Practical Exercise

Useful Commands for Beginners

Check DNS

Test Network Reachability

Inspect the Network Path

Common Errors You May See

Final Cheat Sheet

Final Thoughts

Frequently Asked Questions

What happens first when you type a URL?

What is the first network service usually involved?

Why does the browser need DNS?

Does every website use TCP?

Why does HTTPS use TLS?

What is the difference between HTTP and HTTPS?