chrome web browser

How Web Browser Works – Unlock Software You Use The Most

Wikipedia tells, more than 4.3 billion people use a web browser which is about 55% – more than half – of the world’s population. They use this software to access information on the Internet, which has literally everything available to satisfy a person’s data needs.

As a web browser is such a vastly used piece of software, a basic understanding of how it works, to use it effectively, securely and getting the required information quickly is paramount.

In this post, I’ll try to explain different topics including:

  • How a web browser works
  • Its different options and features
  • Terminology related to a browser
  • Popular browsers with their market share
  • How to use it effectively

Ready to explore this popular software? Let’s get into the details……

To have an overview of what’s covered and navigate quickly to a topic of your interest, the following table of contents will be helpful:

What Is A Web Browser

The function of a web browser is to fetch information from a web server on a network, especially the Internet. When a person requests to access a website, the web browser makes contact with the particular web server, retrieves and then displays the web page on the user’s device – PC or smartphone, etc.

It is basically a client/server model: browser being the client that runs on a user’s computer or an Internet-enabled device and contacts the web server to get the required information.

History Of Web Browsers

For you to have a better understanding of the web browser’s development through the years, let’s turn back the clock. The following web browsers list shows the timeline from the first web browser to present-day modern browsers:

  • WorldWideWeb, the first web browser, was created in 1990.
  • Mosaic, the world’s first popular browser, was released in 1993. Its graphical interface made the Internet more easily accessible.
  • Netscape Navigator, once the most popular browser, appeared in 1994. It was developed by Netscape.
  • Internet Explorer by Microsoft – a very well-known web browser – was made available in 1995. It edged Netscape as it was free and bundled with Windows operating system by Microsoft; reaching a market share of 95% in 2002.
  • Opera web browser was released in 1996 by Opera Software.
  • Apple introduced the Safari web browser in 2003. It is used only on Apple’s devices.
  • Firefox, an open-source browser software, was released in 2004 by Mozilla. Netscape launched Mozilla Foundation to create Firefox in order to compete with Internet Explorer.
  • Google Chrome – currently the most popular and dominant web browser – debuted in 2008. It was a huge success and gradually took market share from IE (Internet Explorer). It gained its dominant position in 2012 and still holds on to it.
  • Microsoft Edge, another web browser from Microsoft, was released in 2015 for Windows 10. It replaced IE as the default browser on the latest OS from Microsoft. As a result, IE has been discontinued.

All of these major web browsers are also available for mobile devices like smartphones.

Think of web browser as a window into the fantastic world of the Internet.

Tweet Now

Terminology Related To A Web Browser

You should understand the different terms mentioned in the rest of the post. Following details will be helpful:

HTTP, HTTPS & FTP

Each URL contains either “http”, “https” or in some cases “ftp”.

HTTP stands for “Hypertext Transfer Protocol”. It is the standard protocol (communication method) used to send and receive information on a network like an Intranet (local network) or the Internet.

In the case of HTTPS, the additional “s” indicates that the communication between the browser and the web server is secured through encryption. Now many of the sites are using https in their URL.

FTP means “File Transfer Protocol”. It is a standard protocol used to transfer files on a network.

http request

HTTP Request - Source: PCMag

Hyperlink

Hyperlink refers to a text or an image that when clicked, takes the user either to another part of the same page, another page of the same web site or to another completely different website. Each hyperlink contains a URL.

Hypertext is text with hyperlinks. Anchor text is the text that is linked from.

Just check beneath the picture above, word in red is a hyperlink and anchor text is PCMag.

DNS

Domain Name System (DNS) is a server that converts alphabetical names of web sites into numerical IP addresses – network address of a resource on a network like the Internet.

When a user enters a URL like www.example.com into the address bar of a web browser, the DNS server returns the IP address of that site. Without IP addresses, no information can be sent or retrieved on a network.

Do you know why DNS is required?

DNS was invented for people to avoid remembering and typing lengthy IP addresses, which is very difficult. Instead, user-friendly alphabetical URLs are much easier for them to remember and use.

A made-up example is when DNS converts www.example.com into IP address 204.0.8.51.

HTML

