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