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

Birat Rai

3 min readJan 20, 2018

What is Web?

The web is comprised of 3 protocols:

URL (Uniform Resource Locator):

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

HTTP (Hypertext Transfer Protocol):

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.

HTML (Hypertext Markup Language):

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.

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.

The DOM (Document Object Model) is formed from the HTML.

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

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.

The final render-tree from DOM and CSSOM

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:

What is hypertext? ~ Wiki
Client-Server Architecture ~ Wiki
What is HTML? ~ Wiki
What is markup language? ~ Wiki
What is DOM? ~ developer.mozilla
How do browsers render HTML-CSS? ~ Quora
How is Object Model constructed ~ developers.google
How is rendering done in browser? ~ developers.google
How does browsers work? ~ html5rocks.com
The tree construction algorithm ~ html5rocks.com

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

Written by Birat Rai