Introduction To HTML5

Tzafrir Rehan


Content is CC-BY-SA Tzafrir Rehan 2010

HTML5 Is The Future

To know your future you have to know your past

1958 - ARPA

Advanced Research Projects Agency

DARPA’s original mission, established in 1958, was to prevent technological surprise like the launch of Sputnik

- Wikipedia

1965 - Packet Switching Network

1969 - Two nodes connected

1973 - Email

Early email addresses included routing information for the mail relays

Example address: utzoo!decvax!harpo!eagle!mhtsa!ihnss!ihuxp!grg

1974 - TCP

Vint Cerf and Bob Kahn publish "A Protocol for Packet Network Interconnection" describing the TCP protocol

"TCP provides reliable, ordered delivery of a stream of bytes from a program on one computer to another program on another computer"

- Wikipedia

1974 - Telenet

First commercial public network (a version of ARPANET)

1982 - Arpanet fully on TCP

1986 - Usenet

1983 - DNS

Domain Name Resolution

$ host has address

1988 - First worm, named Morris


Tim Berners-Lee is a physicist working in CERN

Where physicists think about what happens to miniature particles.

That might exist.


That leads to a lot of documents


World Wide Web - Use Cases

  • Share documents with researchers in remote sites
  • Allow easy access to cross referenced citations
  • Hypertext



HyperText Markup Language

SGML Based

Example markup:

  <title>Hello World</title>
  <h1>My First Webpage!</h1>


WorldWideWeb Browser

By Tim Berners-Lee, runs on the NeXTSTEP platform


The world now has:

  • A browser
  • DNS
  • HTTP
  • SGML Based HTML


WWW-talk mailing list is created

The concept of a world wide web reaches the scientific community. Discussions about the technology begin.

1992 - NCSA Mosaic

National Center for Supercomputing Applications releases Mosaic 0.5

1993 - Mosaic 1.0

Partially supports HTML spec.

Also supports some features not in the spec

  • * Nested
    • * Lists
  • The <IMG> tag


First advertisement banner


Netscape Navigator 1.0 released


Java released as a language targeted for the web

A Java applet can access remote information asynchronously without reloading the web page.


Microsoft releases Internet Explorer 1.0

A licensed version of Spyglass Mosaic, in turn licensed from NCSA Mosaic


Netscape 2.0B released (beta)

Comes with LiveScript - a dynamic weakly typed prototyped interpreted object oriented language that supports first class functions

Has access to the document through a Document Object Model


Internet Explorer 2.0 released


Netscape 2.0B3 released

LiveScript renamed JavaScript


<input id="input1" type="text" size="3" value="1" />
function inc() {
  var input1 = document.getElementById("input1");
  input1.value = parseInt(input1.value) + 1;
<input type="button" value="Increase" onclick="inc()" />


Microsoft releases Internet Explorer 3.0

Supports CSS - Cascaded Style Sheets


  #red_and_big {
    font-size: 200%;
    color: red;
<p id="red_and_big">In Style</p>

In Style

CSS & JavaScript

  function colorize() {
    var paragraph = document.getElementById("not_red_yet"); = "red";
<p id="not_red_yet"><em>See beyond the color</em></p>
<input type="button" value="Paint It Red" onclick="colorize()"/>

See beyond the color



The web is surviving through its youth, facing tough issues such as the browser wars, standard incompatibility and complete lack of interoperability.

Web sites choose a browser and stick to it, warning users of other browsers that they cannot view said website.

The basic toolchain does not change.


Websites of the time are not much to remember

Portals, forums, personal pages, large databases.

Definitely not web apps.


While the web is dormant, there is a rise of desktop applications

  • ICQ
  • mIRC
  • Games
  • Winamp

The web does not provide a cross platform application solution. Desktop applications strengthen the dominancy of Microsoft's Windows platform.


Microsoft releases Internet Explorer 5.0

Supports the XMLHttpRequest ActiveX controller.

Created by the Outlook Web Access team.

Quickly implemented by Mozilla, Opera, Apple as a JavaScript object.



Defines how to create HTML webpages inside well formed XML.

Becomes the leading standard for modern web development


The set of technologies presented so far converge and web applications form

  • Outlook web access (2000)
  • Oddpost (later became Yahoo! Mail) (2002)
  • Gmail (2004)
  • Google Maps (2005)

These technologies will eventually be named Ajax

Asynchronous JavaScript and XML


The W3C is considering abandoning HTML in favor of XML

XHTML 2 was not to be backwards compatible.

XHTML 2 would not be displayed unless the document is strictly validated and well formed.

It would have been a disaster.


The Web Hypertext Application Technology Working Group is formed

a.k.a. The WHATWG

Created by browser vendors from Apple, Mozilla and Opera

Create HTML5 and additional APIs.

HTML5 Is Huge

The spec defines, among else:

  • New tags
  • Changes to old tags
  • Parsing algorithm
  • JavaScript APIs
  • Implementation details

HTML5 For You!

HTML5 has features for:

  • Web page authors
  • Web application makers
  • Security
  • Designers
  • The semantic web
  • Interoperability between browsers and OSes
  • Backwards compatibility

Offline Demo