SlideShare a Scribd company logo
1 of 134
Download to read offline
HAI GUISE!
HAI GUISE!
•   Mathias Bynens
HAI GUISE!
•   Mathias Bynens
•   mths.be
HAI GUISE!
•   Mathias Bynens
•   mths.be
•   @mathias
Spın̈al Tap
http://mths.be/11
HTML5
HTML5
It goes to ELEVEN.
HTML5
It goes to ELEVEN.




                     hashtag: #h5e
HTML5?
HTML5?
•   = HTML 4 + 1
HTML5?
•   = HTML 4 + 1
•   = HTML 4.01 + 0.99
HTML5?
•   = HTML 4 + 1
•   = HTML 4.01 + 0.99
•   Backwards compatible
What’s new in HTML5?
What’s new in HTML5?
•   Simplified syntax
What’s new in HTML5?
•   Simplified syntax
•   Some HTML 4 elements are redefined
What’s new in HTML5?
•   Simplified syntax
•   Some HTML 4 elements are redefined
•   New values/attributes for existing elements
What’s new in HTML5?
•   Simplified syntax
•   Some HTML 4 elements are redefined
•   New values/attributes for existing elements
•   New sectioning elements
What’s new in HTML5?
•   Simplified syntax
•   Some HTML 4 elements are redefined
•   New values/attributes for existing elements
•   New sectioning elements
•   New inline elements
What’s new in HTML5?
•   Simplified syntax
•   Some HTML 4 elements are redefined
•   New values/attributes for existing elements
•   New sectioning elements
•   New inline elements
•   New interactive elements
What’s new in HTML5?
•   Simplified syntax
•   Some HTML 4 elements are redefined
•   New values/attributes for existing elements
•   New sectioning elements
•   New inline elements
•   New interactive elements
•   New JavaScript APIs
What’s new in HTML5?
•   Simplified syntax
•   Some HTML 4 elements are redefined
•   New values/attributes for existing elements
•   New sectioning elements
•   New inline elements
•   New interactive elements
•   New JavaScript APIs
What’s new in HTML5?
•   Simplified syntax
•   Some HTML 4 elements are redefined
•   New values/attributes for existing elements
•   New sectioning elements
•   New inline elements
•   New interactive elements
•   New JavaScript APIs
What’s new in HTML5?
•   Simplified syntax
•   Some HTML 4 elements are redefined
•   New values/attributes for existing elements
•   New sectioning elements
•   New inline elements
•   New interactive elements
•   New JavaScript APIs
Level 1
Level 1
Don’t worry about browser support;
Level 1
Don’t worry about browser support;
         It Just Works™
Simplified syntax
Simplified syntax
•   DOCTYPE
XHTML 1.0 DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
XHTML 1.1 DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
XHTML 1.1//EN" "http://www.w3.org/
TR/xhtml11/DTD/xhtml11.dtd">
HTML 4.01 DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
HTML5 DOCTYPE
<!doctype html>
Simplified syntax
•   DOCTYPE
•   Character encoding
HTML 4.01 charset
<meta http-equiv="Content-Type"
content="text/html;
charset=utf-8">
HTML 5 charset
<meta charset="utf-8">
Simplified syntax
•   DOCTYPE
•   Character encoding
•   type attributes here and there
HTML 4.01
<link rel="stylesheet"
 type="text/css" href="foo.css">
HTML5
<link rel="stylesheet"
 href="foo.css">
HTML 4.01
<style type="text/css">
 body {
   background: gray url(boring.gif)
               no-repeat;
 }
</style>
HTML5
<style>
 body {
   background: pink url(unicorns.png)
               repeat;
 }
</style>
HTML 4.01
<script type="text/javascript">
 alert('CAN HAZ HTML 4.01?');
</script>
HTML5
<script>
 // O HAI SIMPLIFIED HTML5 SYNTAX!
</script>
Simplified syntax
•   DOCTYPE
•   Character encoding
•   type attributes here and there

•   Optional solidus (/>)
HTML5
<img src="x.png" alt="Bazinga">
<img src="x.png" alt="Bazinga"/>
<img src="x.png" alt="Bazinga" />
Simplified syntax
•   DOCTYPE
•   Character encoding
•   type attributes here and there

