> For the complete documentation index, see [llms.txt](https://mihai-gheorghe.gitbook.io/tic/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mihai-gheorghe.gitbook.io/tic/basic-web-principles/the-pillars-of-a-web-page.md).

# The pillars of a web page

## 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.

{% hint style="success" %}
**The minimum a web page needs to exist.**\
It describes the content and the structure of a document.
{% endhint %}

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.

{% hint style="success" %}
**Meta-language** (it cannot produce results without HTML).\
It is used for styling and positioning HTML elements.
{% endhint %}

## 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.

{% hint style="success" %}
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).
{% endhint %}

### 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](/files/-MkrJuDjKUm6hrPFZxfM)

#### 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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://mihai-gheorghe.gitbook.io/tic/basic-web-principles/the-pillars-of-a-web-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.