HTML / CSS / JS, in human terms

A mental model for those three little acronyms

Code makes it possible for anybody who can write it to communicate with a computer. I write just enough (mostly HTML, CSS and JavaScript) to communicate with a web browser. That’s enough to make a website or app that does just about anything I can think of. But not everybody needs or wants to know how to write any code at all. So here’s a mnemonic I use to make that code less intimidating when I’m describing it to somebody who hasn’t spent years writing it.

When someone says, “Hey Nick, what’s the difference between HTML and CSS?” I say this:

“Pretend we’re describing a human to a computer using HTML, CSS, and JavaScript.”

HTML (the parts list)

H = Head
T = Torso
M = Midsection
L = Legs

HTML is nothing more than a parts list. There’s no magic here. It’s just all the elements listed from the top (head) to bottom (legs/footer).

CSS (what the things look like)

C = Color
S = Size
S = Style

CSS tells the computer what each of the items in the list should look like and where they should appear. Hair, eye, and skin color. Width and height of each part (size) and the distance between parts. Anything that describes what it looks like (style) or where it is.

JS (what the things can do)

J = Jump
S = Smile

JavaScript tells the computer what all the items in the parts list can do. When the legs press down, the whole thing jumps. When the head becomes visible, it smiles. When you click certain parts, the face turns red.

---

That’s it. Maybe a little oversimplified but enough to remember what each of those little acronyms actually handles. HTML is a list of parts. CSS describes the appearance of those parts. JavaScript describes how those parts function.