•   Optional solidus (/>)
Simplified syntax
•   DOCTYPE
•   Character encoding
•   type attributes here and there

•   Optional solidus (/>)



•   Easier to remember
Simplified syntax
•   DOCTYPE
•   Character encoding
•   type attributes here and there

•   Optional solidus (/>)



•   Easier to remember
•   Shorter
Simplified syntax
Simplified syntax
•   It’s how browsers work
Simplified syntax
•   It’s how browsers work
•   HTML5 specs current behavior
Simplified syntax
•   It’s how browsers work
•   HTML5 specs current behavior
•   Future-proof
Redefined elements
Redefined elements
•   <small>
Redefined elements
•   <small>

•   <strong>
Redefined elements
•   <small>

•   <strong>

•   <b> and <i>
Redefined elements
•   <small>

•   <strong>

•   <b> and <i>

•   …
Redefined elements
•   <small>

•   <strong>

•   <b> and <i>

•   …
•   Block level anchors
Block level anchors
Block level anchors
<a href="/canhazfood/carrot">
 <h1>Carrot</h1>
 <p>Om nom nom nom.</p>
</a>
Block level anchors
<a href="/canhazfood/carrot">
 <h1>Carrot</h1>
 <p>Om nom nom nom.</p>
</a>
Block level anchors
<a href="/canhazfood/carrot">
 <h1>Carrot</h1>
 <p>Om nom nom nom.</p>
</a>


a { display: block; }
Block level anchors
<a href="/canhazfood/carrot">
 <h1>Carrot</h1>
 <p>Om nom nom nom.</p>
</a>


a { display: block; }
Level 2
Level 2
Stuff that degrades gracefully by default
Level 2
Stuff that degrades gracefully by default
New attributes/values
New attributes/values
<input type="email">
New attributes/values
<input type="email">

url, tel, number
New attributes/values
<input type="email">

url, tel, number
datetime, date, time, month, week
New attributes/values
<input type="email">

url, tel, number
datetime, date, time, month, week

…
New attributes/values
<input type="email">

url, tel, number
datetime, date, time, month, week

…
<input type="email"
placeholder="foo@bar.baz">
New attributes/values
<input type="email">

url, tel, number
datetime, date, time, month, week

…
<input type="email"
placeholder="foo@bar.baz">

→ “Web Forms 2.0”
New attributes/values
<input type="email">

url, tel, number
datetime, date, time, month, week

…
<input type="email"
placeholder="foo@bar.baz">

→ “Web Forms 2.0”
New attributes/values
New attributes/values
Graceful degradation isn’t enough?
New attributes/values
Graceful degradation isn’t enough?
→ Use JavaScript for feature detection
New attributes/values
Graceful degradation isn’t enough?
→ Use JavaScript for feature detection
→ Provide a fallback
Level 3
Level 3
We need some extra love
Level 3
We need some extra love
New sectioning elements
New sectioning elements
<header> and <footer>
New sectioning elements
<header> and <footer>

<section> and <article>
New sectioning elements
<header> and <footer>

<section> and <article>

<nav>
New sectioning elements
<header> and <footer>

<section> and <article>

<nav>

<aside>
New sectioning elements
<header> and <footer>

<section> and <article>

<nav>

<aside>

…
New sectioning elements
<header> and <footer>

<section> and <article>

<nav>

<aside>

…

→ Semantic alternatives to divs in HTML 4.01
New sectioning elements
<header> and <footer>

<section> and <article>

<nav>

<aside>

…

→ Semantic alternatives to divs in HTML 4.01
→ Fallback: HTML5 shiv http://mths.be/html5shiv
New inline elements
New inline elements
<mark>
New inline elements
<mark>

<time>
New inline elements
<mark>

<time>

…
New inline elements
<mark>

<time>

…

→ Semantic alternatives to spans in HTML 4.01
New inline elements
<mark>

<time>

…

→ Semantic alternatives to spans in HTML 4.01
→ Fallback: HTML5 shiv http://mths.be/html5shiv
Interactive elements
<details>
 <summary>More info about Foo</summary>
 <p>Lorem ipsum.</p>
 <p>Dolor sit amet.</p>
