# HTML, CSS, and JavaScript: what does each one do?

> The three building blocks of every website, explained with a simple analogy.

*Source: https://velstech.net/html-css-js · Updated: 2026-08-24 · Category: Programming & Web · Tags: Web, Basics*

*Markdown version of [HTML, CSS, and JavaScript: what does each one do?](https://velstech.net/html-css-js). [Read the full guide with interactive tools](https://velstech.net/html-css-js).*
*Also as Markdown: [Hindi](https://velstech.net/html-css-js.hi.md) · [Tamil](https://velstech.net/html-css-js.ta.md).*

---

Every website you've ever visited – including this one – is built from the same
three languages. They do three completely different jobs, and understanding the
split is the moment web development stops being confusing.

## The house analogy

Think of a website as a house:

- HTML is the structure – the rooms, walls, doors. "Here's a heading, here's a paragraph, here's a button."

- CSS is the decoration – paint, wallpaper, furniture, lighting. "The heading is blue and big, the button is rounded, the page has margins."

- JavaScript is the electricity – the wiring that makes things happen. "When you click the button, open a menu."

You need all three for a modern site. A structure with no style is ugly but works; a
styled structure with no JS is pretty but static; JS is what brings it to life.

## HTML: the skeleton

HTML (HyperText Markup Language) defines *what's on the page*. It's not
really a programming language – it's a markup language. It wraps content in tags:

```
Welcome to VelsTech

This is a paragraph of text.

Click me
```

Each tag describes its content: `` is the main heading,
`

` is a paragraph, `` is an image,
`` is a link. The browser reads this structure and knows how to
lay the page out.

## CSS: the appearance

CSS (Cascading Style Sheets) controls *how it looks*. It selects elements and
applies styles:

```
h1 {
  color: #4cc2ff;
  font-size: 3rem;
}

button {
  background: #4cc2ff;
  border-radius: 8px;
  padding: 12px 24px;
}
```

The name "cascading" means styles apply in layers and can inherit. One CSS rule can
restyle every heading on the site at once – that's why CSS makes redesigns a
one-file job.

## JavaScript: the behavior

JavaScript makes the page *do things*. It's the only one of the three that's a
true programming language with logic:

```
const button = document.querySelector("button");

button.addEventListener("click", () => {
  alert("You clicked me!");
});
```

JS can read and change the page after it loads, react to clicks and keystrokes,
fetch data from servers, and build entire apps. This page's theme toggle and color
palette? That's JavaScript at work.

## How they fit together in a file

```

    body { background: #0b0f14; }

  Hello!

    alert("Hi");

```

In real sites these live in separate files (`index.html`,
`styles.css`, `script.js`) and link together – exactly how
this site is organized.

## Why each one matters

```
Layer          Job                 Who touches it
──────────────────────────────────────────────
HTML           Structure/content   Everyone (even non-coders can read it)
CSS            Look and feel       Design-minded people love this
JavaScript     Behavior/logic      Programmers
```

## How to start

You can start right now with nothing but a text editor and a browser:

- Open Notepad/VS Code and write a few HTML tags.

- Save as index.html and open it in your browser.

- Add a  block and change some colors.

- Add a  block and make a button show a message.

That's the entire stack of the classic web, in about twenty minutes. HTML says what
it is, CSS says how it looks, JavaScript says what it does. Master that trio and
you're building websites – like the one you're reading right now.

🧾 Try the VelsTech developer tools

[JSON Formatter & Validator](https://velstech.net/json-formatter) – format and validate API responses.

[Regex Tester](https://velstech.net/regex-tester) – test patterns before writing them into code.

[Browse all tools →](https://velstech.net/tools)

---

*VelsTech – technology explained for everyone. Original: https://velstech.net/html-css-js*