SlideShare a Scribd company logo
1 of 55
Download to read offline
A brief history of HTML5




                       http://www.flickr.com/photos/smokingpermitted/1952627233/sizes/l/in/photostream/

Monday, May 16, 2011
if you havenʼt been to the great wall, you are not a gentleman




                       http://www.flickr.com/photos/smokingpermitted/1952627233/sizes/l/in/photostream/

Monday, May 16, 2011
History of
    HTML

Monday, May 16, 2011
I created HTML




                       http://mediaarchive.cern.ch/MediaArchive/Photo/Public/1998/9806033/9806033/9806033-A4-at-144-dpi.jpg
Monday, May 16, 2011
Monday, May 16, 2011
Monday, May 16, 2011
W3C maintains different technologies

                              HTTP
                                               XML

              GeoLocation                                   XSLT

                       SOAP
                                                     HTML
                           SVG
                                     RDF


Monday, May 16, 2011
Browser War




                         http://www.flickr.com/photos/soldiersmediacenter/5576794534/sizes/l/in/photostream/

Monday, May 16, 2011
http://www.computerhistory.org/timeline/images/1994_netscape_large.jpg
Monday, May 16, 2011
http://www.computerhistory.org/timeline/images/1994_netscape_large.jpg
Monday, May 16, 2011
http://pica.nipic.com/2008-05-08/200858114947970_2.jpg
Monday, May 16, 2011
HTML 2.0 1995
                       HTML 3.2 1997
                       HTML 4.0 1997
                       HTML 4.01 1999

Monday, May 16, 2011
Why wasn’t there
        HTML5 soon after?




Monday, May 16, 2011
W3C has no intention to
         extend HTML4 as such.
         Instead, further work is
         focusing on a reformulation
         of HTML in XML.

                        November 1999


Monday, May 16, 2011
...while the ancestry of
           XHTML2 comes from
           HTML4, XHTML 1.0 and
           XHTML 1.1. It is not intended
           to be backward compatible
           with its earlier versions

                               August 2002

Monday, May 16, 2011
XHTML2


                       <img>
                       <p src="map.png"></p>




Monday, May 16, 2011
Paper to W3C




        http://www.w3.org/2004/04/webapps-cdf-ws/papers/opera.html
Monday, May 16, 2011
Paper to W3C




                       WHAT-WG
                       http://www.w3.org/2004/04/webapps-cdf-ws/papers/opera.html

Monday, May 16, 2011
2007 W3C and WHATWG jointly develops
                             WebApps1.0, calls it HTML5

Monday, May 16, 2011
Paper to W3C




                       2007 W3C and WHATWG jointly develops
                             WebApps1.0, calls it HTML5
                                http://www.w3.org/2004/04/webapps-cdf-ws/papers/opera.html

Monday, May 16, 2011
HTML evolution




Monday, May 16, 2011
HTML5 == HTML4 ++




Monday, May 16, 2011
Design
  Pattern

                       http://www.flickr.com/photos/bbaunach/495123533/sizes/o/in/photostream/
Monday, May 16, 2011
Backward compatibilities




                       support what HTML4 has been doing

                         http://www.flickr.com/photos/leejordan/2484541616/sizes/l/in/photostream/
Monday, May 16, 2011
XHTML characteristics




  Element and
                        For non-empty        Documents
  attribute names
                        elements, end       must be well-
  must be in lower
  case                  tags are required   formed




Monday, May 16, 2011
XHTML characteristics




  Element and
                        For non-empty           Documents
  attribute names
                        elements, end          must be well-
  must be in lower
  case                  tags are required      formed




Monday, May 16, 2011
well-defined error handling




Monday, May 16, 2011
new elements, practical

                   HTML4 / XHTML                                                                HTML5




                             http://www.flickr.com/photos/sebleedelisle/3519515347/sizes/l/in/photostream/

Monday, May 16, 2011
common ID                 “”values




                                              Text




                       http://devfiles.myopera.com/articles/572/idlist-url.htm


Monday, May 16, 2011
http://www.flickr.com/photos/sebleedelisle/3519515347/sizes/l/in/photostream/

Monday, May 16, 2011
openness




                       http://www.flickr.com/photos/sebleedelisle/3519515347/sizes/l/in/photostream/

