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

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 Scriptwesley chun
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Paola De la Torre
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
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...Martijn de Jong
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024The Digital Insurer
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfEnterprise Knowledge
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Enterprise Knowledge
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 

Recently uploaded (20)

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
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
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...
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 

Brief history of HTML5