SlideShare a Scribd company logo
1 of 26
HTML5 IS
THE FUTURE
OR...TO 2022 & BEYOND
HTML5 IS
THE FUTURE
NOW!
JASON BEAIRD
UX Designer at MailChimp.
Web Design Author.
Front-End Nerd.
WHAT IS HTML5?
COOL NEW
What marketing departments would have you believe....
A MARKUP LANGUAGE
...but also a series APIs for interacting with new features.
HTML5 IS REALLY...
IT’S NOT ONE BIGTHING.
and it’s not all new stuff...
GEOLOCATION
AUDIO
&VIDEO
CANVAS
NEW FORM
FIELD TYPES
OFFLINE
STORAGE
NEW SEMANTIC
LAYOUT TAGS
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN"!"http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML5
<!DOCTYPE html>
SIMPLIFIED DOCTYPE
XHTML 1.0 Transitional
<link rel=”stylesheet” href=”file.css”
type=”text/css” media=”all”>
<style type=”text/css”>...</style>
HTML5
<link rel=stylesheet file=file.css>
<style>...</style>
SIMPLIFIED STYLES
XHTML 1.0 Transitional
<script type=”text/javascript”>
/* <![CDATA[ */
alert(‘are we there yet?’);
/* ]]> */
</script>
HTML5
<script>
alert(‘hooray!’);
</script>
SIMPLIFIED JS EMBEDDING
<!DOCTYPE html>
<title>A valid HTML5 document.</title>
<p>Even this paragraph is optional.</p>
<img src=yes.jpg alt=”Still Valid.”>
<br>
This kinda scares me, but it’s cool...
Where’s the trailing slash?
Quoted attributes?
Missing some junk here, aren’t we?
EVOLUTION NOT
REVOLUTION
Drawings by KatyTresedder - http://www.flickr.com/photos/katy_tresedder/
XML or DIE! Be yourself.
NEW HTMLTAGS
<div>
<div>
<div> <div><div>
<div>
<div>
<div>
<div>
NEW HTMLTAGS
<header>
<footer>
<nav> <aside><article>
<section>
<section>
<figure>
<details>
INTERNET EXPLORER?
The HTML5 Shim: http://code.google.com/p/html5shim/
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
...or just go with HTML5 class names.
NEW FORM GOODNESS
<input type=”search” name=”q” placeholder=”Search” autofocus>
<input type=”email”>
<input type=”url”>
<input type=”number”>
<input type=”range”>
<input type=”color”>
<input type=”date”>
<input type=”datetime”>
<input type=”month”>
<input type=”week”>
<input type=”time”>
<input name="zip" pattern="^[d]{5}(-[d]{4})?$">
urlemail
number search
CANVAS + SVG
GEOLOCATION
OTHER API AWESOMENESS
• Drag and Drop
• WebSockets
• Web Workers
• Local Storage
• WebSQL
IN SUMMARY...
1. It’s not one big thing.
2.You don’t need to throw anything away.
3. It’s easy to get started.
4. It already works in most browsers.
5. It’s here to stay.
HTML5 RESOURCES
1. http://diveintohtml5.org
2. http://caniuse.com
3. http://html5demos.com
4. http://html5doctor.com
5. http://html5boilerplate.com
6.http://html5test.com
GO FORTH
& Markupify.

More Related Content

Similar to HTML5 is...NOW! - Jason Beaird

Michael(tm) Smith: HTML5 at Web Directions South 2008
Michael(tm) Smith: HTML5 at Web Directions South 2008Michael(tm) Smith: HTML5 at Web Directions South 2008
Michael(tm) Smith: HTML5 at Web Directions South 2008Michael(tm) Smith
 
Introduction to html5
Introduction to html5Introduction to html5
Introduction to html5Manav Prasad
 
Delhi student's day
Delhi student's dayDelhi student's day
Delhi student's dayAnkur Mishra
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5IT Geeks
 
Introduction to html55
Introduction to html55Introduction to html55
Introduction to html55subrat55
 
