HTML5 Introduction
Ynon Perek
Monday, January 2, 2012
Slide 2
Slide 2 text
Agenda
HTML History
HTML5 Rules
New Features
Browser Support
HTML5 Page Structure
Monday, January 2, 2012
Slide 3
Slide 3 text
In The Beginning
While working at CERN
in the 90s, Berners-Lee
develops WWW
1991 The first web site
(CERN’s info page)
1994 Berners-Lee
founded the W3C
http://www.flickr.com/photos/tanaka/3212373419/
Monday, January 2, 2012
Slide 4
Slide 4 text
1991 HTML1
Described in a document called “HTML Tags”
Included 20 elements
Influenced by SGML
Monday, January 2, 2012
Slide 5
Slide 5 text
1995 HTML2
One year after
Netscape was founded
Forms
Tables
Image Maps
http://www.flickr.com/photos/kalleboo/2214787531/
Monday, January 2, 2012
Slide 6
Slide 6 text
1997 HTML3.2
Standardizing browser
wars
Dropping Netscape’s
blink and MS marquee
On the right:
Blue - IE
Light green - Netscape
http://en.wikipedia.org/wiki/File:Browser_Wars.svg
Monday, January 2, 2012
Slide 7
Slide 7 text
1999 HTML4
Browser war was over.
MS won
Many new elements,
including iframe, label,
legend, object
Deprecated: applet,
center, font, menu,
strike
http://www.flickr.com/photos/daniello/422213306/
Monday, January 2, 2012
Slide 8
Slide 8 text
After The Browser Wars
W3C starts to work on XHTML, MathML, SVG and
others XML based technologies
HTML is considered “finished”
Monday, January 2, 2012
Slide 9
Slide 9 text
HTML4
Suitable for web sites, not
web applications
Monday, January 2, 2012
Slide 10
Slide 10 text
2004 WHATWG
The Web Hypetertext Application Technology
Working Group came to life in 2004 to bring life
into HTML
It was founded by Apple, Mozilla and Opera
Published a proposal for Web Applications 1.0
spec, which has later evolved into HTML5
Monday, January 2, 2012
Slide 11
Slide 11 text
2009 HTML5
No more XHTML
Many new elements
Web Application Oriented
Monday, January 2, 2012
Slide 12
Slide 12 text
State of HTML5
Still In Draft
Candidate Recommendations stage during 2012
W3C Recommendation deadline: 2022
However, many parts of the recommendations are
fully functional today
Monday, January 2, 2012
Slide 13
Slide 13 text
Web Tech History
1991 HTML
1995 HTML2
1996 CSS1 +
JavaScript
1997 HTML3.2
1998 CSS2
1999 HTML4
2000 XHTML1
2002 Tableless Web
Design
2005 Ajax
2009 HTML5
Monday, January 2, 2012
Slide 14
Slide 14 text
HTML5 Vision
Monday, January 2, 2012
Slide 15
Slide 15 text
Paving The Cow Path
The WHATWG took the time to understand what
everyone does, analyzed good practices and
standardized them
This leads to evolution and not revolution
Monday, January 2, 2012
Slide 16
Slide 16 text
Utility Over Purity
HTML5 is overwhelmingly practical, allowing
many code that used to be invalid and making
developers lives easier
Less code, less headaches, more fun.
Monday, January 2, 2012
Slide 17
Slide 17 text
Content & Presentation
HTML5 deprecates many old presentational
elements in favor of CSS.
Enhancements in CSS3 selectors enable better
separation between content and presentation
Monday, January 2, 2012
Slide 18
Slide 18 text
Plugin Free Paradigm
Provide native APIs for everything that used to
required a proprietary plugin
Flash is no longer mandatory
Monday, January 2, 2012
Slide 19
Slide 19 text
Paving The Cow Path
Utility over Purity
Separation of Content and Presentation
Plugin Free
HTML5 Vision
Monday, January 2, 2012
Slide 20
Slide 20 text
Q & A
http://www.flickr.com/photos/92163630@N00/95509221/
Monday, January 2, 2012
Slide 21
Slide 21 text
The Rules
Monday, January 2, 2012
Slide 22
Slide 22 text
Doctype
Remove old clutter from the doctype declaration
For an HTML5 page, use:
MIME Type: text/html
Monday, January 2, 2012
Slide 23
Slide 23 text
Character Encoding
Remove old clutter from encoding definitions
Use:
Note no need to close meta tags
Can also use the old syntax
Monday, January 2, 2012
Slide 24
Slide 24 text
Tag Fun
No need to close void elements
both and are valid
HTML Validator:
http://validator.w3.org/
Monday, January 2, 2012
Slide 25
Slide 25 text
HTML5 New Features
New Syntactic Elements
New Semantic Elements
New APIs
Monday, January 2, 2012
Slide 26
Slide 26 text
HTML5 Semantics
WHATWG analyzed and learned the uses of
elements in many web sites
They have found a few common usages
HTML5 includes specialized elements for these
common usages
Can still use a
Monday, January 2, 2012
Slide 27
Slide 27 text
Semantic Elements
header: header content
footer: footer content
section: a section of articles
article: articles are arranged inside sections
aside: related content
nav: navigational element
Monday, January 2, 2012
Slide 28
Slide 28 text
Semantic Element
Monday, January 2, 2012
Slide 29
Slide 29 text
New APIs
Web Storage
Web SQL
Application Cache
Web Workers
Web Sockets
Desktop Notifications
Drag & Drop
File System API
Geolocation
Device Orientation
Forms
Audio & Video
Canvas
Web GL
History API
And More...
Monday, January 2, 2012
Slide 30
Slide 30 text
HTML
Polyfills
Replacement library for
older browsers
Make a smooth switch to
HTML5
http://www.flickr.com/photos/tuba/2424237036/
Monday, January 2, 2012
Slide 31
Slide 31 text
HTML5 Tools
HTML5 Boilerplate. A base HTML5 template with
backward compatibility and feature detection
Modernizr. A feature detection js library
Polyfills:
https://github.com/Modernizr/Modernizr/wiki/
HTML5-Cross-browser-Polyfills
Monday, January 2, 2012
Slide 32
Slide 32 text
Demo: HTML
Boilerplate
Page Structure
Best practices
Feature Detection
Monday, January 2, 2012
Slide 33
Slide 33 text
HTML5 IDEs
Komodo Edit
Eclipse / Visual Studio
gVim
Aptana Studio
Monday, January 2, 2012
Slide 34
Slide 34 text
HTML5 Lab
Build a home page for your resume in HTML5 with
no styling
Describe your job history, hobbies and education
Use the boilerplate and semantic elements
Bonus: Add some CSS Styling
Monday, January 2, 2012