Post on 28-Jan-2015
description
HTML5Een introductie
Thomas Byttebier — thomasbyttebier.be Navorming Het Perspectief — 28/01/2014
HTML5 combineert HTML4 & XHTML1
HTML5? WTF! Waarom geen XHTML2?
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…
<frame>, <frameset>… <font> <big> <center> <strike> … !!
Sommige elementen worden afgeraden (valideren!)
bgcolor cellpadding cellspacing valign … !!
Sommige attributen worden afgeraden (valideren!)
<b> <i> <small> <a> !!
Sommige elementen krijgen een nieuwe betekenis of ander gebruik
<b>
“Tekst die anders moet worden weergegeven dan de gewone tekst, zonder extra nadruk mee te geven.”
—W3C HTML5 specification
<i>
“Tekst die andere stem of sfeer moet worden gelezen dan de gewone tekst, zonder extra nadruk mee te geven.”
—W3C HTML5 specification
<small>
“Tekst die ‘de kleine lettertjes’ voorstelt: copyrightinformatie, algemene voorwaarden, legale verplichtingen…”
—W3C HTML5 specification
<a>
“Het blijft een inline element, maar je kan er nu ook block-level elementen in plaatsen.”
—W3C HTML5 specification
<h1><a>Artikel titel</a></h1> <p><a><img></a></p> <p><a>Eerste alinea</a></p> <p><a>Lees meer »</a></p>
HTML4
<a> <h1>Artikel titel</h1> <p><img></p> <p>Eerste alinea</p> <p>Lees meer »</p> </a>
HTML5
Kan ik alles van HTML5 nu al gebruiken?
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
Zonder problemen vandaag al bruikbaar: het werkt in
elke browser
1
De nieuwe doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML4 (XHTML1)
<!DOCTYPE html>
HTML5
Over de namespace en taal
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
HTML4 vs HTML5
<html lang="nl">
Het karakterset
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
HTML4 vs HTML5
<meta charset="utf-8">
De CSS link tag
<link rel="stylesheet" type="text/css" href="layout.css" />
HTML4 vs HTML5
<link rel="stylesheet" href="layout.css" />
De javascript script tag
<script type="text/javascript" src="javascript.js"></script>
HTML4 vs HTML5
<script src="javascript.js"></script>
<!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
Vandaag al bruikbaar, oudere browsers tonen een
gelijkaardig element
2
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
<input type="text" required>
Verplichte velden
<input type="text" autofocus>
Autofocus
<input type="text" placeholder="Vul hier je naam in">
Placeholder
Extra voordelen
• sommige toestellen tonen een input gerelateerde keyboard layout
• nieuwere browsers tonen aangepaste inputveldjes
• nieuwere browsers doen automatische inputvalidering !!
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 !
Vandaag enkel bruikbaar mits js/css hacks, anders
breekt je webpagina in oudere browsers
3
Nieuwe inline elemententext-level semantics
<mark>
“Om tekst te markeren die in een bepaalde context relevant is, maar in de normale context geen extra aandacht vraagt.”
—W3C HTML5 specification
<p> Schrijf jij semantische <mark>HTML</mark>? </p>
<mark>
<time>
“Om data, tijdstippen of beide aan te duiden.”
—W3C HTML5 specification
<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>
<time>
<meter>
“Om maateenheden aan te duiden, onderdeel van een schaal.”
—W3C HTML5 specification
<p> Je behaalde een <meter value="9" max="10">9</meter> op je examen HTML. </p>
<meter>
<progress>
“Duidt de afgewerkte hoeveelheid aan van een taak.”
—W3C HTML5 specification
<p> Je takenlijstje is al voor <progress value="60" max="100">60% </progress> afgehandeld. </p>
<progress>
Nieuwe block-level elementensectioning content
<section>
“Om inhoudelijk gerelateerde zaken te groeperen.”
—W3C HTML5 specification
<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>
<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
<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
<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 kriebelen. </p> </section>
<header>
<footer>
“Bevat meer informatie over het element waarin footer zich bevindt: auteur, copyrightinformatie, links naar gerelateerde informatie…”
—W3C HTML5 specification
<body> <header> (logo en navigatie) </header> (rest van de pagina) <footer> (copyrightinfo, contactinfo…) </footer> </body>
<footer>
<section> <header> <h1>Moestuinieren</h1> </header> <p>Elke lente begint het weer te kriebelen.</p> <footer> <p>Auteur: Thomas Byttebier</p> </footer> </section>
<footer>
<main>
“Bevat de belangrijkste content van de body van een webpagina. Het kan daarom maar 1 keer voorkomen op een pagina.”
—W3C HTML5 specification
<body> <header> (logo en navigatie) </header> <main> (belangrijkste content) </main> <footer> (copyrightinfo, contactinfo…) </footer> </body>
<main>
<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
<nav>
“Bevat belangrijke navigatielinks.”
—W3C HTML5 specification
<body> <header> (logo) <nav>(unordered list)</nav> </header> <main> (belangrijkste content) </main> <aside> (zijinformatie) </aside> <footer> (copyrightinfo, contactinfo…) </footer> </body>
<nav>
<figure>
“Bevat een op zich staand beeld: foto, video, illustratie… (optioneel) met een onderschrift. ”
—W3C HTML5 specification
<figcaption>
“Bevat het onderschrift van een figure.”
—W3C HTML5 specification
<figure> <img src="o.jpg" alt="twee meisjes"> <figcaption> Twee meisjes op het strand van Oostduinkerke. Ze lezen modebladen. </figcaption> </figure>
<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"> <figcaption> Het aantal nieuwe leden per jaar. </figcaption> </figure>
<figure>
Bron: html5doctor.com
http://html5doctor.com/downloads/h5d-sectioning-flowchart.png
In de war?
De nieuwe elementen zijn vandaag bruikbaar, mits een regeltje CSS:
section, article, header, footer, main, nav, aside, figure, hgroup { display:block; }
Internet Explorer < 9 heeft ook wat javascript nodig
<!--[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
De nieuwe document outline van HTML5
<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
<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
Nieuwe interactieve elementen in HTML5: geavanceerde oplossingen
voor vanalles
<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
<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
<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
<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
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.com