HTML, CSS & JS: A Human Anatomy Approach

Why Anatomy?

Most explanations of web development start with code. This one starts with something you already understand: your own body.

The three core languages of the web, HTML, CSS, and JavaScript, map cleanly onto three biological systems. HTML is the skeleton: it defines structure. CSS is the skin and appearance: it controls what you see. JavaScript is the brain and muscles: it handles thinking and movement.

This post uses that parallel as a framework to explain what each language does, how they interact, and why they are separated in the first place. No prior coding knowledge is required.

HTML: The Skeletal System

HTML (HyperText Markup Language) is the structural foundation of every webpage. It defines what content exists, what that content means, and how it is organised. Without HTML, there is nothing for the other two languages to act on.

Metadata as DNA

The <head> section of an HTML document contains instructions that are never displayed on the page itself. These include the page title (shown in the browser tab), descriptions used by search engines, and directives that tell the browser how to render the page on different devices.

<head>
  <title>My Website</title>
  <meta name="description" content="A brief summary for search engines." />
</head>

Like DNA, this information shapes behaviour and identity without being directly visible.

Landmark Tags as the Spine and Ribcage

HTML uses semantic tags to divide a page into logical regions:

<header>: the top of the page, typically holding navigation and branding.
<main>: the primary content area.
<footer>: the base of the page, usually containing contact details and legal links.

These tags serve a dual purpose. They give the page visual structure, and they provide meaning to assistive technologies like screen readers. A visually impaired user navigating with a screen reader depends on these landmarks the same way you depend on your ribcage to know where your chest ends and your abdomen begins.

Specialised Elements as Limbs and Organs

Certain HTML elements handle specific jobs:

Forms (<form>) collect user input: login credentials, search queries, contact messages.
Tables (<table>) present data in rows and columns.
Lists (<ul>, <ol>) group related items together.

Each of these carries built-in browser behaviour. Forms submit data. Tables are navigable cell by cell. Lists announce their item count to screen readers. These are not generic containers: they are purpose-built structures, much like how a hand is built differently from a foot because it serves a different function.

A webpage with only HTML is fully functional. It will display content and be accessible. It will also look like a plain text document from the mid-1990s, which is where CSS comes in.

CSS: The Integumentary System

CSS (Cascading Style Sheets) controls everything visual: colours, fonts, spacing, layout, and animation. If HTML is the skeleton, CSS is the skin, hair, eye colour, and clothing layered on top of it.

The Box Model as Tissue Layers

Every HTML element is treated by the browser as a rectangular box with four layers. The parallel to biological tissue is straightforward:

Content: the core material. The text or image inside the element.
Padding: the buffer zone between the content and the outer edge, comparable to fat and muscle beneath the skin.
Border: the visible boundary, the skin itself.
Margin: the space between this element and adjacent elements, personal space.

.card {
  padding: 1.5rem;
  border: 1px solid #e2e8f0;
  margin-bottom: 2rem;
}

Most CSS layout issues trace back to a misunderstanding of this model. When an element appears wider than expected, it is almost always because padding and border are being added on top of the declared width rather than included within it.

Pseudo-classes as Reflexes

CSS can respond to user interaction without any JavaScript involvement. Pseudo-classes apply styles based on an element’s current state:

:hover activates when the cursor moves over an element.
:focus activates when an element receives keyboard focus.
:active activates during the moment a click is held down.

button:hover {
  background-color: #2563eb;
  color: white;
}

These are reflexive responses: automatic, immediate, and requiring no conscious thought from the system. A button changing colour on hover is the web equivalent of flinching when something brushes your arm.

Flexbox and Grid as Body Adaptation

Websites need to function across screen sizes, from wide desktop monitors to narrow mobile screens. CSS provides two layout systems for this:

Flexbox arranges elements along a single axis (a row or a column). It is well suited for components like navigation bars and card rows.

CSS Grid arranges elements across two axes (rows and columns simultaneously). It is the right tool for full page layouts and dashboards.

When you resize a browser window and the content reflows from a multi-column layout to a single stack, these systems are doing the work. The structure is adapting to its environment, the same way your pupils dilate in low light or your posture shifts to maintain balance on uneven ground.

JavaScript: The Neuromuscular System

HTML provides structure. CSS provides appearance. Neither of them can think, remember, or act. JavaScript is the language that makes a webpage interactive: it handles logic, stores data, and physically modifies the page in response to user behaviour.

Logic and Memory as the Brain

JavaScript stores information in variables and makes decisions through conditional statements. A form that displays an error when a required field is left empty, a cart that updates its total as items are added, a toggle that remembers whether you prefer dark mode: all of this is JavaScript logic.

const itemCount = cart.length;

if (itemCount === 0) {
  showMessage("Your cart is empty.");
}

Variables act as short-term memory. Functions act as learned behaviours: repeatable actions the system can perform on demand.

DOM Manipulation as Muscle Movement

The Document Object Model (DOM) is the browser’s live, in-memory representation of the HTML document. JavaScript can query any element in the DOM, change its content, modify its styles, or add and remove elements entirely.

const heading = document.querySelector("h1");
heading.textContent = "Welcome back, Sarah.";

That code just changed what the page displays without reloading it. This is how applications like Gmail operate: rather than fetching an entirely new page on every interaction, JavaScript rewrites portions of the existing document in place. The muscles are moving the skeleton.

Event Listeners as the Sensory System

JavaScript registers listeners that monitor for specific user actions and trigger responses when they occur:

click: a tap or mouse click.
scroll: movement through the page.
submit: a form dispatching its data.
keydown: a keyboard key being pressed.

document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();
  validateAndSend();
});

Without event listeners, JavaScript would execute once when the page loads and then go silent. These listeners are the sensory organs that keep the system aware of and responsive to its environment.

How the Browser Brings It All Together

When you navigate to a URL, the browser executes a precise sequence called the Critical Rendering Path. Each step builds on the last:

Parsing: the browser reads the HTML and constructs the DOM tree, a hierarchical map of every element on the page. The skeleton is assembled.
Style calculation: the browser reads the CSS and determines the computed visual properties for every element. Appearance is applied.
Layout: the browser calculates the exact position and dimensions of every element on the screen.
Paint: pixels are rendered. Colours, images, borders, and shadows become visible.
Scripting: JavaScript executes. The page becomes interactive.

One detail worth noting: when JavaScript modifies an element’s size or position, the browser must recalculate layout and repaint. This is called a reflow, and it is the most common source of performance problems on the frontend. The brain telling the muscles to move has a real cost.

Quick Reference

Attribute	HTML	CSS	JavaScript
Role	Structure and meaning	Appearance and layout	Behaviour and logic
Anatomy parallel	Skeleton and DNA	Skin and features	Brain and muscles
Works independently?	Yes (unstyled, static)	No (needs HTML to style)	No (needs a DOM to act on)
File extension	`.html`	`.css`	`.js`

Putting It Together

No single language builds a website. HTML without CSS is a bare skeleton. CSS without HTML has nothing to dress. JavaScript without either has nothing to act on.

The three are designed to be separate. Structure, presentation, and behaviour each have their own language because mixing them together produces code that is harder to maintain, harder to scale, and harder for machines (search engines, screen readers) to interpret.

Learn them in order. Start with HTML and understand what your content means. Add CSS and control how it looks. Reach for JavaScript only when the first two cannot accomplish the task. That sequence reflects how the browser processes a page, and it is the most reliable way to build something that works well for everyone.