SlideShare une entreprise Scribd logo
1  sur  17
Why Embrace “HTML5”?
How We Got Here In 1999, a website that included images and an eye-catching design was considered “top of the line” 2004 Web Hypertext Application Technology Working Group (WHATWG) was formed  WHATWG felt W3c was ignoring the needs of users and browsers makers by focusing on XHTML2 June 2009 W3C abandons work on XHTML2
What “HTML5” Is Not Not a reformulation of previous versions of the language XHTML 1.0 was basically HTML 4 with strict XML syntax.  Both HTML4 and XHTML 1.0 are still in general use "HTML5" as we know it is steadily gaining headway daily
What “Html5” Is “HTML5” includes all valid elements from both HTML 4 and XHTML 1.0 Because of this, it can be said that all websites are currently using “HTML5” Designed with some primary principles in mind to ensure it works on just about every platform Compatible with older browsers Capable of handling errors gracefully
What “Html5” Is Redefinitions of existing markup elements, and new elements that allow web designers to be more expressive in the semantics of their markup Any new form elements not understood or supported by older browsers automatically revert to what the browser can support, in most cases, input type=“text”
How HTML5 Was Designed The design principles used are summed up on the W3C’s HTML Design Principles page http://www.w3.org/TR/html-design-principles/
A Tale of Two Specifications WHATWG Spec http://www.whatwg.org/specs/web-apps/current-work/multipage/ W3C Markup only Spec http://dev.w3.org/html5/markup/ Two specifications? Should I be worried? No. There are only subtle differences between the two.
What’s The Difference? The WHATWG spec is a little more informal and experimental The W3c Spec is  more formal, and based largely on work done in WHATWG spec what browser manufacturers follow when they implement new functionality The HTML5 spec has recently been renamed by WHATWG to "HTML" (dropping the "5")
A New Standard The newly renamed “HTML” specification is now called a "living standard"  Meaning that it will be in constant development  Will no longer be referred to using the incrementing numbers
Why Embrace It? HTML is forward thinking New HTML Form elements can validate themselves (client side) Form Elements not understood, or supported by browsers automatically revert to input type=“text” Developers can add additional validation if this happens Richer more meaningful semantics in markup
What About Older Browsers, IE? There are a number of excellent polyfills, or polyfillers out that enhance browser capabilities to allow them to work with these new elements One example, Modernizr-1.7.js, detects what features your browser does/doesn’t support and adds appropriate classes to the corresponding HTML elements that allow designers to easily target them
Is It Ready For Primetime? Yes! Some common reasons people give for not using it are: “It’s not a W3C Recommendation” Neither is CSS2 or CSS 2.1  Should we stop using CSS to style our pages and content since it’s not a recommendation? No. We use it anyway. “But it’s not stable” Yes it is. It includes all valid elements from both HTML 4 and XHTML 1.0 Both of these are stable so HTML5 is stable
Is It Ready For Primetime? “It’s  too young” HTML5 as we know it now, is almost 4 years old It’s components HTML4 (14 yrs old) became a recommendation in December of 1997 XHTML 1.0 (11 yrs old) became a recommendation in January 2000 “It’s not fully supported in all browsers” Again, neither is CSS but we use it HTML5 was designed to degrade gracefully
Is It Ready For Primetime? “It’s not supported by IE6.” That’s where the polyfills mentioned earlier come in With a judicious use of polyfills, plus current markup techniques, your webpage  will be able to give the user the best experience their browser / device of choice can support.
So, Who’s Using “HTML5”? New Doctype only Google USA.gov Yahoo Netflix … and others
So, Who’s Using “HTML5”? New Doctype and New Markup MailChimp Slashdot About Apple … and others
Isn’t It Time You Embraced HTML?

Contenu connexe

Tendances

UMK Lecture 5 - HTML5 latest v7
UMK Lecture 5 - HTML5 latest v7UMK Lecture 5 - HTML5 latest v7
UMK Lecture 5 - HTML5 latest v7
Hisham Mat Hussin
 
