(X)HTML5
Introductie:
Een aantal nieuwe features:HTML5 is currently under development as the next major revision of the HTML standard. Like its immediate predecessors, HTML 4.01 and XHTML 1.1, HTML5 is a standard for structuring and presenting content on the World Wide Web. The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears.
- MathML en SVG gebruiken in text/html
- Nieuwe elementen
- Nieuwe form controls en methods
- Nieuwe attributen
- Offline data storage
- Nieuwe forms
- Multi-threaded javascript
- Offline applicatie caching
- Canvas element voor 2D drawing
Doctype:
Met HTML5 bestaat er niet langer een verschil tussen Strict/Transitional/etc. Tevens gebruiken HTML5 en XHTML5 dezelfde doctype, lekker makkelijk!Het verschil tussen HTML5 en XHTML5 kun je aanduiden door het correcte MIME type mee te geven:<!DOCTYPE html>
HTML5: text/html
HTML5: text/xml
XHTML5: application/xhtml+xml
XHTML5: application/xml
Nieuwe elementen:
- <article>
- <aside>
- <audio>
- <canvas>
- <command>
- <datalist>
- <details>
- <embed>
- <figcaption>
- <figure>
- <footer>
- <header>
- <hgroup>
- <keygen>
- <mark>
- <meter>
- <nav>
- <output>
- <progress>
- <rp>
- <rt>
- <ruby>
- <section>
- <source>
- <summary>
- <time>
- <video>
Zie tevens een lijst met deprecated elementen.
Nieuwe attributen:
- contenteditable
- contextmenu
- data-yourvalue
- draggable
- hidden
- item
- itemprop
- spellcheck
- subject
Local storage:
Met HTML5 komt er ook een nieuwe manier om data lokaal (dus op de PC van de gebruiker) op te slaan. Door deze vorm van local storage op te nemen in de HTML5 specificatie heeft men ervoor gezorgd dat de opslagmethode browseronafhankelijk is en dus in principe in elke browser zou moeten kunnen werken.Met de nieuwe opslagmethode zou je ongeveer 5MB aan data op de clientpc op kunnen slaan (de beschikbare ruimte kan variëren, afhankelijk van de wensen van de gebruiker en implementatie van de browser), wat gebeurt via een key/value pair. Hier zie je een voorbeeld van local storage:
Zie ook: http://www.w3schools.com/html5/html5_webstorage.aspLet’s see HTML5 Storage in action. Recall the Halma game we constructed in the canvas chapter. There’s a small problem with the game: if you close the browser window mid-game, you’ll lose your progress. But with HTML5 Storage, we can save the progress locally, within the browser itself. Here is a live demonstration. Make a few moves, then close the browser tab, then re-open it. If your browser supports HTML5 Storage, the demonstration page should magically remember your exact position within the game, including the number of moves you’ve made, the position of each of the pieces on the board, and even whether a particular piece is selected.
Offline applicatie caching:
Met HMTL5 is er een nieuwe manier op webpagina's/bestanden offline op te slaan zodat deze gebruikt kunnen worden wanneer er geen beschikking is over een internetverbinding. Dit gebeurt via het zogenaamde cache manifest, waarmee ingesteld kan worden welke bestanden lokaal opgeslagen mogen worden en welke van het netwerk gehaald moeten worden.De voordelen hiervan kunnen vrij groot zijn:
* offline browsing
As the name indicates, the user will be able to browse through the site even when he is offline.
* speed
Files that are cached locally will load much faster. Usually style sheets are shared across all pages of a website. The first time you load a page from a website, it will take some time to download the style sheet, but when you click on other pages, the browser won't need to download the file again.
* reduced load on server
Every time you load a page that has some cached elements, the browser will poll the server to check if the cached file has been updated; if it hasn't, then it won't download it. By doing so, the load on the server is considerably reduced.
Forms:
De HTML5 specificatie biedt een dertiental nieuwe field types, namelijk:- Color
- Date
- Datetime
- Datetime-local
- Month
- Number
- Range
- Search
- Time
- Tel
- Url
- Week
Deze nieuwe form types kunnen de gebruiker een aantal hele handige features bieden wanneer ze volledig geïmplementeerd zijn door de browser. Een aantal voorbeelden:
- Bij date, datetime, week, etc. field types kan html automatisch een datepicker tevoorschijn toveren waar de user een tijdstip uit kan kiezen. Dit zorgt ervoor dat je niet meer met Javascript hoeft te rommelen hiervoor.
- Automatische controle op bijvoorbeeld het email field type. Dit biedt een client-side controle of het ingevoerde e-mailadres een echt adres is (of in ieder geval een adres met een @ en een .).
- De iPhone (en vast ook andere smartphones) passen hun toetsenbord aan aan het field type. Bij de keuze voor number krijg je dus een toetsenbord met nummers, in plaats van letters.
- Wanneer de browser het field type niet herkent wordt deze gewoon als type="text" weergeven, waardoor je je form alsnog gewoon kunt gebruiken. Het kiezen voor de nieuwe forms heeft dus altijd voordeel.
- Nieuwe attributen zoals autofocus, autocomplete, placeholders,etc. Zie http://www.w3schools.com/html5/html5_form_attributes.asp
Semantiek:
Door de toevoeging van nieuwe elementen kunnen documenten veel semantischer worden opgebouwd. Enkele voorbeelden:HTML:
1
2
3
4
5
6
7
8
| <div class="article"> <div class="head"> <h1>Artikelnaam</1> </div> <div class="content"> <p>Lorem ipsum dolor sit amet, ...</p> </div> </div> |
Zou geschreven kunnen worden als:
code:
1
2
3
4
5
6
7
8
9
10
| <section> <article> <header> <h1>Artikelnaam</h1> </header> <section> <p>Lorem ipsum dolor sit amet, ...</p> </section> </article> </section> |
Semantiekfreaks kunnen dit naar hartelust aanpassen.
Zoals te zien is beschrijf je elementen in een document veel beter op deze manier.
En ander voordeel:
HTML:
1
2
| </div> </div> |
Wordt:
code:
1
2
| </article> </section> |
Op deze manier is veel duidelijker te zien waar de afsluittag bij hoort. Erg handig als je een hele zooi geneste elementen hebt
Browsersupport:
Op de volgende pagina is een overzicht te vinden van tags die ondersteund worden door de verschillende lay-out engines:Wikipedia: Comparison of layout engines (HTML5)
FAQ:
Q: Wanneer komt HTML5 uitA: Hierover verschillen de meningen... Volgens de W3C time table zal HTML5 eind 2010 een W3C Recommended status krijgen. Ian Hickson daarentegen gokt dat de nieuwe versie van HTML5 pas volledig compleet zal zijn in het jaar 2022. Veel browsers ondersteunen echter al een hoop features van HTML5, dus je kunt er al prima mee werken.
Q: Alle nieuwe elementen zien er raar uit in mijn browser
A: Dat kan kloppen, de elementen zijn al wel te gebruiken maar hebben nog geen eigen stijl. Het toevoegen van display: block aan de CSS van alle nieuwe elementen zou dit op moeten lossen.
Q: Help, mijn <opmaakelementen> zijn verdwenen
A: Don't worry! Dit kan simpel met CSS worden opgelost.
Q: Heeft er iemand nog vragen
A: DM me
Links:
- Why you should use HTML5
- Is HTML5 ready yet?
- Wikipedia over HTML5
- Periodieke tabel met HTML5 elementen
- W3C specs overview
- W3Schools HTML5 reference
- Dive into HTML5 blog
- WHATWG HTML5 FAQ
- HTML validator
- HTML vs. XHTML
- Browser support overzicht