Een introductie tot HTML5

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’?

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.”


<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.”


<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

Het karakterset

De CSS link tag

De javascript script tag

<!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>  </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?

<textarea>Tekst</textarea>

<select> <option>Nederlands</option> <option>Afrikaans</option>

</select>

Nieuwe formelementen in HTML5

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.”


<p> Schrijf jij semantische <mark>HTML</mark>? </p>

<mark>

<time>

“Om data, tijdstippen of beide aan te duiden.”


<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.”


<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.”


<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.”


<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).”


<header>

“Bevat een groep inleidende of navigatie-elementen voor het element waarin header zich bevindt. Ook logo’s of zoekvelden zijn mogelijke inhoud.”


<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…”


<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.”


<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…”


<nav>

“Bevat belangrijke navigatielinks.”


<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. ”


<figcaption>

“Bevat het onderschrift van een figure.”


<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

<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?

Bronnen en links

• html5doctor.com • diveintohtml5.org • modernizr.com • matthiasbynens.be • apple.com/html5 • html5demos.com

Een introductie tot HTML5

Technology

Transcript of Een introductie tot HTML5