</details>
Interactive elements
Interactive elements
<details open>
 <summary>More info about Foo</summary>
 <p>Lorem ipsum.</p>
 <p>Dolor sit amet.</p>
</details>
Interactive elements
<details open>
 <summary>More info about Foo</summary>
 <p>Lorem ipsum.</p>
 <p>Dolor sit amet.</p>
</details>

→ Fallback: http://mths.be/html5details
Interactive elements
<details open>
 <summary>More info about Foo</summary>
 <p>Lorem ipsum.</p>
 <p>Dolor sit amet.</p>
</details>

→ Fallback: http://mths.be/html5details
→ Other elements, other fallbacks
JavaScript APIs
JavaScript APIs
<video>
JavaScript APIs
<video>

<audio>
JavaScript APIs
<video>

<audio>

<canvas>
JavaScript APIs
<video>

<audio>

<canvas>

Drag-and-drop, offline apps, inline editing, workers,
web sockets, and many, many more…
JavaScript APIs
<video>

<audio>

<canvas>

Drag-and-drop, offline apps, inline editing, workers,
web sockets, and many, many more…
See http://mths.be/jsapis
JavaScript APIs
<video>

<audio>

<canvas>

Drag-and-drop, offline apps, inline editing, workers,
web sockets, and many, many more…
See http://mths.be/jsapis
→ Fallback = Flash
JavaScript APIs
<video>

<audio>

<canvas>

Drag-and-drop, offline apps, inline editing, workers,
web sockets, and many, many more…
See http://mths.be/jsapis
→ Fallback = Flash
Remember!
HTML5, Level 1
HTML5, Level 1
•   Simplified syntax
HTML5, Level 1
•   Simplified syntax
    •   DOCTYPE
HTML5, Level 1
•   Simplified syntax
    •   DOCTYPE
    •   Character encoding
HTML5, Level 1
•   Simplified syntax
    •   DOCTYPE
    •   Character encoding
    •   Optional type attributes
HTML5, Level 1
•   Simplified syntax
    •   DOCTYPE
    •   Character encoding
    •   Optional type attributes
    •   Optional solidus (/>)
HTML5, Level 1
•   Simplified syntax
    •   DOCTYPE
    •   Character encoding
    •   Optional type attributes
    •   Optional solidus (/>)
•   Perfectly safe; no reason not to use
HTML5, Level 2
HTML5, Level 2
•   New attributes/values
HTML5, Level 2
•   New attributes/values
    •   New input types
HTML5, Level 2
•   New attributes/values
    •   New input types
    •   placeholder=""
HTML5, Level 2
•   New attributes/values
    •   New input types
    •   placeholder=""

    •   …
HTML5, Level 2
•   New attributes/values
    •   New input types
    •   placeholder=""

    •   …
•   Degrades gracefully
HTML5, Level 2
•   New attributes/values
    •   New input types
    •   placeholder=""

    •   …
•   Degrades gracefully
•   Use fallback to emulate
HTML5, Level 3
HTML5, Level 3
•   New sectioning elements
HTML5, Level 3
•   New sectioning elements
•   New inline elements
HTML5, Level 3
•   New sectioning elements
•   New inline elements
•   New interactive elements
HTML5, Level 3
•   New sectioning elements
•   New inline elements
•   New interactive elements
•   Won’t work / degrade in older browsers
HTML5, Level 3
•   New sectioning elements
•   New inline elements
•   New interactive elements
•   Won’t work / degrade in older browsers
•   Use feature detection and fallbacks to emulate
HTML5, Level 3
•   New sectioning elements
•   New inline elements
•   New interactive elements
•   Won’t work / degrade in older browsers
•   Use feature detection and fallbacks to emulate
    •   JavaScript
HTML5, Level 3
•   New sectioning elements
•   New inline elements
•   New interactive elements
•   Won’t work / degrade in older browsers
•   Use feature detection and fallbacks to emulate
    •   JavaScript
    •   Flash
Fin

More Related Content

What's hot

HTML Semantic Tags
HTML Semantic TagsHTML Semantic Tags
HTML Semantic TagsBruce Kyle
 
HTML 5 Fundamental
HTML 5 FundamentalHTML 5 Fundamental
HTML 5 FundamentalLanh Le
 
