Doug spends some time looking at where the HTML language and syntax came from. HTML has roots in other markup languages like GML, Scribe and Runoff. Doug also shares a few examples of these parent languages.
(techno music) - Episode IV of the Metamorphosis of Ajax. "All the world's a page and all the men and women merely pointers and clickers." So, we're going to start this hour with Sir John Harrington. A poet, a courtier of the saucy godson of Queen Elizabeth the First of England. He's best remembered today as being an inventor, and he invented one of the fundamental inventions which makes civilization at our scale possible.
Without his breakthrough, we could not live in cities. We could not be living in the density necessary for technological achievement. Great move forward. So, this is a picture from his book of his invention. Can anybody identify it. - [Student] It looks like a toilet. - It is a flush toilet indeed. We just, civilization couldn't work without them. The Romans had flush technology, but it was lost when the empire collapsed, but Harrington rediscovered it, and he built one of these devices for the queen and installed it in her residence.
And this usually happens with the really important inventions. She refused to use it. She complained that it made too much noise. She didn't want everyone in the castle knowing when she was going about her royal business, so it never go used, but he published a book about it, and eventually other inventors saw it and improved it. Over the next couple hundred years, people added other essential elements to it including the float valve and the S trap and the siphon, and eventually we got-- - [Student] What about the fish though? I want fish in my toilet.
- Of course you do. - [Student] Yeah. - So, he wrote a book, and the title of the book was the Metamorphosis of Ajax, which he published in 1596. He called it the Ajax. Well, now flash forward a little bit. This is Jesse James Garrett. He was a designer and consultant in San Francisco. He was on a project where he was consulting with the engineers of a company, and they told him that they had found this way of writing applications for the browser, that instead of doing a page replacement each time the user clicks, instead they will send a little bit of data from the browser to the server.
So to give some historical context for this, the web comes from word processing, and word processing, historically, it comes in two very distinct schools. There's the binary proprietary school, which started with standalone equipment and then shared logic and eventually personal computers, which was dominated at various times by companies like IBM, Wang, and today, Microsoft. Then there's the textual open school in which everything is represented as text all the time.
One of the first examples of this is a program called RUNOFF. It was developed by MIT, and RUNOFF was intended for producing text that could be sent to various printers, so here we've got an example of a RUNOFF file. If a line starts with a period in column one, that means it's a command, so in this case, we'll skip one line, and then we'll tab four, we'll offset four, and so on. And then the text between the commands will be filled in to the margins, and this was a very popular program.
It was ported from one mainframe to another. It moved all over the place. Eventually it got to Bell Labs where its name was shortened to roff, and other versions of it were created including nroff and troff. Troff was the way the Unix community did typesetting, made books for a long, long time. Meanwhile, there's an attorney at IBM named Charles Goldfarb who thinks he can do this stuff better, so he begins a project called Generalized Markup Language, and this is an example of a Generalized Markup Language kind of midpoint through its evolution.
The markup's gotten a little bit more complicated. Now he's got a colon in column one followed by a cryptic command, and then if the command is followed by a dot, he can then have content on the remainder of the line, so he's starting to mix up the commands and the content. And if you're familiar with HTML, some of these commands might be eerily familiar to you, and that's not accidental. In fact, the HTML comes out of this heritage. All of them except EOL, but you can probably guess what that one means.
In fact, as GML went through its evolution, we got colon e, and then colon colon, and then finally angle brackets, and so, you know, and you know what happened after that, so if you ever looked at HTML entities, we've got an ampersand and a cryptic code and a semicolon and wondering in what bizarre-o universe does it make sense to have a piece of random punctuation then a code and another piece of random punctuation? Where did that come from? This is where it came from.
He ran out of angle brackets. There was no other way to make it look nice, so he went with the awful looking thing. So, where did the angle brackets come from? The angle brackets were inspired by Scribe. Brian Reid was an amazingly bright guy at Carnegie Mellon who made Scribe, which he called a document compiler. This is the first time someone got the separation between content and formatting right. Scribe was a brilliant piece of work. Scribe could take documents and put them to all sorts of output devices, and it had an extremely nice language that there was one reserved character, which was the at sign.
He'd say @ and then the name of an environment and then he'd have some quoted stuff, which would be affected by that environment, and he had six sets of quoting characters, so you could pick the one that's guaranteed not to interfere with the content that you're putting inside, and you could nest these things as deeply as you wanted, and if the nesting got too deep, he had special forms with Begin and End so that you didn't care about things accidentally matching. So for long things like Chapters and sections, you could enclose them like that.
And, Goldfarb looked at this and went, oh, angle brackets. I didn't know you could do angle brackets. That's great. So he stole some ideas from this. Unfortunately, he didn't steal enough ideas. One of the things Scribe could do was bibliographies. Now, since it was developed in a university, it has to be able to deal with academic papers and such, so here we've got a description of a tech report and a book, and I believe that this is the very first time that a document format was being used as a representation for data.
'Cause it looks like JSON, right? Its key value pair is separated by commas, and it's really reasonable looking. I mean, even things like the details, like year=1972, there are no quotes around the year, because requiring quotes around numbers would be insane, right? You know, it's just really good. So, the GML community got the idea of attributes from this, but they didn't copy enough of the good stuff, and it's a shame that Tim Berners-Lee hadn't been more knowledgeable about text processing systems, because if he had based the web on Scribe instead of on SGML, our lives today would be so much better.
But he didn't do that. So, you know, we can see that RUNOFF inspires GML and Scribe, helps inspire SGML, but not enough, and eventually that leads to HTML.
This course was created by Frontend Masters. It was originally released on 6/20/2016. We're pleased to host this training in our library.
- Writing code for performance
- Script tags
- Nodes and events
- ES5 and ES6
- Principles of security
- Object capabilities
- Synchronous functions
- Asynchronous functions