Metaphorically explain HTML and CSS

metaphorically-html-css-explanation

# Metaphorically explain HTML and CSS

Get up in front of the class and whip out a piece of sh*tty A4 paper. Fold it in
half and on the front write ‘Happy Birthday’ in one colour. Inside, scribble a
typical birthday message in the same pen.

This is HTML. It’s a message. It’s content. Stress the fact that, although it
doesn’t look very pretty, its job is fulfilled: it has effectively passed on
some content. It’s communicated with someone.

Next, reach into your bag, or under your laptop, and produce a snazzy, glittery,
fluffy card you’d had hiding away. Tell them that the two cards do the exact
same job; they both transmit the exact same message, but one looks nicer than
the other.

HTML carries a message in its most basic form; CSS can be used to enhance that
message, but the message remains the same. Stress this fact: the message exists
before and without the style.

Of course this is a very crude analogy, and very superficial, but as a model it
helps show that although the message never changes, you can alter its
presentation to better suit a scenario. A card for you dad, your sister, etc.
is always the same content (Happy Birthday) but can be a different style.

For bonus points, whip out a third card that has a pop-up feature as you open
it. This is your JS. The same message, with a layer of style, and now with an
added layer of interaction.

This model/analogy will also help you explain progressive enhancement. The
message/content never changes, but you can add features progressively to make
the experience a little richer.