SlideShare a Scribd company logo
1 of 77
HTML5
    Report Card
Web Directions South 2010
This talk online
http://www.slideshare.net/
sideshowbarker/html5-report-card
Michael(tm) Smith
mike@w3.org
http://people.w3.org/mike
sideshowbarker
 …on Twitter*, GitHub, etc.
I work for the W3C
  in Japan, based
 at Keio University
     near Tokyo
My official W3C title is:
Special Missions Subsection
   Junior Floor Manager
I’m here today to try to
give a progress update on
HTML5, in the form of a
       report card.
Evaluating HTML5
•   HTML5 ancillary materials
• HTML5 tools support
•   HTML5 features spec’ed
•   HTML5 features implemented
•   HTML5 and accessibility
HTML5 ancillary materials:
       grade:   B -
Ancillary materials are
complements to the spec.
Ancillary materials are the
 materials that most of us
learn from directly (rather
   than the spec itself).
HTML5 differences
     from HTML4

http://w3.org/TR/html5-diff/
Hands-on/
 one-stop shopping
http://html5rocks.com/
Tutorials/how-to
guides for authors
Several print books from
   Jeremy Keith, Bruce
 Lawson & Remy Sharp,
   Mark Pilgrim, more
Dive into HTML5
http://diveintohtml5.org/
The HTML5 Doctors

http://html5doctor.com/
Alternative
authoring references
HTML5:
The Markup Language Reference

http://dev.w3.org/html5/
markup
HTML5: The Markup Language
  Reference is an alternative
front-end to the HTML5 spec
HTML5:
Edition for Web Authors
http://dev.w3.org/html5/
spec-author-view
Breaking news:
  Significant redesign from
Ben Schwarz + Anthony Kolber

      #html5author
HTML5: Edition for Web
Authors is an author-friendly
   subset of the spec that
omits implementation details
Fork me!
http://github.com/benschwarz/
html5forAuthors
http://github.com/sideshowbarker/
html5forAuthors
Bonus:
   Annotated JavaScript/
 EcmaScript 5 spec in HTML*
http://sideshowbarker.github.com/
es5-spec/
New!

http://html5accessibility.com/
…from Steven Faulkner
   @stevefaulkner
HTML5accessibility.com gives
 info about which HTML5 user
interface features are usable by
 people who rely upon assistive
technology (AT) to use the Web.
HTML5
Accessibility workarounds

http://html5accessibility.com/
index-aria.html
Any ancillary materials
I’m missing and should
  mention next time?
HTML5 tools support:
     grade:   C+
HTML5 Validator
     (stable)
http://validator.nu
HTML5 Validator
      (unstable)
http://w3.org/html/check
HTML5, CSS3, etc.,
  feature detection

http://modernizr.com/
The professional badass’s base
  HTML/CSS/JS template for a
fast, robust and future-proof site!

http://html5boilerplate.com/
Any HTML5 tool/
library support I’m
missing and should
mention next time?
Adobe Dreamweaver
  & Illustrator CS5
   HTML5 Packs
HTML5: The Good Parts
• Syntax simplifications: A+
• HTML5 parsing algorithm: A+
• MathML & SVG integration: A+
• New elements/attributes: A+
• New APIs for scripting: A+
HTML5: More Good Parts

• HTML5 design principles: ?
• maintain XHTML support: ?
Syntax simplifications
<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.0
       Transitional//EN"
"http://www.w3.org/TR/xhtml1/
DTD/xhtml1-transitional.dtd">
<!doctype html>
<meta http-equiv="Content-Type"
 content="text/html;
 charset=UTF-8">
<meta charset="UTF-8">
New elements
• <video> & <audio> (no plugins)
• <canvas> (2D/3D image scripting)
• <article>, <section>, <header>
• <details>, <progress>, <meter>...
•   <ruby> (annotations)
• all SVG elements (MathML too)
New attributes
• for client-side validation of forms
  + form controls: date picker, &c.
• draggable (drag-and-drop)
• marking up context menus
• contenteditable (editable pages)
• spellcheck (turn off spell checking)
Crap removal
•<frame>, <frameset>
• <a name>
• more...
New APIs for scripting
• API for <video> & <audio>
• 2D drawing API for <canvas>
• 3D <canvas> API: WebGL*
• getElementsByClassName()
• innerHTML and more…
New APIs for scripting

