On this page
A web page often arrives as several files, but the browser presents them as one experience. The easiest way to understand that process is to give each core language one clear job:
- HTML describes the content and its structure.
- CSS controls presentation and layout.
- JavaScript adds behavior and changes that happen after the page loads.
These languages cooperate, but they are not interchangeable. Keeping their jobs separate makes a first website easier to build and a larger website easier to maintain.
HTML gives the page meaning and structure
HTML stands for HyperText Markup Language. It uses elements such as <h1>, <p>, <button>, and <nav> to describe what each part of a document means.
For example, a heading is not merely large text. An <h1> tells browsers, search engines, and assistive technologies that this is the page’s main heading. A <button> says that a control performs an action.
HTML should still make sense before custom styling or scripting is added. That gives your page a dependable foundation.
CSS controls how the structure looks
CSS stands for Cascading Style Sheets. A CSS rule selects HTML and gives it visual instructions. It can set color, spacing, type, borders, layout, and responsive behavior.
In the rule below, .message selects an element with a class="message" attribute:
.message {
color: #2634c7;
font-weight: 700;
}CSS does not replace the meaning in HTML. It builds on that meaning. The browser creates the HTML structure first, works out which CSS rules apply, lays out the result, and paints it on the screen.
JavaScript adds behavior
JavaScript is a programming language. It can listen for an event—such as a click—then read or change the current page.
Suppose a button should reveal a short message. HTML provides the button and message, CSS defines their appearance, and JavaScript changes the message when the button is used. That division of responsibility is small, but it is the same basic pattern used in complex interfaces.
JavaScript is optional for documents that only need to present information. Add it when behavior genuinely improves the page.
How the browser combines the files
When you open a page, the browser first parses its HTML into an in-memory structure called the Document Object Model, or DOM. Links in that HTML can request a stylesheet and a script. The browser applies the CSS to the document and runs the JavaScript in the page’s environment.
The real rendering process contains more steps, but this model is enough to begin:
- Read the HTML and create the document structure.
- Fetch linked resources such as CSS and JavaScript.
- Apply styles and calculate the layout.
- Paint the page.
- Run scripts at the point their loading instructions allow.
MDN’s guide to how browsers load websites provides a useful next layer of detail.
Build a small working example
Create a folder named three-languages. Add these files:
three-languages/
├── index.html
├── styles.css
└── script.js<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Three web languages</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main class="card">
<h1>Build for the web</h1>
<p id="message">HTML gives this message structure.</p>
<button id="change-message" type="button">Change the message</button>
</main>
<script src="script.js"></script>
</body>
</html>The <link> element connects the stylesheet. The <script> element connects JavaScript. Placing this simple script at the end of <body> means the button and paragraph have already been parsed before the script runs.
body {
min-height: 100vh;
margin: 0;
display: grid;
place-items: center;
font-family: system-ui, sans-serif;
background: #f2f4ff;
color: #17203a;
}
.card {
width: min(32rem, calc(100% - 2rem));
padding: 2rem;
border: 1px solid #cbd1ea;
border-radius: 1rem;
background: white;
}
button {
padding: 0.75rem 1rem;
border: 0;
border-radius: 0.6rem;
background: #3946d6;
color: white;
font: inherit;
cursor: pointer;
}const button = document.querySelector("#change-message");
const message = document.querySelector("#message");
button.addEventListener("click", () => {
message.textContent = "JavaScript changed the page after a click.";
});Open index.html in a browser. You should see a centered card. Activating the button changes the paragraph without loading a new page.
Common beginner confusion
“Can CSS add content?” CSS can generate limited decorative content, but meaningful page content belongs in HTML.
“Is JavaScript part of Java?” No. They are separate languages with different designs and uses.
“Why did my CSS or JavaScript not load?” Check the filename, capitalization, and relative path. styles.css and Styles.css may be different files on a web server.
“Why is JavaScript reporting null?” A selector may not match any element, or the script may run before the HTML it needs has been parsed.
Practice
Practice: add one more state
Add a second paragraph in HTML. Style it with a new class in CSS. Then update its text inside the existing click handler. Keep each language responsible for its own job.
What to learn next
You now have the mental model needed for the rest of front-end development. Next, learn how to write a complete HTML document, then move into semantic page structure. When you are ready to add behavior, continue with JavaScript variables so your scripts can store and update useful values.