What HTML, CSS, and JavaScript Each Do

The idea

Every website you have ever visited was built with three languages working together: HTML (HyperText Markup Language), CSS (Cascading Style Sheets), and JavaScript. Each one has a specific job. Understanding what each does is the foundation of everything else you will learn.

A useful analogy

Think of a building.

HTML is the structure. The walls, floors, ceilings, doors, and windows. The skeleton that holds everything together.

CSS is the design. The paint, the furniture, the lighting, the carpets. How everything looks.

JavaScript is the functionality. The electricity, the elevator, the automatic doors. How things behave and respond.

HTML: Structure and Content

HTML is the foundation of every webpage. It uses a system of tags to define the structure and content of a page.

A tag looks like this:

<p>This is a paragraph.</p>

The <p> is the opening tag. The </p> is the closing tag. Everything between them is the content of that element.

HTML defines what elements are on the page and what they contain:

<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
<a href="https://yourcareerex.com">This is a link</a>
<img src="photo.jpg" alt="A photo" />

HTML does not control how things look. That is CSS's job.

CSS: Visual Design

CSS tells the browser how HTML elements should look. Color, size, spacing, fonts, layout, animations — all of this is CSS.

CSS works by selecting HTML elements and applying style rules to them:

p {
  color: navy;
  font-size: 16px;
  line-height: 1.6;
}

h1 {
  font-size: 48px;
  font-weight: bold;
  color: #42BCB1;
}

JavaScript: Behaviour and Interactivity

JavaScript is a programming language that runs in the browser. While HTML and CSS are static once loaded, JavaScript can change things dynamically in response to user actions.

When you click a button and a menu appears, that is JavaScript. When you fill in a form and see an error message without the page reloading, that is JavaScript.

const button = document.querySelector('button')

button.addEventListener('click', function() {
  alert('You clicked the button!')
})

Key Takeaways

HTML (HyperText Markup Language) defines the structure and content of a webpage. CSS (Cascading Style Sheets) controls how HTML elements look. JavaScript adds behaviour and interactivity. All three work together on every modern website. HTML is the foundation — CSS and JavaScript build on top of it.