HTML5 - An Introduction

An Introduction
Timmy Kokke | UNIT4 Internet Solutions | Expression Blend MVP / Webguy

What is HTML?
Past, Present and Future
What's New?
Changes to old Tags
Semantic elements
New Tags
More Information

<!doctype>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<b>
<base>
<basefont>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<dd>
<del>
<dfn>
<dir>
<div>
<dl>
<dt>
<em>
<fieldset>
<font>
<form>
<frame>
<frameset>
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<head>
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<isindex>
<kbd>
<label>
<legend>
<li>
<link>
<map>
<menu>
<meta>
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<p>
<param>
<pre>
<q>
<s>
<samp>
<script>
<select>
<small>
<span>
<strike>
<strong>
<style>
<sub>
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<title>
<tr>
<tt>
<u>
<ul>
<var>

1991 HTML first mentioned – Tim Berners-Lee – HTML Tags
1993 HTML
1993 HTML 2 draft
1995 HTML 2 – W3C
1995 HTML 3 draft
1997 HTML 3.2 – “Wilbur”
1997 HTML 4 - ”Cougar” - CSS
1999 HTML 4.01
2000 XHTML draft
2001 XHTML
2008 HTML5 / XHTML5 draft
2011 feature complete HTML5
2022 HTML5

IE FF Saf. Chr. Op.
contenteditable attribute 8.0 3.6 4.0 4.0 10.1
Cross-document messaging 8.0 3.6 4.0 4.0 10.1
getElementsByClassName 8.0 3.6 4.0 4.0 10.1
New, stylable HTML5 elements 8.0 3.6 4.0 4.0 10.1
Canvas (basic support) 8.0 3.6 4.0 4.0 10.1
Audio element 8.0 3.6 4.0 4.0 10.1
Drag and Drop 8.0 3.6 4.0 4.0 10.1
Video element 8.0 3.6 4.0 4.0 10.1
Offline web applications 8.0 3.6 4.0 4.0 10.1
Web Workers 8.0 3.6 4.0 4.0 10.1
Text API for Canvas 8.0 3.6 4.0 4.0 10.1
HTML5 form features 8.0 3.6 4.0 4.0 10.1
Released Browsers

IE FF Saf. Chr. Op.
contenteditable attribute 9.0 3.7 4.* 5.0 10.5
Cross-document messaging 9.0 3.7 4.* 5.0 10.5
getElementsByClassName 9.0 3.7 4.* 5.0 10.5
New, stylable HTML5 elements 9.0 3.7 4.* 5.0 10.5
Canvas (basic support) 9.0 3.7 4.* 5.0 10.5
Audio element 9.0 3.7 4.* 5.0 10.5
Drag and Drop 9.0 3.7 4.* 5.0 10.5
Video element 9.0 3.7 4.* 5.0 10.5
Offline web applications 9.0 3.7 4.* 5.0 10.5
Web Workers 9.0 3.7 4.* 5.0 10.5
Text API for Canvas 9.0 3.7 4.* 5.0 10.5
HTML5 form features 9.0 3.7 4.* 5.0 10.5
Beta Browsers

Pre-HTML5
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-strict.dtd">
Changes to old Tags: Doctype

HTML5
<!DOCTYPE html>
Changes to old Tags: Doctype

Pre-HTML5
<html xmlns="http://www.w3.org/1999/xhtml"
lang="en" xml:lang="en">
Changes to old Tags: html

HTML5
<html lang="en" xml:lang="en">
Changes to old Tags: html

Pre-HTML5
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
Changes to old Tags: meta

HTML5
<meta charset="utf-8">
Changes to old Tags: meta

Pre-HTML5
<link rel="stylesheet" href="style-
original.css" type="text/css" />
Changes to old Tags: link

HTML5
<link rel="stylesheet" href="style-
original.css" >
Changes to old Tags: link

<header>
<hgroup>
<nav>
<article>
<aside>
<footer>
Semantics
Increases readability
Easier Styling
New Tags:

<body>
<header>
<hgroup>
<h1>Demo page</h1>
<h2>Semantic sample demo page</h2>
</hgroup>
</header>
<nav>
<ul>
Some nice looking navigation
</ul>
</nav>
<section>
<article>
<header>
<h1>First Paragraph</h1>
</header>
<section>
Lorem ipsum …
</section>
</article>
...
<aside>
Some links and useful side notes
</aside>
<footer>
Timmy Kokke - Copyright © 2010.
</footer>
</body>
Semantics

Canvas
Dynamic, Scriptable rendering of 2D images
Uses JavaScript to draw
Resolution-dependent bitmap

<canvas id="example" width="200" height="200">
This text is displayed if your browser does not support HTML5
Canvas.
</canvas>
var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);
Canvas

Play video in the browser
Doesn’t need a plugin
Accessible through JavaScript
Video

<video width="360" height="240" controls= "controls" >
<source src="LittleWing.mp4“ type="video/mp4">
</source>
Video tag is not supported
</video>
Video

Local Storage
Store data on the client
Easy access
Database like features
Able to track changes

Local Storage
openDatabase('documents', '1.0', 'Local document storage', 5*1024*1024, function (db) {
db.changeVersion('', '1.0', function (t) {
t.executeSql('CREATE TABLE docids (id, name)');
}, error);
});
function saveState(text){
localStorage["localStorageDemo"] = text;
}
function restoreState(){
return localStorage["localStorageDemo"];
}
SQL Web:
Local Storage:

New input types
<input type="search"> search boxes
<input type="number"> spinboxes
<input type="range"> sliders
<input type="color"> color pickers
<input type="tel"> telephone numbers
<input type="url"> web addresses
<input type="email"> email addresses
<input type="date"> calendar date pickers
<input type="month"> months
<input type="week"> weeks
<input type="time"> timestamps
<input type="datetime"> precise, absolute date+time stamps
<input type="datetime-local"> local dates and times

Micro Data
Special Attributes
Types of items
Persons, Organizations, Events, etc
ItemType
http://microformats.org/
http://www.data-vocabulary.org/

Micro Data
<section itemscope itemtype="http://data-vocabulary.org/Person">
<span itemprop="name">Timmy Kokke</span><br>
<span itemprop="org">UNIT4 Internet Solutions</span><br>
<span itemprop="title">Expression Blend MVP / Webguy</span><br>
</section >

Web workers
Offline web applications
Cross-document messaging
Drag and Drop
Geolocation
Server sent DOM events
Websockets
Inline SVG
What else?

www.whatwg.org/specs/web-apps/current-
work/multipage/index.html
www.w3schools.com/html5
http://html5test.com/
Timmy Kokke
info@timmykokke.com
http://twitter.com/sorskoot
http://www.timmykokke.com
Silverlight and Expression Usergroup
http://www.sixin.nl

HTML5 - An Introduction

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (10)

Similar to HTML5 - An Introduction

Similar to HTML5 - An Introduction (20)

More from Timmy Kokke

More from Timmy Kokke (19)

Recently uploaded

Recently uploaded (20)

HTML5 - An Introduction

Editor's Notes