HTML5
Een introductie

Thomas Byttebier — thomasbyttebier.be
Navorming Het Perspectief — 28/01/2014
HTML5? WTF! Waarom geen XHTML2?

HTML5 combineert
HTML4 & XHTML1
HTML syntax

<DIV CLASS=belangrijk>
<br>
!

<ul>
<li>list item
<li>nog een list item
</ul>
!
XHTML syntax

<div class="belangrijk">
<br />
!

<ul>
<li>list item</li>
<li>nog een list item</li>
</ul>
!
Ja maar… is HTML5 al ‘af’?
2022
Is HTML5 al “af”?
Wanneer kunnen we
HTML5 gebruiken?
HTML4 was al jaren ‘af’…
Je kan nu al HTML5
*
gebruiken!
Pfff… ik kende nu net HTML4

Is wat ik leerde dan
nog bruikbaar?
HTML5 is
backwards compatible
Je kan elk HTML4 element
blijven gebruiken
Geen enkele browser zal er over vallen

maar…
Sommige elementen
worden afgeraden (valideren!)
<frame>, <frameset>…
<font>
<big>
<center>
<strike>
…
!
!
Sommige attributen
worden afgeraden (valideren!)
bgcolor
cellpadding
cellspacing
valign
…
!
!
Sommige elementen krijgen een
nieuwe betekenis of ander gebruik
<b>
<i>
<small>
<a>
!
!
<b>
“Tekst die anders moet worden
weergegeven dan de gewone tekst,
zonder extra nadruk mee te geven.”

—W3C HTML5 specific...
<i>
“Tekst die andere stem of sfeer moet
worden gelezen dan de gewone tekst,
zonder extra nadruk mee te geven.”

—W3C HTML...
<small>
“Tekst die ‘de kleine lettertjes’ voorstelt:
copyrightinformatie, algemene
voorwaarden, legale verplichtingen…”

—...
<a>
“Het blijft een inline element, maar je
kan er nu ook block-level elementen in
plaatsen.”

—W3C HTML5 specification
HTML4
<h1><a>Artikel titel</a></h1>
<p><a><img></a></p>
<p><a>Eerste alinea</a></p>
<p><a>Lees meer »</a></p>
HTML5
<a>
<h1>Artikel titel</h1>
<p><img></p>
<p>Eerste alinea</p>
<p>Lees meer »</p>
</a>
Kan ik alles van HTML5 nu
al gebruiken?
HTML5 in 3 niveaus

1
2
3

Zonder problemen vandaag al
bruikbaar, werkt in elke browser
Bruikbaar, maar oudere browsers
to...
1
Zonder problemen vandaag
al bruikbaar: het werkt in
elke browser
De nieuwe doctype
HTML4 (XHTML1)
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd...
HTML5
<!DOCTYPE html>
Over de namespace en taal
HTML4 vs HTML5
<html xmlns="http://www.w3.org/1999/
xhtml" xml:lang="nl" lang="nl">

<html lang="nl">
Het karakterset
HTML4 vs HTML5
<meta http-equiv="Content-Type"
content="text/html;charset=utf-8" />

<meta charset="utf-8">
De CSS link tag
HTML4 vs HTML5
<link rel="stylesheet" type="text/css"
href="layout.css" />

<link rel="stylesheet"
href="layout.css" />
De javascript script tag
HTML4 vs HTML5
<script type="text/javascript"
src="javascript.js"></script>

<script src="javascript.js"></script>
Samengevat: de nieuwe
HTML5 startstructuur
<!DOCTYPE html>
<html lang="nl">
<head>
<title></title>
<meta charset="utf-8" /...
2
Vandaag al bruikbaar,
oudere browsers tonen een
gelijkaardig element
Nieuwe elementen voor formulieren
Flashback: welke formelementen
bestaan al in HTML4?
<input type="text">
<textarea>Tekst</textarea>
<input type="password">
<input type="file">
<input type="submit">
<input type="radio">
<input type="checkbox">
<select>
<option>Nederlands</option>
<option>Afrikaans</option>
</select>
Nieuwe formelementen in HTML5
<input type="email">
<input type="email">
<input type="tel">
<input type="tel">
<input type="search">
<input type="search">
<input type="url">
<input type="url">
<input type="date">
<input type="date">
<input type="date">
<input type="color">
<input type="range">
Nieuwe attributen
voor input-elementen
Verplichte velden
<input type="text" required>
Autofocus
<input type="text" autofocus>
Placeholder
<input type="text"
placeholder="Vul hier je naam in">
Extra voordelen
•
•
•

