Start presentation

HTML5
and the future of Web

Martin Hassman

6. 3. 2008, PROWAS, Prague

Who?

WHATWG (2004)

W3C (2007)

HTML5 - text/html

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">

		<title>Hello</title>
	</head>

	<body>
		<p>Hello World!</p>
	</body>
</html>
  • New DOCTYPE
  • Simplified encoding declaration

Also HTML5 - text/html

<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>

		<title>Hello</title>
	</head>

	<body>
		<p>Hello World!</p>
	</body>
</html>
  • This character has no effect except to appease the markup gods. As this character is therefore just a symbol of faith, atheists should omit it.

XHTML5 - application/xhtml+xml

<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Hello</title>
	</head>

	<body>
		<p>Hello World!</p>
	</body>
</html>
  • DOCTYPE is mandatory
  • Encoding in XML header only

Parts of HTML5

Document real Web

  • Web use HTML As She Spoke
  • HTML5 parser (handle any input)
  • Non-draconian error handling
  • Defined behaviour

Who wins?

<script>
	window.location = "http://www.opera.com";

	window.location = "http://www.mozilla.com";
</script>

Who wins?

<script>
	window.location = "http://www.opera.com";

	window.location = "http://www.mozilla.com";
</script>

And now?

<script>
	window.location = "http://www.opera.com";
</script>

<script>
	window.location = "http://www.mozilla.com";
</script>

And now?

<script>
	window.location = "http://www.opera.com";
</script>

<script>
	window.location = "http://www.mozilla.com";
</script>

Common browser enhancements

  • Show designMode="on" on some page.

It's OK

But what is REALLY new in HTML5?

Semantic elements

<canvas>

Web Forms 2.0

New input elements

New input elements

Pattern attribute

<input type="text"
 pattern="[0-9]{3}-[0-9]{3}-[0-9]{3}"
 title="Enter phone number as XXX-XXX-XXX">

Invalid event

<input type="text"
 pattern="[0-9]{3}-[0-9]{3}-[0-9]{3}"
 oninvalid="handle_myself(); return false;">

Required attribute

<input type="text" required>

Autofocus attribute

<input type="text" autofocus>

Better file upload

More files to upload?

<input type="file" max="10">

Or even more?

<input type="file" max="1000">

Form prefilling

<form data="http://example.com/myformdata">
...
</form>

Data Storage

Offline applications

Cross-document communication

Event-source element

<event-source src="http://example.com"
 onmessage="...">

Audio and Video elements

Peer-to-peer

It's fantastic!

Can I use it?

  • Some partt implemented in Safari, Opera, Firefox and IE8

Opera implemented

Firefox implemented

Safari implemented

Internet Explorer 8 beta implemented

When?

Other information

Thanks

5 > 4

5 > 3

5 > 2

5 > 1

Questions?