Terminology and Concepts to look out for

HyperText Markup Language · element · attribute · noun · prepositional phrase

Relevance to Me

Yesterday was overview — three languages, one screen. Today is HTML alone. Everything you see on a web page starts here, and for the first six years of the web, this was the only tool anyone had.

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>

Today's language is HTML, and it was the first one. Before CSS, before JavaScript, before any of the machinery that makes a modern web page beautiful or interactive, there was HTML — the language for saying what parts exist on a page and where they sit. Nouns and prepositional phrases, exactly the shape you practiced yesterday.

What the letters stand for.

HyperText Markup Language.

• Markup — you take plain text and mark it up, wrapping pieces in tags that name what each piece is. This is a paragraph. This is a heading. This block is a list. The tags do the naming.
• HyperText — text that has links in it. A word or a phrase can carry you to another page just by clicking. That was the invention worth building the whole web around: pages that reach into each other.
• Language — you write it. In a plain text editor. Save the file, open it in a browser, the browser reads your tags and paints the page.

Where it came from.

HTML was invented by a British scientist named Tim Berners-Lee, at a physics lab in Switzerland called CERN, between 1989 and 1991. He wanted a way for scientists to share documents that linked to each other over the internet. The internet already existed at that point — it had existed since the late 1960s — but there was no such thing as the web. The first web page went live in 1991. The World Wide Web opened to the public in 1993.

Your teacher was in middle school when the first web page appeared. By the time he graduated high school, the web had blown open. Most pages you found back then were HTML-only. They looked kind of alike. Left-aligned text. Blue underlined links. A picture or two. Times New Roman by default. A blinking marquee if the author was showing off. That was the whole look of the web for its first six years.

What HTML alone could do.

Everything you actually do on a page had already been invented by the time CSS arrived in 1996. You could write text with structure — a title, headings, paragraphs, bulleted lists, ordered lists. You could put images on the page. You could link one page to another, which is the whole reason there is a web at all. You could build a form — a text box, a checkbox, a submit button — and the browser would send whatever the user typed off to another computer. You could nest one piece inside another to show it belonged to a parent.

Everything that made the web the web was there, in HTML. What was missing was the look of the page — colors, spacing, layout, fonts, hover behavior. That is CSS, and it is Thursday. What was also missing was what the page did when you interacted with it after the page loaded — click a button and have something change without the whole page reloading. That is JavaScript, and it is Friday.

Breakout, seen through HTML-only vision.

Look at Breakout right now. Forget the colors. Forget that the ball moves. Forget that the paddle slides when you press an arrow key. Ask only: what parts exist on this page, and where do they sit?

You will find:

• A container that holds the whole game.
• Inside that container, a score at the top.
• Below the score, a canvas — a rectangular area the browser sets aside for drawing.
• Below the canvas, a Play Again button.

All four of those are HTML. They exist in the file. They have positions relative to each other. None of it depends on how it looks or what happens when you play. Even a browser from 1994 could show most of that (the canvas element is younger, but the point stands).

Today's job.

Five observations. Each one names a part of the screen and places it against another part. A noun and a prepositional phrase. What it is, and where it sits.

That is the sentence-shape of HTML. That is the sentence-shape of the first six years of the web. And that is the sentence-shape you will practice today, so that Thursday you can lay CSS on top of it and Friday you can lay JavaScript on top of that.

If a sentence you write has an adjective in it — bright, small, green, rounded, soft — cross the adjective out. HTML does not carry it. If a sentence you write has a verb of motion — slides, bounces, moves, shrinks — cross the verb out. HTML does not carry it. What is left, if a noun and a where-phrase survive, is your HTML observation. If nothing is left, come back and pick a different part of the screen.