This document provides an overview of HTML5 history and features. It discusses the evolution of HTML standards from early versions to HTML5, including key events like the browser wars. It outlines the vision and rules of HTML5, such as using <!DOCTYPE html> and removing closing tags from void elements. New HTML5 features covered include semantic elements, APIs, and tools to support HTML5 development.
2. Agenda
HTML History
HTML5 Rules
New Features
Browser Support
HTML5 Page Structure
Wednesday, January 30, 13
3. 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/
Wednesday, January 30, 13
4. 1991 HTML1
Described in a document called “HTML Tags”
Included 20 elements
Influenced by SGML
Wednesday, January 30, 13
5. 1995 HTML2
One year after
Netscape was founded
Forms
Tables
Image Maps
http://www.flickr.com/photos/kalleboo/2214787531/
Wednesday, January 30, 13
6. 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
Wednesday, January 30, 13
7. 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/
Wednesday, January 30, 13
8. After The Browser Wars
W3C starts to work on
XHTML, MathML, SVG
and others XML based
technologies
HTML is considered
“finished”
Wednesday, January 30, 13
9. HTML4
Suitable for web sites, not
web applications
Wednesday, January 30, 13
10. 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
Wednesday, January 30, 13
11. 2009 HTML5
No more XHTML
Many new elements
Web Application Oriented
Wednesday, January 30, 13
12. 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
Wednesday, January 30, 13
13. Web Tech History
1991 HTML 1999 HTML4
1995 HTML2 2000 XHTML1
1996 CSS1 + 2002 Tableless Web
JavaScript Design
1997 HTML3.2 2005 Ajax
1998 CSS2 2009 HTML5
Wednesday, January 30, 13
15. 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
Wednesday, January 30, 13
16. 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.
Wednesday, January 30, 13
17. Content & Presentation
HTML5 deprecates many old presentational
elements in favor of CSS.
Enhancements in CSS3 selectors enable better
separation between content and presentation
Wednesday, January 30, 13
18. Plugin Free Paradigm
Provide native APIs for everything that used to
required a proprietary plugin
Flash is no longer mandatory
Wednesday, January 30, 13
19. HTML5 Vision
Paving The Cow Path
Utility over Purity
Separation of Content and Presentation
Plugin Free
Wednesday, January 30, 13
20. Q&A
http://www.flickr.com/photos/92163630@N00/95509221/
Wednesday, January 30, 13
22. Doctype
Remove old clutter from the doctype declaration
For an HTML5 page, use:
<!DOCTYPE html>
MIME Type: text/html
Wednesday, January 30, 13
23. Character Encoding
Remove old clutter from encoding definitions
Use:
<meta charset=”UTF-8”>
Note no need to close meta tags
Can also use the old syntax
Wednesday, January 30, 13
24. Tag Fun
No need to close void elements
both <br /> and <br> are valid
HTML Validator:
http://validator.w3.org/
Wednesday, January 30, 13
25. HTML5 New Features
New Syntactic Elements
New Semantic Elements
New APIs
Wednesday, January 30, 13
26. HTML5 Semantics
WHATWG analyzed and learned the uses of <div>
elements in many web sites
They have found a few common usages
HTML5 includes specialized elements for these
common usages
Can still use a <div>
Wednesday, January 30, 13
27. 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
Wednesday, January 30, 13
28. New APIs
Web Storage Geolocation
Web SQL Device Orientation
Application Cache Forms
Web Workers Audio & Video
Web Sockets Canvas
Desktop Notifications Web GL
Drag & Drop History API
File System API And More...
Wednesday, January 30, 13
29. HTML
Polyfills
Replacement library for
older browsers
Make a smooth switch to
HTML5
http://www.flickr.com/photos/tuba/2424237036/
Wednesday, January 30, 13
30. 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
Wednesday, January 30, 13
31. Demo: HTML
Boilerplate
Page Structure
Best practices
Feature Detection
Wednesday, January 30, 13
32. HTML5 IDEs
WebStorm
Komodo Edit
Eclipse / Visual Studio
gVim
Aptana Studio
Wednesday, January 30, 13
33. 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
Wednesday, January 30, 13