44 Slides About 22 Modules
44 Slides About 22 Modules44 Slides About 22 Modules
44 Slides About 22 Modulesheyrocker
 
JSLink for ITPros - SharePoint Saturday Jersey
JSLink for ITPros - SharePoint Saturday JerseyJSLink for ITPros - SharePoint Saturday Jersey
JSLink for ITPros - SharePoint Saturday JerseyPaul Hunt
 
What the heck is HTML 5?
What the heck is HTML 5?What the heck is HTML 5?
What the heck is HTML 5?Simon Willison
 
Face/Off: APEX Templates & Themes
Face/Off: APEX Templates & ThemesFace/Off: APEX Templates & Themes
Face/Off: APEX Templates & Themescrokitta
 
Windy cityrails performance_tuning
Windy cityrails performance_tuningWindy cityrails performance_tuning
Windy cityrails performance_tuningJohn McCaffrey
 
Gaelyk: Lightweight Groovy on the Google App Engine
Gaelyk: Lightweight Groovy on the Google App EngineGaelyk: Lightweight Groovy on the Google App Engine
Gaelyk: Lightweight Groovy on the Google App EngineTim Berglund
 
Bringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePointBringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePointChad Schroeder
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is nowGonzalo Cordero
 
HTML Training Course in Persian
HTML Training Course in PersianHTML Training Course in Persian
HTML Training Course in PersianAbbas Naderi
 
Top 10 HTML5 features
Top 10 HTML5 featuresTop 10 HTML5 features
Top 10 HTML5 featuresGill Cleeren
 
Module 3: Working with the DOM and jQuery
Module 3: Working with the DOM and jQueryModule 3: Working with the DOM and jQuery
Module 3: Working with the DOM and jQueryDaniel McGhan
 
Introduction to xhtml
Introduction to xhtmlIntroduction to xhtml
Introduction to xhtmlDhairya Joshi
 
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)Clément Wehrung
 

What's hot (20)

HTML Semantic Tags
HTML Semantic TagsHTML Semantic Tags
HTML Semantic Tags
 
[In Control 2010] HTML5
[In Control 2010] HTML5[In Control 2010] HTML5
[In Control 2010] HTML5
 
HTML 5 Fundamental
HTML 5 FundamentalHTML 5 Fundamental
HTML 5 Fundamental
 
44 Slides About 22 Modules
44 Slides About 22 Modules44 Slides About 22 Modules
44 Slides About 22 Modules
 
JSLink for ITPros - SharePoint Saturday Jersey
JSLink for ITPros - SharePoint Saturday JerseyJSLink for ITPros - SharePoint Saturday Jersey
JSLink for ITPros - SharePoint Saturday Jersey
 
What the heck is HTML 5?
What the heck is HTML 5?What the heck is HTML 5?
What the heck is HTML 5?
 
Face/Off: APEX Templates & Themes
Face/Off: APEX Templates & ThemesFace/Off: APEX Templates & Themes
Face/Off: APEX Templates & Themes
 
Windy cityrails performance_tuning
Windy cityrails performance_tuningWindy cityrails performance_tuning
Windy cityrails performance_tuning
 
HTML5 JS APIs
HTML5 JS APIsHTML5 JS APIs
HTML5 JS APIs
 
Gaelyk: Lightweight Groovy on the Google App Engine
Gaelyk: Lightweight Groovy on the Google App EngineGaelyk: Lightweight Groovy on the Google App Engine
Gaelyk: Lightweight Groovy on the Google App Engine
 
Bringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePointBringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePoint
 
front-end formations
front-end formationsfront-end formations
front-end formations
 
2022 HTML5: The future is now
2022 HTML5: The future is now2022 HTML5: The future is now
2022 HTML5: The future is now
 
Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
 
HTML Training Course in Persian
HTML Training Course in PersianHTML Training Course in Persian
HTML Training Course in Persian
 
Top 10 HTML5 features
Top 10 HTML5 featuresTop 10 HTML5 features
Top 10 HTML5 features
 
Html5 public
Html5 publicHtml5 public
Html5 public
 
Module 3: Working with the DOM and jQuery
Module 3: Working with the DOM and jQueryModule 3: Working with the DOM and jQuery
Module 3: Working with the DOM and jQuery
 