HTML is Hypertext Markup Language. It is the standard markup language used to design web pages that can be displayed in a web browser and defines its content and structure. Each web page contains HTML codes that define page layout, fonts, text color, hyperlinks, images, videos, blinking text, forms, and table of contents etc.

It is assisted by Cascading Style Sheets (CSS) and scripting language like JavaScript, which are also added as code within HTML.

html code

HTML Code

JavaScript (JS)

JavaScript is a widely used programming language that can be used within the HTML of web pages. It is one of the core technologies of the World Wide Web (WWW) along with HTML and CSS.

Used by web applications and most of the sites, every major browser has a separate JavaScript Engine to take care of this important language.

It enables interactive functions to be added to otherwise static web pages. These include page elements like navigation buttons and dropdown menus, displaying a data entry form and validate input. It also causes the color of buttons to be changed when the mouse rolls over them.

All the interactive elements require JavaScript.  

Cascading Style Sheets (CSS)  

CSS is a style sheet language responsible for the appearance and layout of a web page written in a markup language like HTML. It is a cornerstone technology of the World Wide Web.

It provides a lot of layout settings and determines the style, appearance, and animation of a web page’s content. It includes things like font, font size, white space, colors of text, text alignment, heading styles, vertical text, borders, and backgrounds etc.

Just to give an example:

Following CSS code makes a heading blue, with font size 24px and text color black:

.post-single-content h2 {
    font-size: 24px;
    background: #83d2ff;
    padding: 5px 10px;
    color: black;
}

Document Object Model (DOM)

DOM is the standard way to describe a web page and other elements like images, text blocks, buttons, lists etc. It treats HTML document as a tree structure where each node is an object representing a part of the document.

DOM is used by browsers to render a HTML document after it is loaded. The browser engine is used to parse or break HTML into a DOM.

You can get an idea about DOM from the video about the rendering of a web page a bit later in this post.

Now, zoom in on the basics of how this amazing software works:

How A Web Browser Works

As mentioned above, the main function of a web browser is to retrieve information from a web server, located on a network like the Internet, and display it properly on people’s devices.

How it gets done is explained below, stepwise:

  • It begins when a user enters a Uniform Resource Locator i.e. URL into the browser’s address bar. URL is the address of a resource like a website on the Internet. An example of a URL is https://plexnof.com.
  • The browser looks at the URL in two sections. First is the http:// or https:// part. It basically relates to the protocol used for transferring and receiving the information on the Internet.  
  • After having the protocol, the browser now knows how to transmit information and looks at the remaining part of the URL i.e. plexnof.com – the domain name.
  • The web browser then forwards that request to the DNS server for resolving the domain name “plexnof.com” into a specific IP address of that site’s web server.
  • After domain name resolution, the request is forwarded to the particular web server hosting plexnof.com.
  • The web server returns the web page to the browser in response to that request.
  • The web browser receives the web page usually written in HTML (Hypertext Markup Language) code from the server.
  • After receiving the page, the browser's rendering engine translates the HTML code and then displays it on the person’s PC or smartphone. HTML can include videos and images in addition to text.

You might be surprised:

All of this process happens in the background, just taking a few seconds to complete!

Rendering Of A Web Page

Have you ever thought about what goes on behind the scenes when a web site is requested, and it is displayed on your screen within seconds?

A browser engine – also called rendering engine – is the main software component of a web browser. It is responsible for interpreting HTML and other elements – JavaScript, CSS etc. – and presenting them collectively as an interactive web page on a user’s browser.  It can also be thought of as a painter.

Rendering or drawing of a web page is explained below, followed by a video to further make it clear:

  • After receiving the request from a user, the browser contacts the network layer (http or https) to contact the web server for data.
  • The browser breaks up the HTML code received from the web server through the network layer. HTML contains the text and content structure like headings & paragraphs mentioned. It may also have hyperlinks and CSS.
  • Next, web browser checks and fetches the media content linked through hyperlinks, like photos, videos etc.
  • After that browser asks for any cascading style sheets – CSS – as mentioned in HTML from the web server.
  • JavaScript – JS – is the next component fetched from the web server(s) required by a web page. Web browser brings all of them to complete a web page.  JavaScript can’t be interpreted by a web browser so a JavaScript interpreter is used by every browser to translate JS.
  • Now, all of the HTML, media content, CSS and JS received is assembled by the browser into a document and stores it in its internal data storage; which contains cookies and other data. That document is used to paint the web page on the user’s screen and is also published as a Document Object Model i.e. DOM.
  • Next, after everything is ready, java scripts run using the DOM to manipulate the web page, add interactive elements and make the whole page more presentable.
  • This completes the process and the browser marks the page as interactive, allowing the user to interact with the components on the web page.