sommige toestellen tonen een
input gerelateerde keyboard layout
nieuwere browsers tonen
aangepaste ...
Wat dan met oudere browsers?
•
•

elke input type die ze niet kennen,
vervangen ze door <input type=“text”>
placeholder, a...
3
Vandaag enkel bruikbaar
mits js/css hacks, anders
breekt je webpagina in
oudere browsers
Nieuwe inline elementen
text-level semantics
<mark>
“Om tekst te markeren die in een
bepaalde context relevant is, maar
in de normale context geen extra
aandacht vraag...
<mark>
<p>
Schrijf jij semantische
<mark>HTML</mark>?
</p>
<time>
“Om data, tijdstippen of beide
aan te duiden.”

—W3C HTML5 specification
<time>
<p>
Kom eens langs op
<time datetime="2015-04-07">
7 april</time>.
</p>
<time>
<p>
De staking vond plaats in
<time datetime="1933-11">november
</time> van dat jaar.
</p>
<time>
<p>
Op <time datetime="01-01">
1 januari</time> zijn we
gesloten.
</p>
<time>
<p>
Ik ben geboren in
<time datetime="1980">1980
</time>.
</p>
<time>
<p>
Het wonder vond plaats op
<time datetime="2012-06-13 20:18">
13 juni 2012</time>.
</p>
<meter>
“Om maateenheden aan te duiden,
onderdeel van een schaal.”

—W3C HTML5 specification
<meter>
<p>
Je behaalde een
<meter value="9" max="10">9</meter>
op je examen HTML.
</p>
<progress>
“Duidt de afgewerkte hoeveelheid aan
van een taak.”

—W3C HTML5 specification
<progress>
<p>
Je takenlijstje is al voor
<progress value="60" max="100">60%
</progress> afgehandeld.
</p>
Nieuwe block-level elementen
sectioning content
<section>
“Om inhoudelijk gerelateerde zaken
te groeperen.”

