Structure, Rendering and Practical
How a Webpage Renders (The DOM)
| Stage | Process | Result |
|---|---|---|
| 1. Parsing | The browser reads the HTML file from top-to-bottom. | The start of the tree structure is mapped in memory. |
| 2. DOM Tree Built | Every HTML element is turned into an Object and arranged in a DOM Tree structure. | This tree is accessible by CSS and JavaScript. |
| 3. CSS/JS Applied | Stylesheets and scripts are loaded and applied to the DOM Objects. | The objects in the tree are now ready with all styling and behavior definitions. |
| 4. Rendering | The browser finally displays the visual page. | The complete, final webpage is displayed to the user. |
Note: The HTML's only job is to provide instructions to the parser to build the DOM.
Semantic HTML and Accessibility
- Semantic HTML: Using elements for their intended purpose to give meaning to the content (e.g., using
<nav>for navigation links). - Benefits: Crucial for Accessibility (screen readers) and SEO (Search Engine Optimization).
- Semantic Examples:
<header>,<nav>,<section>,<article>,<footer>. - Non-Semantic Examples:
<div>and<span>(used only for styling/grouping, has no inherent meaning).
Essential Practical Skills
- Required Skills (Guaranteed):
- Basic tables (using
<tr>,<th>,<td>). - Basic CSS selectors (Type, Class, ID).
- The Box Model (border, margin, padding).
- Semantic tags (e.g.,
<nav>,<section>). - Essential CSS Properties:
background-color,color,width,text-align,box-shadow.
- Basic tables (using