HTML, CSS & JS — What Each One Does
Every web page is built with exactly three languages. They have been around since the early days of the web, and they are still the foundation of every site you visit today — from a simple blog to a complex web app. Each language has one clear job.
HTML — the structure
Section titled “HTML — the structure”HTML (HyperText Markup Language) defines what is on the page. Text, headings, images, buttons, links — all of that is HTML. It has no colors, no fonts, no layout. It is purely content and meaning.
If you were designing in Figma, HTML is the wireframe layer — the frames, placeholders, and text blocks that define what exists before any visual treatment is applied.
CSS — the design
Section titled “CSS — the design”CSS (Cascading Style Sheets) defines how everything looks. Colors, typography, spacing, layout, shadows, rounded corners — all of that is CSS. CSS reads the HTML elements and applies visual styles to them.
In Figma terms, CSS is everything in the Design panel on the right: fill, stroke, border radius, spacing, font size, color. It is the entire visual layer.
JavaScript — the behaviour
Section titled “JavaScript — the behaviour”JavaScript is a programming language that makes things interactive and dynamic. Clicking a button and having a menu appear, typing in a search box and seeing results filter, dragging a card to a new position — that is all JavaScript.
In Figma terms, JavaScript is closest to Prototype interactions: the connections and triggers that make things respond to user actions.
Seeing the difference
Section titled “Seeing the difference”The editor below starts with HTML and CSS together. Delete all the CSS (select everything in the CSS tab and press Delete) and watch what happens. The content is still there — the structure survives — but all the visual design disappears. That is the separation of HTML and CSS in action.
Click the CSS tab and clear the contents to see the bare HTML. Then paste it back to restore the design. This is what browsers do automatically — they layer CSS on top of HTML every time the page loads.