—W3C HTML5 specification
<section>
<section>
<h1>HTML5</h1>
<p>HTML5 is de toekomst.</p>
<p>Er is geen weg terug.</p>
<p><img src="i.jpg" alt=""></...
<article>
“Om inhoudelijk gerelateerde zaken
te groeperen. De inhoud blijft duidelijk
als die uit de context van de websit...
<header>
“Bevat een groep inleidende of
navigatie-elementen voor het element
waarin header zich bevindt. Ook logo’s
of zoe...
<header>
<body>
<header>
(logo en navigatie)
</header>
(rest van de pagina)
</body>
<header>
<section>
<header>
<p>Een introductie tot…</p>
<h1>Moestuinieren</h1>
</header>
<p>
Elke lente begint het weer te...
<footer>
“Bevat meer informatie over het
element waarin footer zich bevindt:
auteur, copyrightinformatie, links naar
gerel...
<footer>
<body>
<header>
(logo en navigatie)
</header>
(rest van de pagina)
<footer>
(copyrightinfo, contactinfo…)
</foote...
<footer>
<section>
<header>
<h1>Moestuinieren</h1>
</header>
<p>Elke lente begint het weer te
kriebelen.</p>
<footer>
<p>A...
<main>
“Bevat de belangrijkste content van de
body van een webpagina. Het kan
daarom maar 1 keer voorkomen op een
pagina.”...
<main>
<body>
<header>
(logo en navigatie)
</header>
<main>
(belangrijkste content)
</main>
<footer>
(copyrightinfo, conta...
<aside>
“Bevat informatie die zijdelings
gerelateerd is aan de inhoud rond het
aside element, en die als aparte content
ge...
<nav>
“Bevat belangrijke navigatielinks.”

—W3C HTML5 specification
<nav>
<body>
<header>
(logo)
<nav>(unordered list)</nav>
</header>
<main>
(belangrijkste content)
</main>
<aside>
(zijinfo...
<figure>
“Bevat een op zich staand beeld: foto,
video, illustratie… (optioneel) met een
onderschrift. ”

—W3C HTML5 specif...
<figcaption>
“Bevat het onderschrift van een figure.”

—W3C HTML5 specification
<figure>
<figure>
<img src="o.jpg" alt="twee meisjes">
<figcaption>
Twee meisjes op het strand van
Oostduinkerke. Ze lezen...
<figure>
<figure>
<img src="d.jpg" alt="diagram">
<figcaption>
Het aantal nieuwe leden per jaar.
</figcaption>
</figure>
<figure>
<figure>
<img src="d.jpg" alt=“diagram 10">
<img src="d2.jpg" alt=“diagram 11">
<img src="d3.jpg" alt=“diagram 12...
Bron: html5doctor.com
In de war?

http://html5doctor.com/downloads/h5d-sectioning-flowchart.png
De nieuwe elementen zijn vandaag
bruikbaar, mits een regeltje CSS:
section, article, header, footer,
main, nav, aside, fig...
Internet Explorer < 9 heeft
ook wat javascript nodig
Voeg ze toe aan je startstructuur:
nieuwe elementen in elke browser
<!--[if lt IE 9]>
<script src=“http://
html5shiv.googl...
De nieuwe document outline
van HTML5
De document outline van HTML4
<h1>Altijd de belangrijkste kop van de
volledige pagina</h1>
<h2>Nieuwsitem</h2>
<p>Tekst</p...
De document outline van HTML5
<h1>Belangrijkste kop van de volledige
pagina</h1>
<article>
<h1>Belangrijkste kop van artic...
Nieuwe interactieve elementen in
HTML5: geavanceerde oplossingen
voor vanalles
Video en audio in HTML5
<video src="film.ogg" controls>
Je browser ondersteunt geen HTML video.
</video>
!

<audio src="au...
Ondersteuning voor meer browsers
<video controls>
<source src="film.ogg" type="video/ogg">
<source src="film.mp4" type="vi...
Eventueel Flash fall-back voor IE
<video controls>
<source src="film.ogg" type="video/ogg">
<source src="film.mp4" type="v...
Of gewoon een foto als fall-back
<video controls>
<source src="film.ogg" type="video/ogg">
<source src="film.mp4" type="vi...
Nog onbruikbaar in vele browsers.
Gebruik javascript om ondersteuning
te detecteren (bijv. modernizr.js)
Superhandig: caniuse.com
Meer weten?
Meer weten?
Bronnen en links
•
•
•
•
•
•

html5doctor.com
diveintohtml5.org
modernizr.com
matthiasbynens.be
apple.com/html5
html5demos...
Een introductie tot HTML5
Een introductie tot HTML5
Een introductie tot HTML5
Een introductie tot HTML5
Een introductie tot HTML5
Een introductie tot HTML5
Een introductie tot HTML5
Een introductie tot HTML5
Een introductie tot HTML5
Een introductie tot HTML5
Een introductie tot HTML5
Een introductie tot HTML5
Een introductie tot HTML5
Een introductie tot HTML5
Een introductie tot HTML5
Een introductie tot HTML5
Een introductie tot HTML5
Een introductie tot HTML5
Een introductie tot HTML5
Een introductie tot HTML5
Een introductie tot HTML5
Een introductie tot HTML5
Een introductie tot HTML5
Een introductie tot HTML5
Een introductie tot HTML5
Een introductie tot HTML5
Een introductie tot HTML5
Een introductie tot HTML5
Een introductie tot HTML5
Upcoming SlideShare
Loading in …5
×

Een introductie tot HTML5

955 views

Published on

Wat is er nieuw in HTML5? Navorming 28/01/2013, Het Perspectief Gent.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
955
On SlideShare
0
From Embeds
0
Number of Embeds
209
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Een introductie tot HTML5

  1. 1. HTML5 Een introductie Thomas Byttebier — thomasbyttebier.be Navorming Het Perspectief — 28/01/2014
  2. 2. HTML5? WTF! Waarom geen XHTML2? HTML5 combineert HTML4 & XHTML1
  3. 3. HTML syntax <DIV CLASS=belangrijk> <br> ! <ul> <li>list item <li>nog een list item </ul> !
  4. 4. XHTML syntax <div class="belangrijk"> <br /> ! <ul> <li>list item</li> <li>nog een list item</li> </ul> !
  5. 5. Ja maar… is HTML5 al ‘af’?
  6. 6. 2022
  7. 7. Is HTML5 al “af”? Wanneer kunnen we HTML5 gebruiken?
  8. 8. HTML4 was al jaren ‘af’…
  9. 9. Je kan nu al HTML5 * gebruiken!
  10. 10. Pfff… ik kende nu net HTML4 Is wat ik leerde dan nog bruikbaar?
  11. 11. HTML5 is backwards compatible
  12. 12. Je kan elk HTML4 element blijven gebruiken Geen enkele browser zal er over vallen maar…
  13. 13. Sommige elementen worden afgeraden (valideren!) <frame>, <frameset>… <font> <big> <center> <strike> … ! !
  14. 14. Sommige attributen worden afgeraden (valideren!) bgcolor cellpadding cellspacing valign … ! !
  15. 15. Sommige elementen krijgen een nieuwe betekenis of ander gebruik <b> <i> <small> <a> ! !
  16. 16. <b> “Tekst die anders moet worden weergegeven dan de gewone tekst, zonder extra nadruk mee te geven.” —W3C HTML5 specification
  17. 17. <i> “Tekst die andere stem of sfeer moet worden gelezen dan de gewone tekst, zonder extra nadruk mee te geven.” —W3C HTML5 specification
  18. 18. <small> “Tekst die ‘de kleine lettertjes’ voorstelt: copyrightinformatie, algemene voorwaarden, legale verplichtingen…” —W3C HTML5 specification
  19. 19. <a> “Het blijft een inline element, maar je kan er nu ook block-level elementen in plaatsen.” —W3C HTML5 specification
  20. 20. HTML4 <h1><a>Artikel titel</a></h1> <p><a><img></a></p> <p><a>Eerste alinea</a></p> <p><a>Lees meer »</a></p>
  21. 21. HTML5 <a> <h1>Artikel titel</h1> <p><img></p> <p>Eerste alinea</p> <p>Lees meer »</p> </a>
  22. 22. Kan ik alles van HTML5 nu al gebruiken?
  23. 23. HTML5 in 3 niveaus 1 2 3 Zonder problemen vandaag al bruikbaar, werkt in elke browser Bruikbaar, maar oudere browsers tonen gelijkaardig element Bruikbaar mits hacks, anders breekt je site in oudere browsers
  24. 24. 1 Zonder problemen vandaag al bruikbaar: het werkt in elke browser
  25. 25. De nieuwe doctype
  26. 26. HTML4 (XHTML1) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">
  27. 27. HTML5 <!DOCTYPE html>
  28. 28. Over de namespace en taal
  29. 29. HTML4 vs HTML5 <html xmlns="http://www.w3.org/1999/ xhtml" xml:lang="nl" lang="nl"> <html lang="nl">
  30. 30. Het karakterset
  31. 31. HTML4 vs HTML5 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta charset="utf-8">
  32. 32. De CSS link tag
  33. 33. HTML4 vs HTML5 <link rel="stylesheet" type="text/css" href="layout.css" /> <link rel="stylesheet" href="layout.css" />
  34. 34. De javascript script tag
  35. 35. HTML4 vs HTML5 <script type="text/javascript" src="javascript.js"></script> <script src="javascript.js"></script>
  36. 36. Samengevat: de nieuwe HTML5 startstructuur <!DOCTYPE html> <html lang="nl"> <head> <title></title> <meta charset="utf-8" /> <link rel="stylesheet" href="layout.css" /> <script src="js.js"></script> </head> <body> <!-- Jouw webpagina code --> </body> </html>
  37. 37. 2 Vandaag al bruikbaar, oudere browsers tonen een gelijkaardig element
  38. 38. Nieuwe elementen voor formulieren
  39. 39. Flashback: welke formelementen bestaan al in HTML4?
  40. 40. <input type="text">
  41. 41. <textarea>Tekst</textarea>
  42. 42. <input type="password">
  43. 43. <input type="file">
  44. 44. <input type="submit">
  45. 45. <input type="radio">
  46. 46. <input type="checkbox">
  47. 47. <select> <option>Nederlands</option> <option>Afrikaans</option> </select>
  48. 48. Nieuwe formelementen in HTML5
  49. 49. <input type="email">
  50. 50. <input type="email">
  51. 51. <input type="tel">
  52. 52. <input type="tel">
  53. 53. <input type="search">
  54. 54. <input type="search">
  55. 55. <input type="url">
  56. 56. <input type="url">
  57. 57. <input type="date">
  58. 58. <input type="date">
  59. 59. <input type="date">
  60. 60. <input type="color">
  61. 61. <input type="range">
  62. 62. Nieuwe attributen voor input-elementen
  63. 63. Verplichte velden <input type="text" required>
  64. 64. Autofocus <input type="text" autofocus>
  65. 65. Placeholder <input type="text" placeholder="Vul hier je naam in">
  66. 66. Extra voordelen • • • sommige toestellen tonen een input gerelateerde keyboard layout nieuwere browsers tonen aangepaste inputveldjes nieuwere browsers doen automatische inputvalidering ! !
  67. 67. Wat dan met oudere browsers? • • elke input type die ze niet kennen, vervangen ze door <input type=“text”> placeholder, autofocus, required, inputvalidering moet je als web developer opvangen via js & server side code !
  68. 68. 3 Vandaag enkel bruikbaar mits js/css hacks, anders breekt je webpagina in oudere browsers
  69. 69. Nieuwe inline elementen text-level semantics
  70. 70. <mark> “Om tekst te markeren die in een bepaalde context relevant is, maar in de normale context geen extra aandacht vraagt.” —W3C HTML5 specification
  71. 71. <mark> <p> Schrijf jij semantische <mark>HTML</mark>? </p>
  72. 72. <time> “Om data, tijdstippen of beide aan te duiden.” —W3C HTML5 specification
  73. 73. <time> <p> Kom eens langs op <time datetime="2015-04-07"> 7 april</time>. </p>
  74. 74. <time> <p> De staking vond plaats in <time datetime="1933-11">november </time> van dat jaar. </p>
  75. 75. <time> <p> Op <time datetime="01-01"> 1 januari</time> zijn we gesloten. </p>
  76. 76. <time> <p> Ik ben geboren in <time datetime="1980">1980 </time>. </p>
  77. 77. <time> <p> Het wonder vond plaats op <time datetime="2012-06-13 20:18"> 13 juni 2012</time>. </p>
  78. 78. <meter> “Om maateenheden aan te duiden, onderdeel van een schaal.” —W3C HTML5 specification
  79. 79. <meter> <p> Je behaalde een <meter value="9" max="10">9</meter> op je examen HTML. </p>
  80. 80. <progress> “Duidt de afgewerkte hoeveelheid aan van een taak.” —W3C HTML5 specification
  81. 81. <progress> <p> Je takenlijstje is al voor <progress value="60" max="100">60% </progress> afgehandeld. </p>
  82. 82. Nieuwe block-level elementen sectioning content
  83. 83. <section> “Om inhoudelijk gerelateerde zaken te groeperen.” —W3C HTML5 specification
  84. 84. <section> <section> <h1>HTML5</h1> <p>HTML5 is de toekomst.</p> <p>Er is geen weg terug.</p> <p><img src="i.jpg" alt=""></p> </section>
  85. 85. <article> “Om inhoudelijk gerelateerde zaken te groeperen. De inhoud blijft duidelijk als die uit de context van de website gehaald zou worden (bijv. in een RSS-lezer).” —W3C HTML5 specification
  86. 86. <header> “Bevat een groep inleidende of navigatie-elementen voor het element waarin header zich bevindt. Ook logo’s of zoekvelden zijn mogelijke inhoud.” —W3C HTML5 specification
  87. 87. <header> <body> <header> (logo en navigatie) </header> (rest van de pagina) </body>
  88. 88. <header> <section> <header> <p>Een introductie tot…</p> <h1>Moestuinieren</h1> </header> <p> Elke lente begint het weer te kriebelen. </p> </section>
  89. 89. <footer> “Bevat meer informatie over het element waarin footer zich bevindt: auteur, copyrightinformatie, links naar gerelateerde informatie…” —W3C HTML5 specification
  90. 90. <footer> <body> <header> (logo en navigatie) </header> (rest van de pagina) <footer> (copyrightinfo, contactinfo…) </footer> </body>
  91. 91. <footer> <section> <header> <h1>Moestuinieren</h1> </header> <p>Elke lente begint het weer te kriebelen.</p> <footer> <p>Auteur: Thomas Byttebier</p> </footer> </section>
  92. 92. <main> “Bevat de belangrijkste content van de body van een webpagina. Het kan daarom maar 1 keer voorkomen op een pagina.” —W3C HTML5 specification
  93. 93. <main> <body> <header> (logo en navigatie) </header> <main> (belangrijkste content) </main> <footer> (copyrightinfo, contactinfo…) </footer> </body>
  94. 94. <aside> “Bevat informatie die zijdelings gerelateerd is aan de inhoud rond het aside element, en die als aparte content gezien kan worden: pull quotes, zijkolommen, reclame, navigatie…” —W3C HTML5 specification
  95. 95. <nav> “Bevat belangrijke navigatielinks.” —W3C HTML5 specification
  96. 96. <nav> <body> <header> (logo) <nav>(unordered list)</nav> </header> <main> (belangrijkste content) </main> <aside> (zijinformatie) </aside> <footer> (copyrightinfo, contactinfo…) </footer> </body>
  97. 97. <figure> “Bevat een op zich staand beeld: foto, video, illustratie… (optioneel) met een onderschrift. ” —W3C HTML5 specification
  98. 98. <figcaption> “Bevat het onderschrift van een figure.” —W3C HTML5 specification
  99. 99. <figure> <figure> <img src="o.jpg" alt="twee meisjes"> <figcaption> Twee meisjes op het strand van Oostduinkerke. Ze lezen modebladen. </figcaption> </figure>
  100. 100. <figure> <figure> <img src="d.jpg" alt="diagram"> <figcaption> Het aantal nieuwe leden per jaar. </figcaption> </figure>
  101. 101. <figure> <figure> <img src="d.jpg" alt=“diagram 10"> <img src="d2.jpg" alt=“diagram 11"> <img src="d3.jpg" alt=“diagram 12"> <figcaption> Het aantal nieuwe leden per jaar. </figcaption> </figure>
  102. 102. Bron: html5doctor.com
  103. 103. In de war? http://html5doctor.com/downloads/h5d-sectioning-flowchart.png
  104. 104. De nieuwe elementen zijn vandaag bruikbaar, mits een regeltje CSS: section, article, header, footer, main, nav, aside, figure, hgroup
 { display:block; }
  105. 105. Internet Explorer < 9 heeft ook wat javascript nodig
  106. 106. Voeg ze toe aan je startstructuur: nieuwe elementen in elke browser <!--[if lt IE 9]> <script src=“http:// html5shiv.googlecode.com/svn/trunk/ html5.js"></script> <![endif]--> <style> article, aside, dialog, figure, footer, header, main, hgroup, menu, nav, section { display: block; } </style>
  107. 107. De nieuwe document outline van HTML5
  108. 108. De document outline van HTML4 <h1>Altijd de belangrijkste kop van de volledige pagina</h1> <h2>Nieuwsitem</h2> <p>Tekst</p> <h3>Subkop</h3> <p>Tekst</p> <h3>Subkop</h3> <p>Tekst</p> ...
  109. 109. De document outline van HTML5 <h1>Belangrijkste kop van de volledige pagina</h1> <article> <h1>Belangrijkste kop van article</h1> <p>Tekst</p> <h2>Subkop van article</h2> <p>Tekst</p> <h2>Subkop van article</h2> <p>Tekst</p> </article>
  110. 110. Nieuwe interactieve elementen in HTML5: geavanceerde oplossingen voor vanalles
  111. 111. Video en audio in HTML5 <video src="film.ogg" controls> Je browser ondersteunt geen HTML video. </video> ! <audio src="audio.ogg"> Je browser ondersteunt geen HTML audio. </audio>
  112. 112. Ondersteuning voor meer browsers <video controls> <source src="film.ogg" type="video/ogg"> <source src="film.mp4" type="video/mp4"> Je browser ondersteunt geen HTML video. </video>
  113. 113. Eventueel Flash fall-back voor IE <video controls> <source src="film.ogg" type="video/ogg"> <source src="film.mp4" type="video/mp4"> <object data="flvplayer.swf" type="application/x-shockwave-flash"> <param value="flvplayer.swf" name="movie"/> </object> </video>
  114. 114. Of gewoon een foto als fall-back <video controls> <source src="film.ogg" type="video/ogg"> <source src="film.mp4" type="video/mp4"> <img src="fail.png" alt="fail!"> </video>
  115. 115. Nog onbruikbaar in vele browsers. Gebruik javascript om ondersteuning te detecteren (bijv. modernizr.js)
  116. 116. Superhandig: caniuse.com
  117. 117. Meer weten?
  118. 118. Meer weten?
  119. 119. Bronnen en links • • • • • • html5doctor.com diveintohtml5.org modernizr.com matthiasbynens.be apple.com/html5 html5demos.com

×