Suggest an edit

Improve this article

Refine the answer for “How is HTML related to CSS and JavaScript?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**HTML, CSS and JavaScript** are **three key languages** that together build any modern web page.
They work as a **team**, where each has its own role:

---

### 1. **HTML - structure (the page skeleton)**

HTML defines **what is on the page**: headings, paragraphs, images, buttons, links and so on.
It defines **the content and order of elements**, but does not control the appearance or behavior.

Example:

```html
<button>Click me</button>
```

This button exists, but without CSS and JavaScript it is just a rectangle with text.

---

### 2. **CSS - styling (appearance)**

CSS (Cascading Style Sheets) controls **how the HTML code looks**:
colors, fonts, spacing, alignment, backgrounds, animations and so on.

Example:

```css
button {
  background-color: blue;
  color: white;
  border-radius: 10px;
}
```

Now the button looks **nice**: blue, with rounded corners and white text.

---

### 3. **JavaScript - behavior (logic and interactivity)**

JavaScript is responsible for **reactions to user actions**:
clicks, text input, loading data from the server, animation, form handling and much more.

Example:

```javascript
document.querySelector("button").addEventListener("click", () => {
  alert("You clicked the button!");
});
```

Now the button **comes alive**: a message appears on click.

---

### How they interact:

- **HTML** creates the structure of the page.
- **CSS** is connected to HTML through the `<link>` tag and makes the page stylish.
- **JavaScript** is connected through the `<script>` tag and makes it dynamic.

Combined example:

```html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css"> 
</head>
<body>
  <button>Click me</button>
  <script src="script.js"></script> 
</body>
</html>
```

---

### Summary:

| Language | Role | Example |
|---|---|---|
| **HTML** | Structure | `<h1>Heading</h1>` |
| **CSS** | Style | `h1 { color: red; }` |
| **JavaScript** | Logic | `alert('Hello!')` |

They work **together**:
**HTML** is the body, **CSS** is the clothing, and **JavaScript** is the brain of the web page.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts312 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.