Front-End Modernization for Mortals
Front-End Modernization for MortalsFront-End Modernization for Mortals
Front-End Modernization for Mortals
cgack
 
Testing apps with MTM and Tea Foundation Service
Testing apps with MTM and Tea Foundation ServiceTesting apps with MTM and Tea Foundation Service
Testing apps with MTM and Tea Foundation Service
Kevin DeRudder
 
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want itUse html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
Kevin DeRudder
 
Building cross platform applications using Windows Azure Mobile Services
Building cross platform applications using Windows Azure Mobile ServicesBuilding cross platform applications using Windows Azure Mobile Services
Building cross platform applications using Windows Azure Mobile Services
Kevin DeRudder
 
Build Applications Faster with SWCs
Build Applications Faster with SWCsBuild Applications Faster with SWCs
Build Applications Faster with SWCs
Chris Black
 
Eliminating End Game - How to be a hero and streamline documentation production
Eliminating End Game - How to be a hero and streamline documentation productionEliminating End Game - How to be a hero and streamline documentation production
Eliminating End Game - How to be a hero and streamline documentation production
WebWorks
 
Bootstrapping your plugin
Bootstrapping your pluginBootstrapping your plugin
Bootstrapping your plugin
Marko Heijnen
 

Tendances (20)

AWTW - Automated Web Translation Workflow
AWTW - Automated Web Translation WorkflowAWTW - Automated Web Translation Workflow
AWTW - Automated Web Translation Workflow
 
WebMatrix
WebMatrixWebMatrix
WebMatrix
 
UMK Lecture 5 - HTML5 latest v7
UMK Lecture 5 - HTML5 latest v7UMK Lecture 5 - HTML5 latest v7
UMK Lecture 5 - HTML5 latest v7
 
Front-End Modernization for Mortals
Front-End Modernization for MortalsFront-End Modernization for Mortals
Front-End Modernization for Mortals
 
Visual Studio ❤ JavaScript
Visual Studio ❤ JavaScriptVisual Studio ❤ JavaScript
Visual Studio ❤ JavaScript
 
Testing apps with MTM and Tea Foundation Service
Testing apps with MTM and Tea Foundation ServiceTesting apps with MTM and Tea Foundation Service
Testing apps with MTM and Tea Foundation Service
 
The state of testing @ Microsoft
The state of testing @ MicrosoftThe state of testing @ Microsoft
The state of testing @ Microsoft
 
Use html5 to build what you want, where you want it
Use html5 to build what you want, where you want itUse html5 to build what you want, where you want it
Use html5 to build what you want, where you want it
 
VISUG: Visual studio for web developers
VISUG: Visual studio for web developersVISUG: Visual studio for web developers
VISUG: Visual studio for web developers
 
Visual Studio Productivity Tools
Visual Studio Productivity ToolsVisual Studio Productivity Tools
Visual Studio Productivity Tools
 
Building cross platform applications using Windows Azure Mobile Services
Building cross platform applications using Windows Azure Mobile ServicesBuilding cross platform applications using Windows Azure Mobile Services
Building cross platform applications using Windows Azure Mobile Services
 
Build Applications Faster with SWCs
Build Applications Faster with SWCsBuild Applications Faster with SWCs
Build Applications Faster with SWCs
 
MVA Completed Courses
MVA Completed CoursesMVA Completed Courses
MVA Completed Courses
 
Eliminating End Game - How to be a hero and streamline documentation production
Eliminating End Game - How to be a hero and streamline documentation productionEliminating End Game - How to be a hero and streamline documentation production
Eliminating End Game - How to be a hero and streamline documentation production
 
Bootstrapping your plugin
Bootstrapping your pluginBootstrapping your plugin
Bootstrapping your plugin
 
WebMatrix
WebMatrixWebMatrix
WebMatrix
 
