A browser understands an HTML document through a multi-step process that involves parsing, tree construction, and rendering. Here I explain the generic meaning of the terms PARSING, TREE-CONSTRUCTION and RENDER(ING).

1. PARSING is the term used in COMPUTER-SCIENCE to analysze the document which is any file of different Programming Languages or Scripting Languages or Markup Languages. 

2. TREE-CONSTRUCTION is the term used in COMPUTER-SCIENCE to analyse every TAGS present inside the particular HTML-File(s) and establishes the relation of different-different TAGS with each-other and prepres a TREE which is the data-representation of each-&-every TAGS and what to display TEXT(S)/IMAGE(S)/VIDEO(S)/AUDIO(S)/Etc. which exists between these TAGS(<TAGS></TAGS OR self-closeing </TAGS>) that is, logical representaion of HTML-DOCUMENT.

   The Tree is called as "DOM-Tree" and here hierarchy is always keeping in account because parent-tags and child-tags  relationship is the main of HTML-DOCUMENT to display contents on webpage(s).

   Also, "CSSOM-Tree" are also parsed by web-browser to generate tree which is the combination of various styling  elements associtaed with every-tags in HTML-DOCUMENT. It is the result of HTML-PARSING.

3. RENDRING is the term used in COMPUTER-SCIENCE to display again a TREE data-structure for actual visualization of ACTIVE-TAGS AND STYLES for the actual showing on the webpage means visual representation of HTML-DOCUMENT. It is the combination of DOM-TREES and CSSOM-TREES.

4. Layout-&-Painting-&-Composition is the last step. After the Render Tree is constructed, the browser performs the layout phase. This involves calculating the exact position and size of each render object on the screen, determining its geometry based on its content, styles (padding, margin, border), and the layout of its parent and sibling elements.Finally, the browser uses the layout information to paint the pixels on the screen. It draws each render object onto the viewport according to its calculated position and size, applying its computed styles (colors, fonts, backgrounds, etc.). This process can involve multiple layers for performance optimization, especially for elements with complex animations or transformations.If layers were created during painting, the browser then combines these layers in the correct order to produce the final image that is displayed to the user.

• Difference in Markup-Languages, Scripting-Languages and Programming-Languages are very important to understand and I'm explaining as follows, MARKUP LANGUAGES are used in web-browsers to render the content stored in the html/xml/or css file. SCRIPTING LANGAUGES are the set of codes which are executed inside the web-browser (IT IS CALLED AS INTERPRETED) and inside the current windows (as example) operating-system environment to automate the tasks which helps in rendering beautiful animations and also running of commands in local computer-system and in server-side depending on the need. PROGRAMMING-LANGAUES are the langaues which is compiled and excuted with the help of a COMPILER to build BIG-APPLICATIONS or STAND-ALONE SOFTWARES which could run in more than one computer system environments or on servers as the need persists. So, here parsing process as carried out by a parser understands the document file and prepares PARSE-TREES or ABSTRACT SYNTAX TREES which constitutes of tokens made of text-or-code.

 Now, after going through the below points, you acknowledge how a web-browser understads HTML-Document that is, below steps or points,

• Receiving Raw Bytes: The browser receives the HTML document as a stream of raw bytes from a server or local storage.

• Converting to Characters: These raw bytes are converted into readable characters based on the specified character encoding (e.g., UTF-8) found in the HTTP response headers or the HTML document itself.

• Tokenization: The stream of characters is then broken down into individual "tokens." These tokens represent the fundamental building blocks of HTML, such as opening tags (<p>), closing tags (</p>), attributes (href="example.com"), and text content.

• Tree Construction (DOM): The tokens are then processed to build a tree-like data structure called the Document Object Model (DOM). Each HTML element, attribute, and piece of text becomes a "node" in this tree. The DOM represents the logical structure of the HTML document, defining the relationships between elements (parent-child, sibling relationships). 

• CSS Object Model (CSSOM) Construction: Simultaneously, the browser parses any associated CSS (from external stylesheets, <style> tags, or inline styles) to create the CSS Object Model (CSSOM). This tree-like structure contains all the styling information for the HTML elements.

• Render Tree Construction: The browser then combines the DOM and CSSOM to create a "render tree." This tree contains only the visible elements on the page, along with their computed styles. Elements that are not rendered (e.g., <head> or elements with display: none) are excluded. 

• Layout (Reflow): The browser calculates the precise position and size of each element in the render tree. This process, also known as reflow, determines the dimensions of each box and how they are arranged on the screen based on the CSS box model and layout rules.

• Painting: Finally, the browser "paints" the visual representation of the page onto the screen, drawing each element based on its calculated layout and styles. This involves rendering the colors, borders, images, and text content.