# HTML/HTML5

HTML5 is een herwerking en uitbreiding van HTML die nieuwe mogelijkheden biedt voor multimedia (audio, video) en gebruikersinteractie (javascript). Door te definiëren hoe de html-code geparsed moet worden door de browser, worden verschillen tussen browsers (Internet explorer, Safari, Firefox, ...) geminimaliseerd.
Deze nieuwe standaard werd ontwikkeld door de WHAWG (Web Hypertext Application Working Group) vanaf 2004 om ongemakken en problemen in webapplicaties op te lossen. HTML5 bepaalt de inhoud en structuur, CSS3 bepaalt de weergave, en javascript bepaalt het gedrag van de webpagina.

## Wat is er nieuw?

Html5 bevat niet alleen nieuwe elementen, maar herdefinieert ook sommige elementen en attributen, zodat het eenvoudiger wordt om html-code te schrijven, en sneller om een pagina te laden in de browser. Bovendien is er een uitgebreide ondersteuning voor interactiviteit en grafische elementen zonder dat er externe API aan te pas komen.

## Semantiek

In plaats van onderverdelingen te maken met DIV met een ID, kan men nu eenvoudiger gebruik maken van opmaakcontainers header, hgroup, nav, section, article, aside, footer.
Andere semantische elementen zijn figure, figcaption, time (Gregoriaanse kalender met 24-uursaanduiding), mark.
HTML 5-code: documentstructuur van een html5-pagina

## Elementen
### herwerking

Deze oude elementen werden geherdefinieerd:
* dl, dd, dt: definition list, details, details
* b, i, small, strong: vette, schuine, kleine, benadrukte tekstopmaak
* hr: horizontale lijn om tekst onder te verdelen
* menu: user interface met menukeuzes, toolbars, formulierknoppen

### vervanging

Onderstaande elementen werden verwijderd van de officiële specificatie, omdat ze enkel op de tekstopmaak slaan zonder semantische betekenis. Het is mogelijk dat sommige browser ze nog enige tijd zullen blijven ondersteunen:
* center: wordt vervangen in CSS door text-align:center of margin:auto
* basefont: vervangen door body {font-family: family; font-size: size;}
* big: vervangen door font-size: larger
* font: vervangen door font-family, font-size, color
* s, strike: beiden vervangen door text-decoration:line-through
* tt: vervangen door font-family:monospace
* u: vervangen door text-decoration:underline
* applet: vervangen door object
* acronym: vervangen door abbr (abbreviation)
* dir: vervangen door ul
* frameset, frame: te vervangen door fixed-position element of sourced document
* noframes: geen alternatief, aangezien frames niet meer ondersteund worden
* isindex: te vervangen door een server-side script
* align: vervangen in CSS door text-align of float
* alink: vervangen door a: active {color:color-value;}
* background, bgcolor: vervangen door background-image , background-color en kortweg background
* border: vervangen door border-width en kortweg border
* cellpadding, cellspacing: vervangen door padding en margin
* frame, height, link, rules: verwijderd

## Content types

* Flow: article, details, table, form, h1, small
* Interactive: audio, video, button, select, textarea
* Heading: h1, h2, hgroup
* Embedded: audio, video, canvas, embed, svg, img, iframe
* Sectioning: header, footer, article, section, aside, nav, title
* Metadata: script, link, style, command, title
* Phrasing: mark, input, kbc, sub, sup

## Gebruikersinteractie
### contenteditable

Met dit element is het mogelijk om tekstwijzigingen in dezelfde pagina mogelijk te maken. Met javascript kan de aangepaste tekst naar de server doorgestuurd worden om de wijziging op te slaan.
HTML 5-code: voorbeeld van contenteditable

### spellcheck

In combinatie met contenteditable, kan de tekst op spellingsfouten gecontroleerd worden.
HTML 5-code: voorbeeld van spellcheck

### draggable

Dit attribuut maakt het mogelijk om een figuur te verslepen over de pagina.
HTML 5-code: voorbeeld van draggable
Met javascript kunnen de bijhorende events (dragstart, drag, dragend, dragenter, dragover, dragleave, drop) afgehandeld worden. Met dataTransfer kunnen gegevens overgekopieerd worden.

## Hulpmiddelen
### Ondersteuning voor oudere browsers

Door onderstaande code in de head van de pagina op te nemen, kunnen html5-pagina's toch goed weergegeven worden in oudere browsers:

### Modernizr

Modernizr is een javascript-library die kan opsporen of de browser een bepaalde html5- of css3-functionaliteit ondersteunt. Zo kunnen deze zaken opgespoord worden: canvas, canvas text, audio, video, local storage, css animation, css gradient. Op die manier is het mogelijk om alternatieven te voorzien.
HTML 5-code: opsporen van compatibiliteit

## Meer informatie

* validator.w3.org om na te gaan of de website voldoet aan alle richtlijnen