Browser rendering for non technical people

Rendering is the process of displaying the content of a web page on a screen. Whenever you open a web page, your browser reads the HTML code and the rendering process starts.

HTML (Hypertext Markup Language) is the coding language used to create web pages. It consists of a series of elements that tell a web browser all the information on the page with their relationships (which is the title, which are the items of a list, etc.).

CSS (Cascading Style Sheets) is another coding language used to style the content of web pages. CSS is used to add colors, fonts, layouts, and other design features to web pages.

JavaScript is a programming language that helps make web pages more interactive. JavaScript can be used to add behaviors to items: something must happen when the user clicks on this button.

The process of rendering a web page is complex, but here is a simplified overview:

1. The browser receives an HTML document from a web server.
2. The browser begins reading the HTML code from top to bottom and left to right.
3. The browser looks for opening tags (< TagName >) and closing tags (</ TagName >). Tags usually come in pairs; one opening tag and one closing tag.
4. The browser requires other assets (images, videos, etc.) needed to render the page correctly.
5. The browser interprets the content between tags and displays it on the screen according to the HTML rules. If the HTML code includes CSS or JavaScript, those coding languages are also interpreted and executed by the browser.

All this happens very quickly, and we can see the web page we requested at the end of this process.

---

This series of articles is dedicated to managers who are not technical but need a quick introduction to technical topics from various subjects to be more aware in their work.

Feel free to propose new topics clicking here!