How Web Pages Work – Surfing Explained

You and me both surf on the Web every day. Or at least I do. I used the Web for the first time around 20 years ago. Yet, I didn’t know the technical details of how web pages work exactly until fairly recently. There’s a bunch of stuff happening under the surface that most of us aren’t too conscious about.

Since I think it’s cool to know how it all works, I’ll be taking you through the main components of what makes the Web work in this post. Whether you’re thinking about launching your own website or just browsing through those of other people, this post is for you!

You’re using a web browser right now. So what’s really happening before this text and the beautiful aquatic image above appeared on your screen? To give a bit of an explanation, this post will answer the following questions:

  1. What is a website?
  2. What is a server?
  3. What is a domain name?
  4. What is a browser?

Basically, the Internet consists of computers all around the planet that connect to each other. All the web pages you visit are on the World Wide Web, or the Web.

Hence the Web uses the Internet as a platform to power itself. In other words, you access the Web via the Internet, even though the two are often used interchangeably.

See also: Learning Computer Science Basics Before Coding


1. What is a website?

Simply put, each website in the Web is a bunch of files and documents that sit nicely together in one pot.

All these resources can have different types, such as text, image, or video. The different files also link to each other with hyperlinks, making it easy to navigate from one page to the next.

We all visit websites because we’re curious what’s on the site, right? For us to see any content in the first place, hard-working web developers create the files and documents for the website. They (including myself and perhaps you too) use different programming languages for this.

The most common languages used to create websites are Hyper Text Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript.

Each of them affects how web pages work and look.

In short: HTML creates the content with text and media. CSS makes it all look beautiful and more user-friendly. Finally, JavaScript makes the content more interactive and dynamic.

— See also: How to Choose Your First Programming Language

Get free stuff and updates to your inbox!

Subscribe to my blog and get cool free stuff and updates about WordPress and coding to your email inbox!
I take your privacy seriously. No spam, ever.

Ok so it’s cool to have a nice website to share with others. But how can you make your new web page available for everyone using the Internet? The files need to be stored on a server to be accessible.

Laptop with code

2. What is a server?

Now the web page files need to be stored somewhere.

One option would be to store all the files on your own computer. However, then you would have to run around the city with your computer to show everyone what a cool website you have.

While I’m writing this, Google does 58,000 searches a second. Hence, you’d have to do quite a bit of running to share your website on your computer like Google does.

The other, more efficient and physically less exhausting solution is to find a web-hosting server. A server is like a landlord for your website. When you need space for your documents, you rent it at a server for a given period of time.

The web-hosting server not only stores and hosts the files. It also knows what to do whenever someone wants to visit the website. It makes your website accessible for everyone using the Web.

When a website is visited, the server makes sure that the correct files are retrieved from the storage space. After that, they are sent using the right transfer method to the website visitor to see. Hence, the surfer image on top of this site is stored on a server I rented some space at, and retrieved to be shown to you when you wish to visit this webpage.

For everyone to be able to find your website, it obviously needs a name, a domain name to be exact. Not sure what a domain name is? No worries, just keep reading!

Get free stuff and updates to your inbox!

Subscribe to my blog and get cool free stuff and updates about WordPress and coding to your email inbox!
I take your privacy seriously. No spam, ever.

3: What is a domain name?

A domain name defines the location of a website on the Internet.

When you wish to visit a website, the domain name tell where to look for the files needed to display the website you’re visiting. Think of it as a phone number in the phone book. However, a domain name doesn’t consist of numbers: a lovely example of a domain name is “www.mikkegoes.com“.

As with phone numbers, domain names need to be registered with the operator. For websites, the operator is a registrar. Once registered, the domain name ends up in the Domain Name System (DNS).

The DNS knows exactly where to look for a domain name you type into your web browser. It works its magic and translates the URL into an IP address.

The IP address in turn is more like a phone number for the website you want to visit – even more so than the domain name like I suggested before. It defines the location of the server that is hosting the website and its content. It consists of four numeric values, each separated with a dot. The four figures each vary between 0 and 255.

Thus, having the DNS saves us all from having to remember the IP addresses for our favorite websites.

4: What is a web browser?

Your web browser is the wonderful piece of software that allows you to see what a website contains. It’s capable of downloading the contents and displaying them to the user. To you, that is!

Let’s suppose you want to visit a website. You know the web address for the site and are eager to type it into your web browser. That address could just be the domain name. It could also be a more specific address, perhaps for fetching just one image from the Web. Each resource has its own unique address, the Uniform Resource Locator (URL). The URL contains the domain name, too.

When you hit “Enter”, it’s time for the DNS to do its job and transform the URL into an IP address. The IP address locates the right web server for you, which then processes your request. It uses server-side programming languages to do all this and then sends the correct content and files back to your IP address. Finally, your web browser renders the site’s content onto your display.

Great success!

Coffee and laptop


Putting it all together

Considering everything affecting how web pages work, it’s quite a bit that goes on behind the scenes. It’s good to know what happens in the background when you’re waiting for a page to load. This can make it easier for you to make good decisions about the structure and content of your web pages in the future.

Or perhaps you’re not even interested in launching a website. In that case it could simply help you understand how web pages work in general.

I am still often amazed at how quickly a website appears rendered on your screen when you type in the web address and hit “Enter”.

To sum it all up, this is what happens exactly, all in the blink of an eye:

  1. The DNS changes the URL into an IP address first.
  2. Then the request finds its way to the correct web-hosting server.
  3. After that, the server software retrieves the correct files for the website from their storage.
  4. The server then sends the content back to your IP address.
  5. Finally, your web browser receives the content and displays it to you.

Pretty great, huh?

Happy surfing!

As always, please share the post if you enjoyed it! Feel free to share your thoughts in the comments below. If you feel like I’ve forgotten something important about how web pages work, please let me know!

Toodles!

Get free stuff and updates to your inbox!

Subscribe to my blog and get cool free stuff and updates about WordPress and coding to your email inbox!
I take your privacy seriously. No spam, ever.

<< Previous Post  Next Post >>

  • Hudayfi Ahmed

    I loved the content of this article, but I wish the text was a bit darker; I’t was kinda hard to read… thanks anyway.

    • Mikke Goes

      Thanks for the feedback, glad to hear you liked the content! I’ll work on the colors so it’s easier to read 🙂