Sign in
Log inSign up

How browser reads a HTML document?

Sena Sowseelya's photo
Sena Sowseelya
·Feb 23, 2022·

2 min read

When we run a C or C++ or a Java program we get output in a console whereas when we run a html file we get output in browser. Have you ever thought of how browser parses it? In this article we are going to see Parsing and Rendering turn the HTML content into a web page with colors and backgrounds and pictures

HTML PARSING:

Parsing means analyzing and converting a program into an internal format that a runtime environment can actually run.

  • HTML content at the beginning undergoes a process called Tokenization where code is divides into tokens and start tag and end tags are identified.

  • Then they are converted into tree like structure called DOM(Document Object Model).

image.png Whenever we access an item using document.getElementById() it is retrieved from this DOM tree.

CSS Parsing :

CSS file is also parsed ,tokenized and a tree called CSSOM(Cascading Style Sheets Object Model) is formed similar to html. image.png

Rendering of Web Page

Both the trees DOM and CSSDOM obtained are merged to form a Render Tree which is used in marking and coloring elements on a webpage image.png

After rendering a webpage ,browser calculates all the measurements based on position relative and absolute and aligns them . After Alignment they are colored based on styling applied

Summary:

1.Parse HTML content and DOM is formed

2.Parse CSS file and CSSDOM is formed

3.Merge DOM+CSSDOM -->Render Tree

4.Apply Layouts using measurements.

5.Color them based on CSS styles.