31. 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
77. 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
!
80. <mark>
“Om tekst te markeren die in een
bepaalde context relevant is, maar
in de normale context geen extra
aandacht vraagt.”
—W3C HTML5 specification
99. <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
100.
101.
102. <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
106. <footer>
“Bevat meer informatie over het
element waarin footer zich bevindt:
auteur, copyrightinformatie, links naar
gerelateerde informatie…”
—W3C HTML5 specification
110. <main>
“Bevat de belangrijkste content van de
body van een webpagina. Het kan
daarom maar 1 keer voorkomen op een
pagina.”
—W3C HTML5 specification
113. <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
130. 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>
...
131. 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>
135. 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>
136. 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>