The end result is a smooth, quick & interactive browsing experience!

Browser engine not only renders but also implements security policy, navigation through hyperlinks and data submitted through forms. 

Different Browser Engines

Browsers use different browsing engines as listed below, which sometimes result in web pages looking a bit different in separate web browsers:

  • Gecko browser engine is used by Mozilla Firefox.
  • Apple’s Safari uses WebKit engine.
  • Google Chrome has Blink browser engine for page rendering.
  • Microsoft Edge also uses the Blink engine.

What are the important features of a web browser? Extend your reading to the next section.

Options & Features Of Web Browser

Note: The following pertains mainly to PC versions of web browsers. Browsers on mobile devices have almost the same options & features but some of them may differ or not available due to the mobile versions.

Even though there are different types of web browsers available like Chrome, Firefox, Edge etc. they have more or less the same features and settings needed to use and configure a browser. Name and placement may vary but the function is the same.

Note: As Google Chrome is the most popular web browser in the world, most of the settings and screenshots are related to it. Please check the respective setting in others if used.

Configuration Options Of Web Browser

Browsers get customized via a built-in menu. Name of main preferences in a menu can be different browser wise like Settings, Options or Preferences.

Main options of the menu and settings include the following:

  • Settings a home page
  • Privacy settings
  • Check & clear history, cookies, cache and others
  • Setting password save preferences
  • Change default search engine
  • Proxy settings
  • Downloads
  • Bookmarks options like “show bookmark bar” & “bookmark manager”
  • Zoom
  • Print
  • Help
menu chrome browser

Chrome Menu - Click on three dots top right

edge settings

Microsoft Edge Settings

Features Of Web Browser

Some of the browser’s features are explained below that are important for the sake of security, performance and keeping things organized:

Common Interface Options

All browsers have:

  • Back and forward buttons to go back to the previous page or forward to the next one
  • Refresh or reload button to refresh the current page
  • Stop button to stop loading a page
  • Home page button to go quickly to a browser’s homepage
  • Address bar/search bar to input the URL to open the desired site. It can also be used to search for something on the Internet.

Privacy

Privacy is mainly related to the cookie settings of a web browser. Browsers by default store and use cookies, sent from sites visited by you regularly.

Cookies store information like login credentials, site preferences like push notifications and track user behavior. Browsers also give the option to clear cookies and site data when exiting a browser.

chrome cookie settings

Do you take security seriously?

Security

As web browsers are a popular target for hackers to steal information, security is a very crucial aspect of this software. Browser vendors regularly release patches and updates to remove security loopholes.

It is strongly recommended to keep your browser software updated by applying those patches. In Chrome you can check and apply those patches by using the options as written below:

Main Menu > Help > About Google Chrome

The resulting screen will show if a patch is pending and will update Chrome if it is. Otherwise, Google Chrome is up to date message will appear:

chrome patching

In addition to patching your browser software regularly, other strong recommendations include using good antivirus software on your PC/mobile and avoiding malicious sites by keeping an eye on the reputation of those sites.

I’m using Avast antivirus to get protection for my PC and browser also as it checks the authenticity of a site also as shown below:

avast safe website

Avast’s free version is good but its paid versions provide a lot of additional features: protection from Ransomware, firewall, webcam shield, sensitive data shield etc.

Tabs

All types of web browsers now use tabbed browsing to open multiple sites in a single browser window instead of having multiple windows open. This avoids moving between different browsers windows and saves a lot of time.

You can open a new tab by clicking on + sign next to the right most tab.

Bookmarks

Also called Favorites in some browsers, bookmarks are a popular way to save preferred sites for visiting them later on.

edge favorites

Microsoft Edge Favorites