• Web Storage (local + session)
• Indexed Database (non-SQL)
• Web Messaging (cross-doc/postmg+)
•   Web Workers
• WebSocket API + Protocol
“Friends of HTML5” APIs
•Geolocation
• Device Orientation/Motion
• File API (w/ HTML5 Drag & Drop)
• Selectors API
• Audio API* (sampling+synthesis)
“HTML5” has become
 shorthand for “The
Open Web Platform”.
Web-Platform formats:
 HTML5, CSS3, SVG,
ARIA, and… JavaScript
HTML design principles

http://w3.org/TR/html-design-principles/
HTML design principles

•   Support existing content
•   Ensure interoperability
•   Precisely define UA behavior
•   Handle errors (non-draconian)
•   Evolution not revolution
•   “Priority of constituencies”
Important point:
HTML5 includes XHTML
Even more important point:
IE9+ fully supports XHTML
Grading some specific
  HTML5 features
Two ways to grade
        spec features
•   Does the feature meet market
    needs and user and developer
    needs well or not?
•   Is the feature currently well-
    supported in browsers or not?
Let’s start by grading
some features on how
well they meet market/
 user/developer needs
getElementsByClassName
   spec grade:   A+
Interactive & UI elements
         <details>,
  <progress>, <meter>
    spec grade:   B+
New structural elements
 <article>, <section>
      grade:   B ?
<canvas> 2D
spec grade:   B-/D- ?
<canvas> 3D
spec grade:   B+/D- ? 
<video>
spec grade:   B+/C- ?
Let’s grade some features
   on how well they are
  currently supported in
         browsers
Example: drag & drop
interopability:   D- ?
That’s it.
Thank you.
Michael(tm) Smith
mike@w3.org
http://people.w3.org/mike
sideshowbarker
 …on Twitter*, GitHub, etc.
More Breaking News
Steven Faulkner and
   Bruce Lawson
a.k.a. The A-Team:
Australia Tour 2010
19 November
to 1 December
Sydney, Canberra,
   Melbourne,
Brisbane, Perth(!)
Buy these men
    beers!
More info
http://wipa.org.au/html5/
http://lanyrd.com/2010/
the-a-team-aria-html5/
More: Steve Faulkner & Hans
  Hillen talk at Fronteers

   http://slideshare.net/
   stevefaulkner/html5-
   accessibility-is-it-ready-yet
“Accessibility is
 always bolted on…
the earlier it is bolted
on, the more robust.”

More Related Content

What's hot

Online shop system use case diagram report
Online shop system use case diagram reportOnline shop system use case diagram report
Online shop system use case diagram report
Mahan Gheib Khah Mashak
 

What's hot (20)

Lesson 1: Introduction to HTML
Lesson 1: Introduction to HTMLLesson 1: Introduction to HTML
Lesson 1: Introduction to HTML
 
Html character entities
Html character entitiesHtml character entities
Html character entities
 
Session handling in php
Session handling in phpSession handling in php
Session handling in php
 
Web scraping
Web scrapingWeb scraping
Web scraping
 
Setting up your development environment
Setting up your development environmentSetting up your development environment
Setting up your development environment
 
Basic Details of HTML and CSS.pdf
Basic Details of HTML and CSS.pdfBasic Details of HTML and CSS.pdf
Basic Details of HTML and CSS.pdf
 
HTML + CSS Examples
HTML + CSS ExamplesHTML + CSS Examples
HTML + CSS Examples
 
Using Machine Learning and Chatbots to handle 1st line Technical Support
Using Machine Learning and Chatbots to handle 1st line Technical SupportUsing Machine Learning and Chatbots to handle 1st line Technical Support
Using Machine Learning and Chatbots to handle 1st line Technical Support
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
Web development presentation
Web development presentationWeb development presentation
Web development presentation
 
Html ppt
Html pptHtml ppt
Html ppt
 
What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)What is HTML - An Introduction to HTML (Hypertext Markup Language)
What is HTML - An Introduction to HTML (Hypertext Markup Language)
 
Online shop system use case diagram report
Online shop system use case diagram reportOnline shop system use case diagram report
Online shop system use case diagram report
 
Bootstrap PPT by Mukesh
Bootstrap PPT by MukeshBootstrap PPT by Mukesh
Bootstrap PPT by Mukesh
 
