#The Web: the shape of words

A URL can point to a document, but once the browser gets there, how does it know what to show you? This is where the Web reveals another invention made mostly from stolen goods: HTML, or HyperText Markup Language.

We've met hypertext and language already, but what is markup doing here? It's older than you might think. Certainly older than computers.

https://chnm.gmu.edu/digitalhistory/links/pdf/chapter3/3.19a.pdf https://en.wikipedia.org/wiki/Letterpress_printing https://en.wikipedia.org/wiki/Offset_printing Markup is simply extra marking on a document that tells someone what to do with it. Before computers, it belonged to the print trade (here is a brief history of document markup). In letterpress and later offset printing, an editor marked up a manuscript with a pencil before sending it to the typesetter: a person who built each page out of movable type, small metal blocks each carrying a single letter or glyph. https://chnm.gmu.edu/digitalhistory/links/pdf/chapter3/3.19a.pdf https://en.wikipedia.org/wiki/Letterpress_printing https://en.wikipedia.org/wiki/Offset_printing

The markup told the typesetter which font and size to use, and made the other layout decisions.

Early computers printed like typewriters. If you wanted decent printed output, you attached a phototypesetter: a complex machine of its own that could be told which fonts and sizes to use. Each one had its own vendor-specific commands and software.

https://en.wikipedia.org/wiki/Troff The wizards at Bell Labs, who were busy inventing Unix, were not impressed. They wanted their Unix and C manuals nicely typeset without fiddling with the machine. So they wrote troff, one of the earliest markup languages for computers. It is still with us: every Unix system has a manual command, man, and its pages are marked up in a troff descendant. https://en.wikipedia.org/wiki/Troff

https://en.wikipedia.org/wiki/Donald_Knuth https://en.wikipedia.org/wiki/The_Art_of_Computer_Programming Another wizard, Donald Knuth, wanted to write a book about programming. Well, actually, he wanted to write the book on programming. In 1962 Addison-Wesley approached him about a book on compiler design. But he enlarged the scope a bit. The first three parts of a proposed seven-part series were typeset and published by 1973. By then the typesetting systems had changed, and the typesetting instructions for the first books were no longer usable. Clearly that was unacceptable to a proper wizard like Knuth. https://en.wikipedia.org/wiki/Donald_Knuth https://en.wikipedia.org/wiki/The_Art_of_Computer_Programming

https://tug.org/whatis.html https://www.latex-project.org/ So in 1977 he took some time off to develop his own, better typesetting system. That hiatus turned out to last about a decade, and resulted in TeX. An extension of it, LaTeX, is still the preferred way to deliver scientific and mathematical articles to science magazines. TeX is also one of very few programs that are very likely bug-free. One of the reasons may be gleaned from this quote by Knuth: "... one of TeX's principal advantages is the fact that it does not change." https://tug.org/whatis.html https://www.latex-project.org/

Both troff and TeX exist to put documents on paper. Their markup says how the text should look, not what it is.

https://en.wikipedia.org/wiki/IBM_Generalized_Markup_Language This is where things get interesting. Around 1969 some wizards from IBM created a system called GML. This either means Generalized Markup Language, or it might mean Goldfarb, Mosher and Lorie, who were the aforementioned wizards. GML described what each part of a text was: a heading, a paragraph, a list item. How it should look was left to someone else. Here is an example: https://en.wikipedia.org/wiki/IBM_Generalized_Markup_Language

:h1.Chapter 1:  Introduction
:p.GML supported hierarchical containers, such as
:ol.
:li.Ordered lists (like this one),
:li.Unordered lists, and
:li.Definition lists
:eol.
as well as simple structures.
:p.Markup minimization (later generalized and formalized in SGML),
allowed the end-tags to be omitted for the "h1" and "p" elements.

http://www.columbia.edu/cu/computinghistory/scribe.pdf GML was technically available in the 1970s, but for years hardly anyone outside IBM could really use it. So the award for one of the first widely available markup languages that described the meaning—the semantics—of a text goes to Scribe, in 1980. But we did not end up in a Scribe world, so I'll leave it there and return to GML. http://www.columbia.edu/cu/computinghistory/scribe.pdf