Private Browsing

It is a feature that doesn’t save history, cookies, search and form data so that other people who use the same device can’t see the activity you’ve done.

You can open it by going to the menu of any browser and clicking either New incognito window or New private window.

Remember that private browsing is not hidden from the sites you visit, your ISP and your employer.  

firefox private mode

Cache

Browsers use cache to store data of visited sites on the storage of computer or mobile device in order to quickly retrieve and display them later on when requested. This data includes web pages, images, and files etc.

It also saves bandwidth by serving the page from the local system instead of sending it over the network like the Internet!

It can also contain two-factor authentication (2FA) data, like code received on a mobile device for sites that allow it like in case of a Google account.

Clear Browsing Data

Browsers save all info like sites visited, cookies, cache, passwords, form data, download history etc. All of these can be cleared after some time in case their data becomes huge.

In Chrome, go to history by using Ctrl+H. On history screen, click Clear Browsing Data in the left-hand column. It will give options to clear required data as shown below:

clear chrome browsing data

Extensions

Every major browser allows users to add extensions for additional features and further customization. These include extensions for antivirus, password manager, proofreading (for example Grammarly), ad blocking etc.

But you need to be careful!

There are a lot of extensions available like Chrome has thousands of them, but you need to check while selecting which ones to use. The reason is that these extensions have access to sites that are visited, and sensitive data like browser’s history as well. As a result, there have been cases of malware infection.

Keep an eye on extensions installed in your browser from time to time in order to make sure that only the required ones are there. You can open it in Chrome by:

Main Menu > More Tools > Extensions

google chrome extensions

To add new extensions or themes, open Chrome web store from extensions page or open it directly.

Note: Chrome and other browsers don’t support extensions on their mobile versions. Only Firefox has support for extensions on mobile. The absence of extensions on mobile can be fulfilled by respective apps of that particular feature. For example apps for password managers, antivirus, proofreaders and ad blockers are available in respective app stores of Google and Apple.

Popular Web Browsers & Market Share

There are different web browsers available for users to choose the one they like.

Market Share

Which browser is the most popular?

The popularity of a browser is determined by its simplicity, ease of use, security, and speed at which it delivers web pages. Considering these factors, following table shows five top most desktop browsers, share wise:

Web Browser

Market Share

Google Chrome

67.3%

Mozilla Firefox          

9.08%

Microsoft Internet Explorer

7.5%

Microsoft Edge

5.46%

Apple Safari

3.92%

These statistics have been taken from NetMarketShare

You can bookmark and go to this site for not only getting browser market share but operating systems, search engines and devices usage as well! It has filters to sort results according to time and device.

Google Chrome is the most popular web browser by a big margin.

Click to Tweet

All of these web browsers can be downloaded free from their respective sites.

Tip: You can carry your favorite web browser as a portable application on a USBdevice like a flash drive or portable hard drive. This way you can use it on any PC without the need to install it.

You can get portable web browsers from PortableApps.com

Just download the portable application from this site and install it once. This will download all files in a single folder, which will contain all the required files to run the software.

Copy that folder to a USB drive, double click the .exe file to launch the application on any Windows PC!

Effective Use Of A Web Browser

Keep Everything Synchronized

With Google account, you can keep everything synchronized with every device that you use like PCs, smartphones, tablets etc.

These include Chrome bookmarks, history, passwords, extensions and auto-fill form data, preferences, themes etc.

What’s the bottom line?

You can take your whole browsing experience along with just a Google account!

Make sure not to sync your form data & passwords on a shared computer. Also, always log out of your Google account when you are done using a computer.

First, you need to log in with your Google account on every computer and device that needs to remain synchronized.

You can stop synchronizing when you want and can also choose what to synchronize. Just open Settings from Chrome menu; here you will see the option to Turn off sync in order to synchronize nothing. Click on Sync and Google Services, and then Manage Sync. The resulting screen will show which components can sync with the option to enable/disable them. It is shown below:

chrome manage sync

I use this to sync my home PC, laptop and smartphone to keep different things updated, whenever I change them on any device.

Firefox, Edge, and Safari also provide the same feature for synchronization through their respective login accounts.

Manage Bookmarks/Favorites