Windows 8
Windows 8Windows 8
Windows 8
 
Building plugins like a pro
Building plugins like a proBuilding plugins like a pro
Building plugins like a pro
 
Ppt full stack developer
Ppt full stack developerPpt full stack developer
Ppt full stack developer
 
Browser As Platform
Browser As PlatformBrowser As Platform
Browser As Platform
 

En vedette (9)

Class 17
Class 17Class 17
Class 17
 
Cultural conflict resolution
Cultural conflict resolutionCultural conflict resolution
Cultural conflict resolution
 
Class 20
Class 20Class 20
Class 20
 
Class 21
Class 21Class 21
Class 21
 
Class11
Class11Class11
Class11
 
Class4
Class4Class4
Class4
 
jacando for business
jacando for businessjacando for business
jacando for business
 
Class 21
Class 21Class 21
Class 21
 
Class22
Class22Class22
Class22
 

Similaire à Why Embrace "Html5"?

XHTML Web Designs.pdf
XHTML Web Designs.pdfXHTML Web Designs.pdf
XHTML Web Designs.pdf
Ayesha Siddika
 
IJCER (www.ijceronline.com) International Journal of computational Engineerin...
IJCER (www.ijceronline.com) International Journal of computational Engineerin...IJCER (www.ijceronline.com) International Journal of computational Engineerin...
IJCER (www.ijceronline.com) International Journal of computational Engineerin...
ijceronline
 

Similaire à Why Embrace "Html5"? (20)

HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5HTML5 Introduction – Features and Resources for HTML5
HTML5 Introduction – Features and Resources for HTML5
 
Everything you need to know about HTML5 in 15 min
Everything you need to know about HTML5 in 15 minEverything you need to know about HTML5 in 15 min
Everything you need to know about HTML5 in 15 min
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
HTML 5 Complete Reference
HTML 5 Complete ReferenceHTML 5 Complete Reference
HTML 5 Complete Reference
 
Introduction to html5
Introduction to html5Introduction to html5
Introduction to html5
 
HTML 5
HTML 5HTML 5
HTML 5
 
XHTML Web Designs.pdf
XHTML Web Designs.pdfXHTML Web Designs.pdf
XHTML Web Designs.pdf
 
Introduction to html55
Introduction to html55Introduction to html55
Introduction to html55
 
Html5(2)
Html5(2)Html5(2)
Html5(2)
 
Html5(2)
Html5(2)Html5(2)
Html5(2)
 
Html5
Html5Html5
Html5
 
1._Introduction_to_HTML5 powerpoint presentation
1._Introduction_to_HTML5 powerpoint presentation1._Introduction_to_HTML5 powerpoint presentation
1._Introduction_to_HTML5 powerpoint presentation
 
1. Introduction to HTML5.ppt
1. Introduction to HTML5.ppt1. Introduction to HTML5.ppt
1. Introduction to HTML5.ppt
 
1._Introduction_to_HTML5[1].MCA MODULE 1 NOTES
1._Introduction_to_HTML5[1].MCA MODULE 1 NOTES1._Introduction_to_HTML5[1].MCA MODULE 1 NOTES
1._Introduction_to_HTML5[1].MCA MODULE 1 NOTES
 
HTML5 101
HTML5 101HTML5 101
HTML5 101
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
Delhi student's day
Delhi student's dayDelhi student's day
Delhi student's day
 
IJCER (www.ijceronline.com) International Journal of computational Engineerin...
IJCER (www.ijceronline.com) International Journal of computational Engineerin...IJCER (www.ijceronline.com) International Journal of computational Engineerin...
IJCER (www.ijceronline.com) International Journal of computational Engineerin...
 
Html5
Html5Html5
Html5
 

Dernier

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
 

Dernier (20)

GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
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
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
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...
 
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
 
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
 
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
 
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
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
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
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
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
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 

