HTML, CSS, and JavaScript: The Three Layers

Every web page is built on three layers:

HTML — Structure

HTML (HyperText Markup Language) defines the page's structure. Headings, paragraphs, lists, links, forms, and images are marked up so the browser knows what each piece is for.

<h1>Hello, World</h1>
<p>This is a paragraph.</p>
<a href="/about">About</a>

CSS — Presentation

CSS (Cascading Style Sheets) controls how HTML elements look: colors, fonts, spacing, layout. Separation of concerns means HTML focuses on structure while CSS handles the visual design.

h1 { color: blue; }
p { font-size: 16px; }

JavaScript — Behavior

JavaScript adds interactivity. It can modify both the HTML and CSS after the page loads, respond to user clicks, fetch data from servers, and animate elements.

document.querySelector('h1').addEventListener('click', () => {
  alert('Clicked!');
});

The three-layer model keeps concerns separated, making web pages easier to build, debug, and maintain.