Een introductie tot HTML5

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

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?

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


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
tonen gelijkaardig element
Bruikbaar mits hacks, anders
breekt je site in oudere browsers

1
Zonder problemen vandaag
al bruikbaar: het werkt in
elke browser

HTML4 (XHTML1)
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">

HTML4 vs HTML5
<html xmlns="http://www.w3.org/1999/
xhtml" xml:lang="nl" lang="nl">

<html lang="nl">

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

<meta charset="utf-8">

HTML4 vs HTML5
<link rel="stylesheet" type="text/css"
href="layout.css" />

<link rel="stylesheet"
href="layout.css" />

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" />
<link rel="stylesheet" href="layout.css" />
<script src="js.js"></script>
</head>
<body>

</body>
</html>

2
Vandaag al bruikbaar,
oudere browsers tonen een
gelijkaardig element

Nieuwe elementen voor formulieren

Flashback: welke formelementen
bestaan al in HTML4?

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

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

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


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

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


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


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


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


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

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


<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
kriebelen.
</p>
</section>

<footer>
“Bevat meer informatie over het
element waarin footer zich bevindt:
auteur, copyrightinformatie, links naar
gerelateerde informatie…”


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

<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>
</footer>
</body>

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


<nav>
<body>
<header>
(logo)
<nav>(unordered list)</nav>
</header>
<main>
(belangrijkste content)
</main>
<aside>
(zijinformatie)
</aside>
<footer>
</footer>
</body>

<figure>
“Bevat een op zich staand beeld: foto,
video, illustratie… (optioneel) met een
onderschrift. ”


<figcaption>
“Bevat het onderschrift van een figure.”


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

In de war?

http://html5doctor.com/downloads/h5d-sectioning-ﬂowchart.png

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

Voeg ze toe aan je startstructuur:
nieuwe elementen in elke browser

<style>
article, aside, dialog, figure, footer,
header, main, hgroup, menu, nav, section
{ display: block; }
</style>

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>
<h3>Subkop</h3>
<p>Tekst</p>
<h3>Subkop</h3>
<p>Tekst</p>
...

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>

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="audio.ogg">
Je browser ondersteunt geen HTML audio.
</audio>

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>

Eventueel Flash fall-back voor IE
<video controls>
<object data="flvplayer.swf"
type="application/x-shockwave-flash">
<param value="flvplayer.swf"
name="movie"/>
</object>
</video>

Of gewoon een foto als fall-back
<video controls>
<img src="fail.png" alt="fail!">
</video>

Nog onbruikbaar in vele browsers.
Gebruik javascript om ondersteuning
te detecteren (bijv. modernizr.js)

Bronnen en links
•
•
•
•
•
•

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

Een introductie tot HTML5

Recommandé

Recommandé

Contenu connexe

Similaire à Een introductie tot HTML5

Similaire à Een introductie tot HTML5 (13)

Plus de Thomas Byttebier

Plus de Thomas Byttebier (8)

Een introductie tot HTML5