Monday, May 16, 2011
Avoid needless complexity


                       HTML 4.01
                       <meta http-equiv="Content-Type"
                       content="text/html; charset=utf-8">


                       XHTML 1.0
                       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


                       HTML5
                       <!DOCTYPE html>

                                 http://www.flickr.com/photos/sebleedelisle/3519515347/sizes/l/in/photostream/

Monday, May 16, 2011
Avoid needless complexity



                       <link rel="stylesheet" type="text/css"
                       href="file.css">

                       <script type="text/javascript">
                       </script>




                             http://www.flickr.com/photos/sebleedelisle/3519515347/sizes/l/in/photostream/

Monday, May 16, 2011
The Video
    Story
                                                            source: http://zibin.tehais.com/?p=1641


                       http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-February/009702.html

Monday, May 16, 2011
Video




                        Opera proposed video tag in WHAT WG
                                         source: http://zibin.tehais.com/?p=1641
                                  mailing list in 2007
                               http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-February/009702.html

Monday, May 16, 2011
Code
         <video src=”video.ogv”
         controls
         autoplayposter=”poster.jpg”
         width=”320”
         height=”240”>fallback
         </video>


                                                            source: http://zibin.tehais.com/?p=1641


                       http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-February/009702.html

Monday, May 16, 2011
no love for flash




                       Apple abandon support for flash in 2010
Monday, May 16, 2011
Adobe




     Adobe CTO goes for WebM support and shows HTML
                      extension pack
                       http://ntt.cc/wp-content/uploads/2010/05/AdobeCTOKevinLynchDemosHTML5ToolsAtGoogleIO.jpg

Monday, May 16, 2011
format




                                source: http://zibin.tehais.com/?p=1641



Monday, May 16, 2011
format

                                WebM                                    H.264




                                       CODEC
                                         source: http://zibin.tehais.com/?p=1641



Monday, May 16, 2011
<video src="movie.mp4">
                       <!-- fallback content -->
                       </video>




Monday, May 16, 2011
<object data="movie.swf">
                       <!-- fallback content -->
                       </object>




Monday, May 16, 2011
<video>
                       <source src="movie.mp4">
                       <source src="movie.ogv">
                       <object data="movie.swf">
                       <a href="movie.mp4">download</a>
                       </object>
                       </video>




Monday, May 16, 2011
2014?
Monday, May 16, 2011
HTML5 timeline




                            http://nadita.com/murakami/epub-css/
Monday, May 16, 2011
Challenges to
     Standards

Monday, May 16, 2011
http://farm4.static.flickr.com/3640/3315062242_c21a4fd24c.jpg
Monday, May 16, 2011
http://farm4.static.flickr.com/3640/3315062242_c21a4fd24c.jpg
Monday, May 16, 2011
Politics of standards

Monday, May 16, 2011
Monday, May 16, 2011
Software, like all technologies, is inherently political.
         Code inevitably reflects the choices, biases and desires
         of its creators.
                        —Jamais Cascio




Monday, May 16, 2011
tool or trade
Monday, May 16, 2011
branding
Monday, May 16, 2011
Where in the world is Standards?




Monday, May 16, 2011
twitter: zibin
                       slideshare.net/zibin




Monday, May 16, 2011

More Related Content

More from Zi Bin Cheah

Web Standards Indonesia Tour
Web Standards Indonesia TourWeb Standards Indonesia Tour
Web Standards Indonesia TourZi Bin Cheah
 
let's talk web standards
let's talk web standardslet's talk web standards
let's talk web standardsZi Bin Cheah
 
Mobile Web Trends inIndonesia
Mobile Web Trends inIndonesiaMobile Web Trends inIndonesia
Mobile Web Trends inIndonesiaZi Bin Cheah
 
Browsers & Web Technology - an Opera talk
Browsers & Web Technology - an Opera talkBrowsers & Web Technology - an Opera talk
Browsers & Web Technology - an Opera talkZi Bin Cheah
 
Designing for the mobile web
Designing for the mobile webDesigning for the mobile web
Designing for the mobile webZi Bin Cheah
 
Standards: politics, case studies
Standards: politics, case studiesStandards: politics, case studies
Standards: politics, case studiesZi Bin Cheah
 
CSS3大補貼 - COSCUP/GNOME.asia
CSS3大補貼 - COSCUP/GNOME.asiaCSS3大補貼 - COSCUP/GNOME.asia
CSS3大補貼 - COSCUP/GNOME.asiaZi Bin Cheah
 