Bookmarks or Favorites are a great way to save your preferred web sites that you visit regularly. Instead of typing their addresses every time, bookmarks provide convenience by just clicking the name of the site to access it.

I use bookmarks extensively in Chrome to keep all of my sites organized so that I can access them without any delay. Their effective use is explained below:

Add New Bookmark

You can bookmark any site that you want; first, open it and then click the star on the right most side as shown in the picture below. It will display a box with options to edit the name of the bookmark and choose where to save it. Click Done when finished. The star color will be changed to blue. This will save the site as a bookmark.

chrome bookmark

Display Bookmarks Bar

Display the bookmarks bar by going to the menu of Chrome > Bookmarks and then click on Show bookmark bar. It will display the bookmarks bar on top of your browser window under the address bar, with all the bookmarks that you have saved.

This way you can instantly access the sites instead of going to bookmarks sub-menu every time!

Add New Folder

Create a folder by opening Bookmark manager from the bookmarks sub-menu. Here click on three dots on the right-hand side and click Add new folder. This will create a new folder in bookmarks. Use folders to group similar sites like webmail sites or frequently accessed sites. Folders will display sites as a dropdown menu.  

Bookmark bar with bookmarks and folders (yellow icons) are shown in the screenshot below:

chrome bookmarks bar

You can see how I have arranged sites that I use on a daily basis here with folders. For example, folders like “Tennis”, “Webmail” and “FA” (frequently accessed) contain sites that I am more interested in.

Additional Bookmarks Tips

Double arrows show up on the right most side if there are more bookmarks saved. Click on these arrows to view them.

Bookmark manager can be used to drag and drop bookmarks, manage folders etc. “Other bookmarks” in the bookmark manager is used to add bookmarks not needed on the bookmark bar.

Use it because:

You can also arrange sites as I’ve explained to save time and become more productive.

Improve Security

Online security has become extremely important in the wake of increased hacking, malware, and malicious sites. Remaining secure while browsing the Web must be assured by us.

The browser that we use should be secure enough not to share our personal information and protect us if we come across a malicious site.

I have already mentioned about security in this post. To sum up all these security tips, I’m mentioning them point wise:

Keep Browser Updated

First, do keep your browser updated with the latest version which includes the latest bug fixes and security patches. Chrome updates itself in the background but you keep on checking it regularly by following the procedure here

You can judge its importance by reading: Google fixed a bug in its browser

Use Good Antivirus

Second, use good antivirus software. Read about it in the earlier section of this post. 

Safe Browsing

Third, use safe browsing option. In Chrome, there is an option for it which will warn you in case of a phishing site or if the site contains malware. It is enabled by default but make sure to check it by going to settings in the Chrome menu. Click on Sync and Google Services and scroll down a bit to see this option:

chrome safe browsing

Want to know the best part?

Google has used its search engine prowess to create its own Safe Browsing technology. Other browsers do provide such safeguards, but they can’t compete with Google’s huge and constantly updated database of sites.

Sandboxing

Sandboxing is a technical term which means to separate a process or an application in a test environment to check how it functions. 

Chrome secures your browsing experience by restricting browsing processes from accessing critical system data through sandboxing. Every web page and extension in a browser is treated as a separate process by Chrome.

To make it easy to understand, Chrome restricts these processes to access important data like files and registry keys on your computer. So sandboxing of Chrome helps to block Web pages that try to install malware, obtain personal information or data from your system. It also prevents a web page open in one tab from affecting other tabs.

Don’t you think it is a very effective security feature?

You can check if it is enabled by going to Settings in Chrome and search for Site Settings. There check for option Unsandboxed plugin access. Open it and make sure it is enabled.

chrome sandboxing

Tips For Better Browsing

Stop Distracting Audio

It becomes very awkward when suddenly one of the tabs start playing audio due to an auto-playing video or advert. You can make it quiet by right-clicking on the problematic tab and choosing Mute Site (Chrome), Mute Tab (Firefox & Edge), and clicking the speaker icon on the right-hand side of the address bar (Safari).

chrome mute site

Open Multiple Sites On Startup

Don’t just stick to a blank tab page after opening Chrome because you can set your favorites sites to open at once.