E-learning METHOD OF TRAINING , by Aviral BIsht
E-learning METHOD OF TRAINING , by Aviral BIshtE-learning METHOD OF TRAINING , by Aviral BIsht
E-learning METHOD OF TRAINING , by Aviral BIsht
 
virtual classroom for college major project for computer science.
virtual classroom for college major project for computer science.virtual classroom for college major project for computer science.
virtual classroom for college major project for computer science.
 
HTML5 & CSS3
HTML5 & CSS3 HTML5 & CSS3
HTML5 & CSS3
 
Javascript
JavascriptJavascript
Javascript
 
Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01Cascading Style Sheets - Part 01
Cascading Style Sheets - Part 01
 
Web fundamentals - part 1
Web fundamentals - part 1Web fundamentals - part 1
Web fundamentals - part 1
 

Viewers also liked

HTML5 Accessibility
HTML5 AccessibilityHTML5 Accessibility
HTML5 Accessibility
User Vision
 
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Steven Faulkner
 

Viewers also liked (9)

Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
 
HTML5 and CSS3
HTML5 and CSS3HTML5 and CSS3
HTML5 and CSS3
 
HTML5 Accessibility
HTML5 AccessibilityHTML5 Accessibility
HTML5 Accessibility
 
Real World Web Standards
Real World Web StandardsReal World Web Standards
Real World Web Standards
 
TestPlan for IIT website
TestPlan for IIT websiteTestPlan for IIT website
TestPlan for IIT website
 
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
Accessibility of HTML5 and Rich Internet Applications - CSUN 2012
 
Angular 2
Angular 2Angular 2
Angular 2
 
29 Essential AngularJS Interview Questions
29 Essential AngularJS Interview Questions29 Essential AngularJS Interview Questions
29 Essential AngularJS Interview Questions
 
Web 3.0 The Semantic Web
Web 3.0 The Semantic WebWeb 3.0 The Semantic Web
Web 3.0 The Semantic Web
 

Similar to HTML5 Report Card

HTML5, CSS3 and the Future of the Web
HTML5, CSS3 and the Future of the WebHTML5, CSS3 and the Future of the Web
HTML5, CSS3 and the Future of the Web
Berg Brandt
 
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter Lubbers
 

Similar to HTML5 Report Card (20)

HTML 5
HTML 5HTML 5
HTML 5
 
Delhi student's day
Delhi student's dayDelhi student's day
Delhi student's day
 
Html 5 in a big nutshell
Html 5 in a big nutshellHtml 5 in a big nutshell
Html 5 in a big nutshell
 
HTML5
HTML5HTML5
HTML5
 
HTML5 Refresher
HTML5 RefresherHTML5 Refresher
HTML5 Refresher
 
HTML5, CSS3 and the Future of the Web
HTML5, CSS3 and the Future of the WebHTML5, CSS3 and the Future of the Web
HTML5, CSS3 and the Future of the Web
 
Html5
Html5Html5
Html5
 
The current status of html5 technology and standard
The current status of html5 technology and standardThe current status of html5 technology and standard
The current status of html5 technology and standard
 
Html5 Future of WEB
Html5 Future of WEBHtml5 Future of WEB
Html5 Future of WEB
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
 
Fundamentals of HTML5
Fundamentals of HTML5Fundamentals of HTML5
Fundamentals of HTML5
 
HTML5のご紹介
HTML5のご紹介HTML5のご紹介
HTML5のご紹介
 
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
HTML5 Smart Markup for Smarter Websites [FoWD NYC 2011]
 
Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1Html5 deciphered - designing concepts part 1
Html5 deciphered - designing concepts part 1
 
HTML5 and CSS3 refresher
HTML5 and CSS3 refresherHTML5 and CSS3 refresher
HTML5 and CSS3 refresher
 
Html5
Html5Html5
Html5
 
HTML 5 Complete Reference
HTML 5 Complete ReferenceHTML 5 Complete Reference
HTML 5 Complete Reference
 
Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011Peter lubbers-html5-overview-sf-dev-conf-2011
Peter lubbers-html5-overview-sf-dev-conf-2011
 
Html5 Overview
Html5 OverviewHtml5 Overview
Html5 Overview
 
Change by HTML5
Change by HTML5Change by HTML5
Change by HTML5
 

Recently uploaded

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Recently uploaded (20)

Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 

HTML5 Report Card

Editor's Notes