Html5/CSS3 in shanghai 2010
Html5/CSS3 in shanghai 2010Html5/CSS3 in shanghai 2010
Html5/CSS3 in shanghai 2010Zi Bin Cheah
 
HTML5/CSS3 @ Baidu
HTML5/CSS3 @ BaiduHTML5/CSS3 @ Baidu
HTML5/CSS3 @ BaiduZi Bin Cheah
 
谈一谈HTML5/CSS3 @ WebRebuild 2010
谈一谈HTML5/CSS3 @ WebRebuild 2010谈一谈HTML5/CSS3 @ WebRebuild 2010
谈一谈HTML5/CSS3 @ WebRebuild 2010Zi Bin Cheah
 
Cutting Edge CSS3 @ WebExpo Tour 2010
Cutting Edge CSS3 @ WebExpo Tour 2010Cutting Edge CSS3 @ WebExpo Tour 2010
Cutting Edge CSS3 @ WebExpo Tour 2010Zi Bin Cheah
 
Web Standards @ Opera Talk Oslo
Web Standards @ Opera Talk OsloWeb Standards @ Opera Talk Oslo
Web Standards @ Opera Talk OsloZi Bin Cheah
 
Standards Talk - Opera Uni Tour Indonesia
Standards Talk - Opera Uni Tour IndonesiaStandards Talk - Opera Uni Tour Indonesia
Standards Talk - Opera Uni Tour IndonesiaZi Bin Cheah
 
Browser War 2: Standards strikes back
Browser War 2: Standards strikes backBrowser War 2: Standards strikes back
Browser War 2: Standards strikes backZi Bin Cheah
 

More from Zi Bin Cheah (14)

Web Standards Indonesia Tour
Web Standards Indonesia TourWeb Standards Indonesia Tour
Web Standards Indonesia Tour
 
let's talk web standards
let's talk web standardslet's talk web standards
let's talk web standards
 
Mobile Web Trends inIndonesia
Mobile Web Trends inIndonesiaMobile Web Trends inIndonesia
Mobile Web Trends inIndonesia
 
Browsers & Web Technology - an Opera talk
Browsers & Web Technology - an Opera talkBrowsers & Web Technology - an Opera talk
Browsers & Web Technology - an Opera talk
 
Designing for the mobile web
Designing for the mobile webDesigning for the mobile web
Designing for the mobile web
 
Standards: politics, case studies
Standards: politics, case studiesStandards: politics, case studies
Standards: politics, case studies
 
CSS3大補貼 - COSCUP/GNOME.asia
CSS3大補貼 - COSCUP/GNOME.asiaCSS3大補貼 - COSCUP/GNOME.asia
CSS3大補貼 - COSCUP/GNOME.asia
 
Html5/CSS3 in shanghai 2010
Html5/CSS3 in shanghai 2010Html5/CSS3 in shanghai 2010
Html5/CSS3 in shanghai 2010
 
HTML5/CSS3 @ Baidu
HTML5/CSS3 @ BaiduHTML5/CSS3 @ Baidu
HTML5/CSS3 @ Baidu
 
谈一谈HTML5/CSS3 @ WebRebuild 2010
谈一谈HTML5/CSS3 @ WebRebuild 2010谈一谈HTML5/CSS3 @ WebRebuild 2010
谈一谈HTML5/CSS3 @ WebRebuild 2010
 
Cutting Edge CSS3 @ WebExpo Tour 2010
Cutting Edge CSS3 @ WebExpo Tour 2010Cutting Edge CSS3 @ WebExpo Tour 2010
Cutting Edge CSS3 @ WebExpo Tour 2010
 
Web Standards @ Opera Talk Oslo
Web Standards @ Opera Talk OsloWeb Standards @ Opera Talk Oslo
Web Standards @ Opera Talk Oslo
 
Standards Talk - Opera Uni Tour Indonesia
Standards Talk - Opera Uni Tour IndonesiaStandards Talk - Opera Uni Tour Indonesia
Standards Talk - Opera Uni Tour Indonesia
 
Browser War 2: Standards strikes back
Browser War 2: Standards strikes backBrowser War 2: Standards strikes back
Browser War 2: Standards strikes back
 

Recently uploaded

The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfAddepto
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionDilum Bandara
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 

Recently uploaded (20)

The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdfGen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 

Brief history of HTML5