1._Introduction_to_HTML5 powerpoint presentation
1._Introduction_to_HTML5 powerpoint presentation1._Introduction_to_HTML5 powerpoint presentation
1._Introduction_to_HTML5 powerpoint presentationJohnLagman3
 
1. Introduction to HTML5.ppt
1. Introduction to HTML5.ppt1. Introduction to HTML5.ppt
1. Introduction to HTML5.pptJyothiAmpally
 
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 NOTESSony235240
 
Why Game Developers Should Care About HTML5
Why Game Developers Should Care About HTML5Why Game Developers Should Care About HTML5
Why Game Developers Should Care About HTML5Bramus Van Damme
 
HTML5 vs Silverlight
HTML5 vs SilverlightHTML5 vs Silverlight
HTML5 vs SilverlightMark Allan
 
HTML5 for SEO and accessibility in 2016
HTML5 for SEO and accessibility in 2016HTML5 for SEO and accessibility in 2016
HTML5 for SEO and accessibility in 2016Myriam Jessier
 
1. introduction to html5
1. introduction to html51. introduction to html5
1. introduction to html5JayjZens
 
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]Aaron Gustafson
 
Is it time to start using HTML 5
Is it time to start using HTML 5Is it time to start using HTML 5
Is it time to start using HTML 5Ravi Raj
 

Similar to HTML5 is...NOW! - Jason Beaird (20)

Michael(tm) Smith: HTML5 at Web Directions South 2008
Michael(tm) Smith: HTML5 at Web Directions South 2008Michael(tm) Smith: HTML5 at Web Directions South 2008
Michael(tm) Smith: HTML5 at Web Directions South 2008
 
Introduction to html5
Introduction to html5Introduction to html5
Introduction to html5
 
Delhi student's day
Delhi student's dayDelhi student's day
Delhi student's day
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
Introduction to html55
Introduction to html55Introduction to html55
Introduction to html55
 
WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)
 
HTML 5
HTML 5HTML 5
HTML 5
 
HTML5 and DHTML
HTML5 and DHTMLHTML5 and DHTML
HTML5 and DHTML
 
web designing course bangalore
web designing course bangaloreweb designing course bangalore
web designing course bangalore
 
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
 
Why Game Developers Should Care About HTML5
Why Game Developers Should Care About HTML5Why Game Developers Should Care About HTML5
Why Game Developers Should Care About HTML5
 
HTML5 vs Silverlight
HTML5 vs SilverlightHTML5 vs Silverlight
HTML5 vs Silverlight
 
HTML5 for SEO and accessibility in 2016
HTML5 for SEO and accessibility in 2016HTML5 for SEO and accessibility in 2016
HTML5 for SEO and accessibility in 2016
 
1. introduction to html5
1. introduction to html51. introduction to html5
1. introduction to 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]
 
Is it time to start using HTML 5
Is it time to start using HTML 5Is it time to start using HTML 5
Is it time to start using HTML 5
 
Looking into HTML5
Looking into HTML5Looking into HTML5
Looking into HTML5
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 

Recently uploaded

"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embeddingZilliz
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Manik S Magar
 
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
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
"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
 
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
 
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
 
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????What is Artificial Intelligence?????????
What is Artificial Intelligence?????????blackmambaettijean
 
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
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
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
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.Curtis Poe
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
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
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxBkGupta21
 

Recently uploaded (20)

"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
Training state-of-the-art general text embedding
Training state-of-the-art general text embeddingTraining state-of-the-art general text embedding
Training state-of-the-art general text embedding
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
 
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
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
"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
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
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
 
What is Artificial Intelligence?????????
What is Artificial Intelligence?????????What is Artificial Intelligence?????????
What is Artificial Intelligence?????????
 
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
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
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
 
How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.How AI, OpenAI, and ChatGPT impact business and software.
How AI, OpenAI, and ChatGPT impact business and software.
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
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
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
 

HTML5 is...NOW! - Jason Beaird