In Chrome, you can open multiple pages on startup – like a news site, Twitter etc.

Just go to Menu > Settings > On Startup and select Open a specific page or set of pages to enter your URLs. You can also choose to pick up where you left off in your last session.

chrome startup pages

Reduce Costs By Saving Data

On your Android smartphone, if you use Chrome, you can get compressed page data by using a special “Lite mode”. It is helpful if you have an unreliable web connection or a narrow cellular data plan.

Go to Menu (three dots top right > Settings > Lite mode and enable it if it’s not.  You can get an idea about its benefits from pics below.

chrome lite mode disabled
chrome lite mode enabled

Quickly Move Between Tabs

Instead of tapping the square tabs button in Chrome (Android) and iOS to switch tabs, just swipe them left or right on the address bar at top of the screen. This way you can swiftly access them one by one in sequence.  

Close Tabs You're Not Using To Reduce Clutter

If you have multiple tabs open and want to retain only one or a few of them, just right click on the tab that you want to only keep or on the tab that you want but close all tabs to its right. Resulting options will enable you to do that!

chrome close tabs

Duplicate A Tab

Duplication of a tab is useful in case you want to check or compare something in another section of the same web page while leaving the current one as it is. This is helpful if you don’t want to scroll again to the point on the current tab where you left. Just do your work and close the duplicate one.

Another use is to duplicate the bookmarks manager tab in Chrome. You can do it to manage bookmarks like drag and drop from one tab to another if doing it in the same one is not easy.

If you want to do something on a site but are unsure about what will happen and don’t want to disrupt your current tab, opening a duplicate tab for that purpose can be helpful.

Duplicate a tab by right-clicking on the subject tab and select Duplicate from the resulting pop-up.

chrome duplicate tab

Search Smartly

Whenever you are browsing the web and come across a word(s) or terminology that you want to know about or get more details, just highlight and right-click it. Resulting pop-up menu will give an option to search it in the default search engine set for Chrome or Firefox.

This way you don’t need to open a separate tab and search your required info!

Recover Accidentally Closed Tabs

Instead of regretting and going to history for a tab closed by mistake, Chrome forgives by giving an option to easily reopen it. Just right click on blank space to the right of an open tab and choose to Reopen closed tab. It will show up again. You can also do it by pressing Control-Shift-T (Chrome) & Command-Shift-T (Mac).

Keep on repeating it if you want to reopen the previous tabs also!

chrome reopen closed tab

Quickly Add A Site To Bookmarks Bar

If you come across a site that you want to access again and again, just click the icon – usually a lock – on the left of its URL and drag it to the bookmarks bar.

It will be saved there for instant opening!

Add Site Link To The Desktop

To add a site link to your desktop for later use, go to Chrome menu > More tools > Create shortcut.., while remaining on that site. In the next window, change the name if desired and click Create.

An icon will be placed on your desktop to click and open that site from there.

Autofill For Easier Shopping & Personal Info

If you don’t want to fill in your payment or personal info every time while shopping online or filling up any other form, Chrome can make it convenient.

Go to Settings in Chrome and look for Payment Methods and Addresses options near the top.

Here, in these options, you can save credit cards, shipping addresses, phone numbers, and email addresses. Whenever you come across a form to purchase something or fill other info, a dropdown list will be available to choose from.

Good time saver!

Note: Don’t worry, you still have to fill in your credit card’s CVC number.

chrome payment methods

Final Thoughts

In this post, I tried to cover all the major aspects of a web browser that I can think of. Web browsers play an important role in our quest for knowledge, and help us to do many things like online shopping, watching videos, playing games, following sports, social media, checking email among many others. Therefore, in my opinion, a basic understanding of this important software is crucial.

Please share your inputs through comments to suggest any additional/missing information, valuable tips etc. or ask any questions. That can make this post more informative as there is always room for improvement.

If you liked this post and found it valuable, then please subscribe to this blog. You will keep on getting posts like this in your inbox whenever there is a new addition to this blog.

Share Your Thoughts

Comments are moderated and will be posted only if they are on-topic, useful and not abusive. For more information, please see our Comments Policy.

7 Shares
Tweet1
Share6
Share
WhatsApp