Introduction to xhtml
Introduction to xhtmlIntroduction to xhtml
Introduction to xhtml
 
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
 

Similar to HTML5: It goes to ELEVEN

5 ways to embrace HTML5 today
5 ways to embrace HTML5 today5 ways to embrace HTML5 today
5 ways to embrace HTML5 todayDaniel Ryan
 
Frontend for developers
Frontend for developersFrontend for developers
Frontend for developersHernan Mammana
 
HTML5 & Front-end overview
HTML5 & Front-end overviewHTML5 & Front-end overview
HTML5 & Front-end overviewAshish Mukherjee
 
Html&Browser
Html&BrowserHtml&Browser
Html&BrowserAlipay
 
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & FeaturesDave Ross
 
Progressively Enhancing WordPress Themes
Progressively Enhancing WordPress ThemesProgressively Enhancing WordPress Themes
Progressively Enhancing WordPress ThemesDigitally
 
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]Aaron Gustafson
 
HTML5 tags.ppt
HTML5 tags.pptHTML5 tags.ppt
HTML5 tags.pptabcxyz1337
 
Darwin web standards
Darwin web standardsDarwin web standards
Darwin web standardsJustin Avery
 
SW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+DrupalSW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+DrupalJen Simmons
 

Similar to HTML5: It goes to ELEVEN (20)

5 ways to embrace HTML5 today
5 ways to embrace HTML5 today5 ways to embrace HTML5 today
5 ways to embrace HTML5 today
 
Frontend for developers
Frontend for developersFrontend for developers
Frontend for developers
 
HTML5 & Front-end overview
HTML5 & Front-end overviewHTML5 & Front-end overview
HTML5 & Front-end overview
 
Html&Browser
Html&BrowserHtml&Browser
Html&Browser
 
Looking into HTML5 + CSS3
Looking into HTML5 + CSS3Looking into HTML5 + CSS3
Looking into HTML5 + CSS3
 
HTML5 History & Features
HTML5 History & FeaturesHTML5 History & Features
HTML5 History & Features
 
Html5
Html5Html5
Html5
 
Kick start @ html5
Kick start @ html5Kick start @ html5
Kick start @ html5
 
WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)
 
Demystifying HTML5
Demystifying HTML5Demystifying HTML5
Demystifying HTML5
 
Html5
Html5Html5
Html5
 
Progressively Enhancing WordPress Themes
Progressively Enhancing WordPress ThemesProgressively Enhancing WordPress Themes
Progressively Enhancing WordPress Themes
 
HTML5
HTML5HTML5
HTML5
 
Html5
Html5Html5
Html5
 
HTML5
HTML5 HTML5
HTML5
 
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]
 
HTML5 tags.ppt
HTML5 tags.pptHTML5 tags.ppt
HTML5 tags.ppt
 
Darwin web standards
Darwin web standardsDarwin web standards
Darwin web standards
 
HTML 5
HTML 5HTML 5
HTML 5
 
SW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+DrupalSW Drupal Summit: HTML5+Drupal
SW Drupal Summit: HTML5+Drupal
 

Recently uploaded

Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Karmanjay Verma
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...BookNet Canada
 
Why Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile EvolutionWhy Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile EvolutionDEEPRAJ PATHAK
 
Kuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorialKuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorialJoão Esperancinha
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfNeo4j
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integrationmarketing932765
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Nikki Chapple
 
Dynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationDynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationBuild Intuit
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...Karmanjay Verma
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesKari Kakkonen
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessWSO2
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...itnewsafrica
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Farhan Tariq
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Hiroshi SHIBATA
 
Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?Rustici Software
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality AssuranceInflectra
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024TopCSSGallery
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfpanagenda
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 

Recently uploaded (20)

Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#Microservices, Docker deploy and Microservices source code in C#
Microservices, Docker deploy and Microservices source code in C#
 
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
Transcript: New from BookNet Canada for 2024: BNC SalesData and LibraryData -...
 
Why Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile EvolutionWhy Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile Evolution
 
Kuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorialKuma Meshes Part I - The basics - A tutorial
Kuma Meshes Part I - The basics - A tutorial
 
Connecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdfConnecting the Dots for Information Discovery.pdf
Connecting the Dots for Information Discovery.pdf
 
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS:  6 Ways to Automate Your Data IntegrationBridging Between CAD & GIS:  6 Ways to Automate Your Data Integration
Bridging Between CAD & GIS: 6 Ways to Automate Your Data Integration
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
Microsoft 365 Copilot: How to boost your productivity with AI – Part two: Dat...
 
Dynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationDynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientation
 
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Testing tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examplesTesting tools and AI - ideas what to try with some tool examples
Testing tools and AI - ideas what to try with some tool examples
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with Platformless
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
 
Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...Genislab builds better products and faster go-to-market with Lean project man...
Genislab builds better products and faster go-to-market with Lean project man...
 
Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024Long journey of Ruby standard library at RubyConf AU 2024
Long journey of Ruby standard library at RubyConf AU 2024
 
Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?
 
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance[Webinar] SpiraTest - Setting New Standards in Quality Assurance
[Webinar] SpiraTest - Setting New Standards in Quality Assurance
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024
 
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdfSo einfach geht modernes Roaming fuer Notes und Nomad.pdf
So einfach geht modernes Roaming fuer Notes und Nomad.pdf
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 

HTML5: It goes to ELEVEN

Editor's Notes

  1. &amp;#x2026;and today I&amp;#x2019;d like to talk about&amp;#x2026;
  2. &amp;#x2026;and today I&amp;#x2019;d like to talk about&amp;#x2026;
  3. &amp;#x2026;and today I&amp;#x2019;d like to talk about&amp;#x2026;
  4. Redefine: The &lt;strong&gt; element now represents importance rather than strong emphasis. The &lt;small&gt; element now represents small print (for side comments and legal print). Changes to &lt;b&gt; and &lt;i&gt; etc.
  5. Redefine: The &lt;strong&gt; element now represents importance rather than strong emphasis. The &lt;small&gt; element now represents small print (for side comments and legal print). Changes to &lt;b&gt; and &lt;i&gt; etc.
  6. Redefine: The &lt;strong&gt; element now represents importance rather than strong emphasis. The &lt;small&gt; element now represents small print (for side comments and legal print). Changes to &lt;b&gt; and &lt;i&gt; etc.
  7. Redefine: The &lt;strong&gt; element now represents importance rather than strong emphasis. The &lt;small&gt; element now represents small print (for side comments and legal print). Changes to &lt;b&gt; and &lt;i&gt; etc.
  8. Redefine: The &lt;strong&gt; element now represents importance rather than strong emphasis. The &lt;small&gt; element now represents small print (for side comments and legal print). Changes to &lt;b&gt; and &lt;i&gt; etc.
  9. Redefine: The &lt;strong&gt; element now represents importance rather than strong emphasis. The &lt;small&gt; element now represents small print (for side comments and legal print). Changes to &lt;b&gt; and &lt;i&gt; etc.
  10. Redefine: The &lt;strong&gt; element now represents importance rather than strong emphasis. The &lt;small&gt; element now represents small print (for side comments and legal print). Changes to &lt;b&gt; and &lt;i&gt; etc.
  11. Redefine: The &lt;strong&gt; element now represents importance rather than strong emphasis. The &lt;small&gt; element now represents small print (for side comments and legal print). Changes to &lt;b&gt; and &lt;i&gt; etc.
  12. Redefine: The &lt;strong&gt; element now represents importance rather than strong emphasis. The &lt;small&gt; element now represents small print (for side comments and legal print). Changes to &lt;b&gt; and &lt;i&gt; etc.
  13. Redefine: The &lt;strong&gt; element now represents importance rather than strong emphasis. The &lt;small&gt; element now represents small print (for side comments and legal print). Changes to &lt;b&gt; and &lt;i&gt; etc.
  14. If someday a new &lt;script&gt; type is invented, all you have to do to use it is add a type attribute. No need to add that for default type though.
  15. If someday a new &lt;script&gt; type is invented, all you have to do to use it is add a type attribute. No need to add that for default type though.
  16. If someday a new &lt;script&gt; type is invented, all you have to do to use it is add a type attribute. No need to add that for default type though.
  17. &lt;strong&gt; now represents importance rather than strong emphasis. &lt;small&gt; used to be presentational, but now represents small print (for side comments and legal print), thus getting semantic meaning. Changes to &lt;b&gt; and &lt;i&gt; etc.
  18. &lt;strong&gt; now represents importance rather than strong emphasis. &lt;small&gt; used to be presentational, but now represents small print (for side comments and legal print), thus getting semantic meaning. Changes to &lt;b&gt; and &lt;i&gt; etc.
  19. &lt;strong&gt; now represents importance rather than strong emphasis. &lt;small&gt; used to be presentational, but now represents small print (for side comments and legal print), thus getting semantic meaning. Changes to &lt;b&gt; and &lt;i&gt; etc.
  20. &lt;strong&gt; now represents importance rather than strong emphasis. &lt;small&gt; used to be presentational, but now represents small print (for side comments and legal print), thus getting semantic meaning. Changes to &lt;b&gt; and &lt;i&gt; etc.
  21. &lt;strong&gt; now represents importance rather than strong emphasis. &lt;small&gt; used to be presentational, but now represents small print (for side comments and legal print), thus getting semantic meaning. Changes to &lt;b&gt; and &lt;i&gt; etc.
  22. That&amp;#x2019;s it for Level 1.
  23. That&amp;#x2019;s it for Level 1.
  24. That&amp;#x2019;s it for Level 1.
  25. That&amp;#x2019;s it for Level 1.
  26. Spec was originally named Web Forms 2.0 but is now just another chapter in the HTML5 spec
  27. Spec was originally named Web Forms 2.0 but is now just another chapter in the HTML5 spec
  28. Spec was originally named Web Forms 2.0 but is now just another chapter in the HTML5 spec
  29. Spec was originally named Web Forms 2.0 but is now just another chapter in the HTML5 spec
  30. Spec was originally named Web Forms 2.0 but is now just another chapter in the HTML5 spec
  31. Spec was originally named Web Forms 2.0 but is now just another chapter in the HTML5 spec
  32. Spec was originally named Web Forms 2.0 but is now just another chapter in the HTML5 spec
  33. That&amp;#x2019;s it for level 2 &amp;#x2013; this stuff will work in modern browsers, while still being functional in older browsers
  34. That&amp;#x2019;s it for level 2 &amp;#x2013; this stuff will work in modern browsers, while still being functional in older browsers
  35. That&amp;#x2019;s it for level 2 &amp;#x2013; this stuff will work in modern browsers, while still being functional in older browsers
  36. HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media
  37. HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media
  38. HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media
  39. HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media
  40. HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media
  41. HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media
  42. HTML5 shiv makes new HTML5 elements stylable in IE for both screen and print media
  43. Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation
  44. Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation
  45. Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation
  46. Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation
  47. Ruby annotations are short runs of text presented alongside base text, primarily used in East Asian typography as a guide for pronunciation
  48. The actual contents are hidden by default. You can use the open attribute to override this
  49. The actual contents are hidden by default. You can use the open attribute to override this
  50. The actual contents are hidden by default. You can use the open attribute to override this
  51. The actual contents are hidden by default. You can use the open attribute to override this
  52. Hendrik Dacquin will talk about &lt;canvas&gt; in a minute. HTML5 offline functionality can be useful for Flash applications as well.
  53. Hendrik Dacquin will talk about &lt;canvas&gt; in a minute. HTML5 offline functionality can be useful for Flash applications as well.
  54. Hendrik Dacquin will talk about &lt;canvas&gt; in a minute. HTML5 offline functionality can be useful for Flash applications as well.
  55. Hendrik Dacquin will talk about &lt;canvas&gt; in a minute. HTML5 offline functionality can be useful for Flash applications as well.
  56. Hendrik Dacquin will talk about &lt;canvas&gt; in a minute. HTML5 offline functionality can be useful for Flash applications as well.
  57. Hendrik Dacquin will talk about &lt;canvas&gt; in a minute. HTML5 offline functionality can be useful for Flash applications as well.
  58. Hendrik Dacquin will talk about &lt;canvas&gt; in a minute. HTML5 offline functionality can be useful for Flash applications as well.