CONNECT THE WEB'S BUILDING BLOCKS
CONNECT THE WEB'S BUILDING BLOCKS
Discover how to pick the perfect materials to build powerful sites with Jeremy Keith
Jeremy Keith

On 12 March 1989, a young computer scientist named Tim Berners-Lee published a memo. He was working at CERN, the European Organisation for Nuclear Research. The thousands of scientists working there needed a way of collaborating over the internet. Berners-Lee had a potential solution. He published his idea under the title Information Management: A Proposal.

It wasn’t exactly a page-turner and the diagrams were completely incomprehensible. But there was enough there to get the project started. This project became the world wide web. Within a year of publishing his initial proposal, Berners-Lee created the first version of HTML, the first web server and the first web browser. The browser was somewhat confusingly named WorldWideWeb.

Thirty years on from the original proposal for the world wide web, a group of designers and developers gathered together for a week at CERN to recreate the experience of using that first ever web browser. You can see the final result at worldwideweb.cern.ch.

Amazingly, you can browse websites made today in a browser that was made three decades ago. There won’t be any styling. There won’t be any scripting. Neither CSS nor JavaScript existed at the birth of the web. But if a website has been built in a robust way, it will still make sense even when viewed in an ancient web browser.

EXTENDING THE WEB

Scientific collaboration was the first use-case for the world wide web but the project wasn’t designed to be limited to that usage. Berners-Lee knew that he couldn’t predict how the web would be used in the future. He therefore designed it to be extensible.

The first version of the HyperText Markup Language had just a handful of elements. But the HTML language is open to new elements being added. Over time, we got more form fields, more structural elements like section and article and even more media like audio, video and responsive images. None of these additions introduced breaking changes. That’s because of the error-handling model of HTML.

When a web browser encounters an HTML element it doesn’t understand, it renders whatever is in between the opening and closing tags. It displays the content while ignoring the tags it doesn’t understand. What’s interesting here is what the browser doesn’t do. The browser doesn’t throw an error. The browser doesn’t stop parsing the HTML as soon as it encounters an element that it doesn’t understand.

This kind of lax error handling is an example of a design principle called The Robustness Principle or Postel’s Law: “Be conservative in what you send. Be liberal in what you accept.”

Browsers are very liberal in what they accept when it comes to HTML. On the one hand, this can be quite frustrating if you’re a developer trying to isolate a mistake in your HTML. On the other hand, this looseness has enabled HTML to grow over time without breaking in older browsers.

In the first decade of the web’s life, HTML saw an explosive growth. New elements and attributes were added to the language. Some of those additions were adding new semantic granularity but some had absolutely nothing to do with semantics. Elements and attributes for specifying fonts sizes, colours and borders were introduced. HTML, which was intended for defining document structure, was looking in danger of being swamped with presentational instructions. The solution was to split structure and presentation into two different languages.

THE PRESENTATION LAYER

Håkon Wium Lie and Bert Bos joined forces to work on Cascading Style Sheets. Using CSS, developers could add presentational information without having it intermingled with HTML.

With the arrival of CSS, HTML could return to doing what it does best: describing the structure of a document’s content. The new separation of concerns had other benefits. A single CSS file could be responsible for one HTML document or it could be responsible for multiple HTML documents: ten, 20, 100 HTML pages could all reference the same style sheet. Tweaking the visual style of those 100 different pages no longer involved changing each and every one. Changing the single CSS file was enough.

articleRead

You can read upto 3 premium stories before you subscribe to Magzter GOLD

Log-in, if you are already a subscriber

GoldLogo

Get unlimited access to thousands of curated premium stories and 5,000+ magazines

READ THE ENTIRE ISSUE

April 2020