Why Embrace "Html5"?

  • 2. How We Got Here In 1999, a website that included images and an eye-catching design was considered “top of the line” 2004 Web Hypertext Application Technology Working Group (WHATWG) was formed WHATWG felt W3c was ignoring the needs of users and browsers makers by focusing on XHTML2 June 2009 W3C abandons work on XHTML2
  • 3. What “HTML5” Is Not Not a reformulation of previous versions of the language XHTML 1.0 was basically HTML 4 with strict XML syntax. Both HTML4 and XHTML 1.0 are still in general use "HTML5" as we know it is steadily gaining headway daily
  • 4. What “Html5” Is “HTML5” includes all valid elements from both HTML 4 and XHTML 1.0 Because of this, it can be said that all websites are currently using “HTML5” Designed with some primary principles in mind to ensure it works on just about every platform Compatible with older browsers Capable of handling errors gracefully
  • 5. What “Html5” Is Redefinitions of existing markup elements, and new elements that allow web designers to be more expressive in the semantics of their markup Any new form elements not understood or supported by older browsers automatically revert to what the browser can support, in most cases, input type=“text”
  • 6. How HTML5 Was Designed The design principles used are summed up on the W3C’s HTML Design Principles page http://www.w3.org/TR/html-design-principles/
  • 7. A Tale of Two Specifications WHATWG Spec http://www.whatwg.org/specs/web-apps/current-work/multipage/ W3C Markup only Spec http://dev.w3.org/html5/markup/ Two specifications? Should I be worried? No. There are only subtle differences between the two.
  • 8. What’s The Difference? The WHATWG spec is a little more informal and experimental The W3c Spec is more formal, and based largely on work done in WHATWG spec what browser manufacturers follow when they implement new functionality The HTML5 spec has recently been renamed by WHATWG to "HTML" (dropping the "5")
  • 9. A New Standard The newly renamed “HTML” specification is now called a "living standard" Meaning that it will be in constant development Will no longer be referred to using the incrementing numbers
  • 10. Why Embrace It? HTML is forward thinking New HTML Form elements can validate themselves (client side) Form Elements not understood, or supported by browsers automatically revert to input type=“text” Developers can add additional validation if this happens Richer more meaningful semantics in markup
  • 11. What About Older Browsers, IE? There are a number of excellent polyfills, or polyfillers out that enhance browser capabilities to allow them to work with these new elements One example, Modernizr-1.7.js, detects what features your browser does/doesn’t support and adds appropriate classes to the corresponding HTML elements that allow designers to easily target them
  • 12. Is It Ready For Primetime? Yes! Some common reasons people give for not using it are: “It’s not a W3C Recommendation” Neither is CSS2 or CSS 2.1 Should we stop using CSS to style our pages and content since it’s not a recommendation? No. We use it anyway. “But it’s not stable” Yes it is. It includes all valid elements from both HTML 4 and XHTML 1.0 Both of these are stable so HTML5 is stable
  • 13. Is It Ready For Primetime? “It’s too young” HTML5 as we know it now, is almost 4 years old It’s components HTML4 (14 yrs old) became a recommendation in December of 1997 XHTML 1.0 (11 yrs old) became a recommendation in January 2000 “It’s not fully supported in all browsers” Again, neither is CSS but we use it HTML5 was designed to degrade gracefully
  • 14. Is It Ready For Primetime? “It’s not supported by IE6.” That’s where the polyfills mentioned earlier come in With a judicious use of polyfills, plus current markup techniques, your webpage will be able to give the user the best experience their browser / device of choice can support.
  • 15. So, Who’s Using “HTML5”? New Doctype only Google USA.gov Yahoo Netflix … and others
  • 16. So, Who’s Using “HTML5”? New Doctype and New Markup MailChimp Slashdot About Apple … and others
  • 17. Isn’t It Time You Embraced HTML?

Notes de l'éditeur

  1. MS Internet Explorer team has does testing to ensure HTML5 doctype does not throw IE into quirks mode.Safari and Mozilla have also done testing of their own