https://en.wikipedia.org/wiki/Standard_Generalized_Markup_Language https://html.spec.whatwg.org/ GML grew into SGML—the Standard Generalized Markup Language, which became an industry standard in 1986. In 1989, when Sir Tim looked around for a markup language for the Web, he found SGML as a well-defined standard. But SGML itself has no tags. It is a language for defining your own document formats. This was clearly too complex. The original GML did have tags, nice and short ones. So HTML was born out of a combination of SGML and GML. Stolen goods, once again. https://en.wikipedia.org/wiki/Standard_Generalized_Markup_Language https://html.spec.whatwg.org/

Here is the page from the previous chapter again:

<header>
<title>http://info.cern.ch</title>
</header>

<h1>http://info.cern.ch - home of the first website</h1>
<p>From here you can:</p>
<ul>
<li><a href="http://info.cern.ch/hypertext/WWW/TheProject.html">Browse the 
    first website</a></li>
<li><a href="http://line-mode.cern.ch/www/hypertext/WWW/TheProject.html">
    Browse the first website using the line-mode browser simulator</a></li>
<li><a href="http://home.web.cern.ch/topics/birth-web">Learn about the birth
    of the web</a></li>
<li><a href="http://home.web.cern.ch/about">Learn about CERN, the 
    physics laboratory where the web was born</a></li>
</ul>
</body>

https://html.spec.whatwg.org/multipage/introduction.html#history-2 It is not a proper SGML document. Later versions of HTML did follow SGML, until HTML5. https://html.spec.whatwg.org/multipage/introduction.html#history-2

It does use the SGML way of separating markup from content: every tag sits between < and >.

Why this format? One goal of the Web was that anyone could write HTML in an ordinary text editor. So the source had to stay readable. Named closing tags make it clear which element is ending.

Imagine an HTML version without named end tags, something like this:

<strong>This is an <em>example</> text</>

This is technically possible, maybe even simpler. But it is much harder for a human to read. And crucially, it is much easier to make mistakes, mistakes the browser can't recover from.

Another consequence of the format is that some characters can no longer be used freely in the content. < now has a special meaning, and so do > and ". HTML solves this with character references, another escape:

• < as <
• > as >
• " as "

But now & has become special as well. Easily solved:

• & as &

And these are the basics of HTML.

Now for the tricky parts. As you've seen, HTML elements have start and end tags. That means elements can contain other elements: you can nest them. But you cannot overlap them. This is incorrect HTML:

<strong>This is a strong <em>and partially emphasized</strong> text</em>

Instead, you are supposed to write this:

<strong>This is a strong <em>and partially emphasized</em></strong><em> text</em>

And this HTML can be represented as a tree structure:

• strong
  • This is a strong
  • em
    • and partially emphasized
• em
  • text

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model This is how your web browser understands the HTML. Most browsers let you look at this structure: press <ctrl> <shift> i, or right-click on a page and choose "Inspect". You will see the whole page as a tree. This tree is called the DOM, or Document Object Model. https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

HTML forces your document into a tree. There can be no overlapping markup.

This tree structure does have benefits. You can also write the above HTML as follows:

<strong>
    This is a strong 
    <em>
        and partially emphasized
    </em>
</strong>
<em>
    text
</em>

And it would render the same. The indentation makes the tree visible in the source, and makes it much easier to check that closing tags line up with opening tags. Most people who write HTML by hand do this.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text/Whitespace This works because browsers apply white-space collapsing. In general, any run of spaces, tabs and line breaks in your content is read as 'one space, please'. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text/Whitespace

For example, these two lines render identically:

This renders exactly the same.<br>
   This    renders exactly    the      same.

Even the extra 3 spaces at the start of the second line do not show up.

https://en.wikipedia.org/wiki/WYSIWYG https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/contenteditable If you really want to open a can of worms, try writing a rich text editor in HTML, fully WYSIWYG (What-You-See-Is-What-You-Get). Browsers even include one. The contenteditable attribute turns it on: https://en.wikipedia.org/wiki/WYSIWYG https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/contenteditable

<div contenteditable=true>
    Type here
</div>

https://whatwg.org/ What you get is an editor designed by Microsoft, originally for Internet Explorer 5.5, with an API derived from WordPad. Its capabilities are dreadfully limited. And yet there is no improved version. The WHATWG, the group now in charge of the HTML specification, started a special workgroup to create a better standard for contenteditable. It disbanded after years of trying. https://whatwg.org/

The in-browser editors that do work well, and produce clean HTML, mostly avoid editing HTML directly. They convert the document to a different model of their own, let you edit that, and convert it back to HTML when you save.

The lesson: just because something looks simple doesn't mean it is. All choices have consequences. If you're careful, you can decide which ones you want to live with.