HTML / CSS / JS, in human terms

A hack for remembering what those three little acronyms mean.

Code allows anybody who can write it to communicate with a computer. I write just enough of it (mostly HTML, CSS and JavaScript) to be able 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 somebody asks me something like, “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 top to bottom.

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 and the distance between parts. Anything that describes what it looks like 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.