Terminology and Concepts to look out for

noun · prepositional phrase · adjective · verb · adverb

Relevance to Me

Last week you judged what a model wrote. This week you look at what a web page is written in. Three languages — HTML, CSS, JavaScript — and it turns out you can tell them apart the same way you tell nouns from adjectives from verbs. Grammar you already know.

Board Question

Chromebooks open. Breakout runs on the workstation; today's classwork form is on your Chromebook. The exit ticket pops up in the last twenty minutes and opens in its own tab.

HTML — the parts of the page and where they sit. Nouns and prepositional phrases. Nothing about how the parts look, nothing about what they do.

Just the words Click me. No box, no background, no border, no color — and yet those two words are a real, working button. Click them and the button activates. HTML declares what a thing is (a clickable action), not how it looks. The gray box with the darkening hover you may have seen elsewhere is the browser’s own stylesheet filling in visual defaults so buttons don’t render as invisible text.

<button>Click me</button>

CSS — how those parts look. Adjectives layered on the HTML nouns. Color, size, spacing, edges, hover states.

The same button. Now it is colored, rounded, has a shadow, brightens when you hover, and drops down a couple of pixels when you press it — all still CSS. Every one of those is an adjective on the button. Click it — you see the press animation, and then nothing else happens. CSS makes the page beautiful, and beautiful is not the same as working.

<style>
  button {
    background: #b3541f;
    color: #fff;
    border: none;
    padding: 14px 28px;
    font-size: 18px;
    border-radius: 8px;
    box-shadow: 0 3px 0 #7a3a15;
    cursor: pointer;
  }
  button:hover  { background: #c85f24; }
  button:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #7a3a15;
  }
</style>

<button>Click me</button>

JavaScript — what the parts do. Verbs and adverbs. The behavior added on top of the noun and its adjectives.

The same button, the same styling. Now click it. Something happens. That something is JavaScript, listening for the click and running code in response. Three languages, three jobs, one working page.

<style>
  button { /* same styles as before */ }
</style>

<button id="b">Click me</button>
<p id="msg"></p>

<script>
  var count = 0;
  document.getElementById("b").addEventListener("click", function() {
    count++;
    document.getElementById("msg").textContent =
      "Clicked " + count + " time" + (count === 1 ? "" : "s") + ".";
  });
</script>

Here is a wrinkle worth knowing. We teach these three languages in the order HTML → CSS → JS because that is how the layers stack. But that is not the order they actually arrived on the web.

The real order was HTML → JavaScript → CSS. For a couple of years in the mid-1990s, this is roughly what an interactive web page looked like:

HTML shipped in 1991. JavaScript shipped in December 1995 (Brendan Eich, ten days at Netscape). CSS was not published as a spec until December 1996, and browsers did not render CSS reliably until closer to 2000. So for a couple of years, the web had interactivity before it had consistent style. Buttons looked like the browser’s built-in gray beveled default (the user-agent stylesheet from slide 1) — but they could react to clicks. The web went from just-HTML to HTML-plus-JavaScript first, and CSS layered on top only afterward.

<button id="b">Click me</button>
<p id="msg"></p>

<script>
  var count = 0;
  document.getElementById("b").addEventListener("click", function() {
    count++;
    document.getElementById("msg").textContent =
      "Clicked " + count + " time" + (count === 1 ? "" : "s") + ".";
  });
</script>

A web page is written in three languages, and you can tell them apart the same way you tell nouns from adjectives from verbs. The languages have names — HTML, CSS, JavaScript — but the shape of each one is a piece of grammar you already know from every sentence you have ever written.

That is the whole idea for today. Not code. Grammar.

HTML is nouns and prepositional phrases.

An HTML sentence names a part and says where it sits. Nothing else. A score. Above the bricks. Inside the container that holds the whole game. Every sentence is a noun — the part — and a prepositional phrase — the place. Above, below, inside, beside.

Look at Breakout. Every part your eye can find on that screen is a noun. The score. The bricks. The paddle. The play area. The container. The button that says Play Again. Every relationship between two parts is a prepositional phrase of place. The score is above the bricks. The paddle sits below the bricks. The whole game lives inside one container. If your sentence is nouns and where-phrases, you are describing HTML.

CSS is adjectives.

Once HTML has named a part, adjectives layer on top. Bright. Green. Tall. Round. Soft. An adjective does not name a new part. It says what the part already named looks like. A bright green paddle. The paddle is HTML. The bright green is CSS.

CSS answers a different question than HTML. HTML answers "what is on the screen and where does it sit?" CSS answers "and how does it look?" You cannot put an adjective on nothing. Something has to be there — an HTML noun — before bright can attach to anything. That is why HTML has to come first.

JavaScript is verbs, and adverbs.

Verbs are things happening. The paddle slides. The ball bounces. The score climbs. Adverbs modify the verbs: quickly, smoothly, after every level, when you press an arrow key. Verbs are the game running. Adverbs are how, when, and how often it runs.

JavaScript answers a third question: "what does it do?" Same rule as CSS — a verb needs a noun. Something has to be there before it can do anything. The paddle has to exist before it can slide.

Diagram it, the old way.

The sentence A paddle slides. diagrammed on a baseline looks like this:

The HTML sits on the baseline. The CSS hangs below the noun. The JavaScript would hang below the verb the same way. Same picture, every sentence.

Now add layers. A bright green paddle slides smoothly across the play area.

One sentence, three grammars.

Now read the sentence word by word, without the picture:

A paddle — noun. HTML.

bright green — adjectives. CSS.

slides — verb. JavaScript.

smoothly — adverb. JavaScript.

across the play area — prepositional phrase of place, and play area is another noun. HTML.

Cross out the CSS words and the JS words, and what is left is the HTML: A paddle. Across the play area. A noun and a where-phrase. That is the shape.

Today's job.

You will make five observations of a game screen. Only HTML. Nouns and prepositional phrases. Not adjectives — colors and edges are not the point today. Not verbs — motion is not the point today. The point today is the parts of the page that stay still while you look at them, and where each one sits against the others.

If a sentence you write has an adjective in it — bright, small, smooth, rounded — cross the adjective out and read what is left. If a noun and a where-phrase survive, that is your HTML observation. If nothing is left, the sentence was never HTML — it was CSS wearing HTML's clothes.

If a sentence you write has a verb of motion — slides, bounces, moves, shrinks — do the same. Cross the verb out. Read what is left. If a noun and a where-phrase survive, you have HTML. If only the verb was carrying the sentence, you were writing JavaScript.

One more thing. "It looks cool" is not HTML, not CSS, not JavaScript. It is a preference. The three languages describe what is there. A preference describes what you think. Do not confuse them.