How does Web work? How does web display HTML code?

Birat Rai
3 min readJan 20, 2018
Photo Source

What is Web?

The web is comprised of 3 protocols:

Photo Source

Simply understood as web address.

It is a reference to a web resource that specifies its location on the web.

In other words it locates the resource, like locally in our computer we can have index.html file in the following path. (/Users/portfoliowebsite/index.html)

Example: http://www.example.com/index.html
Photo Source

It is a communication protocol using which client-server (user -remote computer) response is done. Using this protocol hypertext is transferred from server to browser.

Photo Source

It is the markup language for creating web-pages and web applications.

Along with CSS and JavaScript they perform what a webpage visually looks like.

How does browser transform HTML into web pages?

Web browsers (firefox, chrome, safari etc) receives HTML documents from a web server or from local storage and renders them into web pages.

Photo Source
  • How does browser render web page?

The Rendering Engine is responsible for displaying the content from html. Let’s examine the following index.html for rendering.

<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg"></div>
</body>
</html>

It parses HTML and CSS and creates different model object.

Photo Source.
  1. The DOM (Document Object Model) is formed from the HTML.
A simple DOM.

2. The Styles are loaded from CSS into CSSOM(CSS Object Model).

A typical CSSOM tree.

3. A rendering tree is created which reflects the DOM structure. The browser traverses the DOM tree and matches each element with style from CSSOM tree. The tree is constructed using an algorithm.

4. For each render tree element, layout are created with the geometry(layout dimensions).

5. Finally, the layout are displayed in browser window, a process called “painting”.

References:

--

--