The pillars of a web page

Modern web development follows the separation of concerns principle, dividing responsibilities across three core technologies that work in concert to create interactive web experiences.

HTML (HyperText Markup Language)

HTML is a declarative markup language that provides semantic structure and content to web documents. It serves as the foundation for the Document Object Model (DOM) that browsers parse, construct, and render.

The minimum a web page needs to exist. It describes the content and the structure of a document.

HTML documents are parsed into a DOM tree structure with O(n) complexity, where each element becomes a node. This tree structure is the foundation for:

• CSS Cascade: Selectors traverse the DOM tree to apply styles

• JavaScript Manipulation: DOM APIs allow dynamic modification of the tree

• Accessibility Tree: Parallel structure for assistive technologies

• Render Tree Construction: Combined with CSSOM to create visual representation

CSS (Cascading Style Sheets)

CSS is a declarative styling language that controls the presentation layer of web documents through a rule-based cascade system. It transforms the semantic DOM structure into visual layouts without modifying the underlying document structure.

Meta-language (it cannot produce results without HTML). It is used for styling and positioning HTML elements.

JavaScript

JavaScript is a high-level, interpreted, multi-paradigm programming language that provides the behavioral layer for web applications. It enables dynamic content manipulation, asynchronous operations, and user interaction handling.

It brings interactivity (or better said, a behavior) to web pages (but it is also used as a stand-alone programming language in other fields).

How they work together

Separation of Concerns

HTML (Structure) ← CSS (Presentation) ← JavaScript (Behavior)
     ↓                    ↓                      ↓
  Semantic            Visual Design          Interactivity
  Content             & Layout               & Logic

Analogy between the human body and web page technologies

Critical Rendering Path Integration

1. HTML Parse → DOM Tree

2. CSS Parse → CSSOM Tree

3. JavaScript Execution → DOM/CSSOM Manipulation

4. Render Tree = DOM + CSSOM

5. Layout → Paint → Composite

Progressive Enhancement Strategy

1. Base Layer (HTML):    Semantic, accessible content
2. Enhancement (CSS):    Visual design, layout
3. Interaction (JS):     Dynamic features, AJAX

The evolution: from Static to Dynamic

Historical Context

• 1993-1995: HTML-only static pages

• 1996-1999: CSS introduction, table-based layouts

• 2000-2005: AJAX revolution, Web 2.0

• 2006-2010: jQuery dominance, CSS3 animations

• 2011-2015: Responsive design, SPA frameworks

• 2016-2020: Component architecture, JAMstack

• 2021-Present: Edge computing, Web3, AI integration

Future Directions

• WebAssembly: Near-native performance for web applications

• CSS Houdini: Low-level CSS engine access

• Web Components: Native component model

• Progressive Enhancement: Resilient, accessible-first design

• Performance Budget: Core Web Vitals as development constraints