HyperText Markup Language revision 5 (HTML5) is de nieuwste telg van de internettaal HTML, de code waaruit het wereldwijde web is opgebouwd. Het doel van HTML5 is om gebruik van proprietary internet-technologie als Adobe Flash, Microsoft Silverlight en Sun JavaFX overbodig te maken. Anders gezegd, HTML5 maakt het voor webpagina's mogelijk om tekst, afbeeldingen, multimedia en webapplicaties weer te geven in een browser.
De voordelen ten opzichte van revisie 4 (HTML 4.01) zijn een grotere compatibiliteit met browsers van verschillende platformen (desktop, mobiel, pda, e-reader, etc.), nieuwe functionaliteit en snellere laadtijden doordat er minder code gebruikt hoeft te worden.
Wat kan HTML5? In ieder geval een stuk meer dan het 'normale' HTML wat we kennen uit de eerste jaren van het internet. Dit zijn de nieuwe mogelijkheden:
Semantic Markup
Geolocation
Form Enhancements
Audio / Video
Canvas
Content Editable
Drag and Drop
Persistent Data Storage
Semantic Markup, oftewel semantisch opmaken. In de eerste HTML-versie werd < div > gebruikt om een bepaald onderdeel van een pagina aan te duiden, zoals de < h > header of de < p > paragraph. Hierdoor werd het mogelijk om HTML-documenten in blokken te groeperen. Semantic Markup gaat verder en laat onderdelen van pagina nader beschrijven door de nieuwe elementen zoals < article >, < section >, < aside >, < hgroup >, < dialog >, < footer >, < nav >, < time >, < mark >, < figure > en < figcaption > toe te voegen. Zo zijn er standaard meer mogelijkheden om webpagina's op te maken, wat tot gevolg moet hebben dat pagina's sneller laden en beter schaalbaar worden.
Geolocation Niet langer ben je voor het bepalen van je locatie gebonden aan een externe API of een browseruitbreiding. HTML5 kan met behulp van een stukje JavaScript je locatie bepalen en hierop bijvoorbeeld zoekresultaten aanpassen, Twitter-updates taggen en meer. Hier kun je testen of het in jouw browser werkt.
Form Enhancements. HTML5 bevat nieuwe attributen, invoertypes en elementen voor webformulieren. Zo wordt het voor ontwikkelaars bijvoorbeeld mogelijk om een schaal, kalender of zoekveld binnen een formulier (bijvoorbeeld een contact- of antwoordformulier) te integreren. Een voorbeeldje kun je hier vinden (let op, Form Enhancements werkt vooralsnog enkel volledig in Opera).
Audio / Video Over de mogelijkheden voor audio en video binnen HTML 5 wordt het meest gesproken. Deze feature integreert namelijk audio en video in je pagina, zonder dat je gebruik hoeft te maken van externe speler. Je kunt bij HTML5 gebruik maken van de tags < audio > en < video >, mits je audiobestand van het type .ogg, .mp3, .wav of .aac is of je videobestand een .ogv of .mp4 (h.264) filmpje is. Voorbeeldjes kun je hier (audio) en hier (video) vinden.
Canvas Met het element < canvas > kun je met HTML5 afbeeldingen in 2D JavaScript tekenen. Het toevoegen van het element in je code is makkelijk, maar het daadwerkelijk laten tekenen van vormen, grafieken, animaties en verschillende composities op je pagina is andere koek en voorbehouden aan echte programmeurs. Deze demo tekent een .png afbeelding met behulp van HTML5. Ook kun je met canvas speelbare games maken. (werkt niet in Internet Explorer)
Content Editable Dit attribuut zorgt ervoor dat gebruikers jouw content kunnen veranderen op je pagina. Eventueel kun je met extra JavaScript code toevoegen om dit ook in een WYSIWYG-omgeving te laten doen. Dat betekent dat gebruikers gemakkelijk plaatjes, links en andere uitgebreide toevoegingen kunnen doen. De standaardcode laat vooralsnog alleen de aanpassingen bold (vette tekst), italic (schuine tekst) en underline (onderstreepte tekst) toe.
Drag and Drop, oftewel slepen en neerzetten. Voor gebruikers wordt het hiermee mogelijk om elementen binnen pagina's te verplaatsen, zoals tekst, hyperlinks, afbeeldingen, audio of video. Een simpele demo hiervan kun je hier proberen. (werkt niet in Opera)
Persistent Data Storage is eigenlijk een nieuwe vorm van een cookie, een stukje code dat de browser achterlaat op de cliënt op bijvoorbeeld bij te kunnen houden hoe vaak je op een pagina bent geweest. De nieuwe attributen zijn "sessionStorage" en "localStorage" en zullen handig zijn voor bijvoorbeeld e-commerce activiteiten. Een filmpje waarin via HTML5 en Persistent Data Storage een to-do lijstje wordt gebouwd kun je hier bekijken.
Naast bovenstaande nieuwe mogelijkheden biedt HTML5 ondersteuning voor offline webapplicaties, zodat het mogelijk wordt om door te blijven werken in documenten van Office Web Apps of Google Docs, ook als het netwerk niet langer functioneert. Ook nieuw zijn Cross Document Messaging en DOM-elements by class name.
Op moment van schrijven is HTML5 nog geen officiële standaard, maar de verwachting is dat zodra dit gebeurt - wanneer weet nog niemand - steeds meer sites op basis van deze nieuwe structuur geschreven zullen worden. Tot die tijd kun je hier een paar voorbeelden van sites op basis van HTML5 bekijken, mits je browser dit ondersteunt.
Controleren of jouw HTML5-site alle officiële standaarden ondersteunt? Check het hier.
HyperText Markup Language revision 5 (HTML5) is de nieuwste telg van de internettaal HTML, de code waaruit het wereldwijde web is opgebouwd. Het doel van HTML5 is om gebruik van proprietary internet-technologie als Adobe Flash, Microsoft Silverlight en Sun JavaFX overbodig te maken. Anders gezegd, HTML5 maakt het voor webpagina's mogelijk om tekst, afbeeldingen, multimedia en webapplicaties weer te geven in een browser.
De voordelen ten opzichte van revisie 4 (HTML 4.01) zijn een grotere compatibiliteit met browsers van verschillende platformen (desktop, mobiel, pda, e-reader, etc.), nieuwe functionaliteit en snellere laadtijden doordat er minder code gebruikt hoeft te worden.
Wat kan HTML5? In ieder geval een stuk meer dan het 'normale' HTML wat we kennen uit de eerste jaren van het internet. Dit zijn de nieuwe mogelijkheden:
Semantic Markup, oftewel semantisch opmaken. In de eerste HTML-versie werd < div > gebruikt om een bepaald onderdeel van een pagina aan te duiden, zoals de < h > header of de < p > paragraph. Hierdoor werd het mogelijk om HTML-documenten in blokken te groeperen. Semantic Markup gaat verder en laat onderdelen van pagina nader beschrijven door de nieuwe elementen zoals < article >, < section >, < aside >, < hgroup >, < dialog >, < footer >, < nav >, < time >, < mark >, < figure > en < figcaption > toe te voegen. Zo zijn er standaard meer mogelijkheden om webpagina's op te maken, wat tot gevolg moet hebben dat pagina's sneller laden en beter schaalbaar worden.
Geolocation Niet langer ben je voor het bepalen van je locatie gebonden aan een externe API of een browseruitbreiding. HTML5 kan met behulp van een stukje JavaScript je locatie bepalen en hierop bijvoorbeeld zoekresultaten aanpassen, Twitter-updates taggen en meer. Hier kun je testen of het in jouw browser werkt.
Form Enhancements. HTML5 bevat nieuwe attributen, invoertypes en elementen voor webformulieren. Zo wordt het voor ontwikkelaars bijvoorbeeld mogelijk om een schaal, kalender of zoekveld binnen een formulier (bijvoorbeeld een contact- of antwoordformulier) te integreren. Een voorbeeldje kun je hier vinden (let op, Form Enhancements werkt vooralsnog enkel volledig in Opera).
Audio / Video Over de mogelijkheden voor audio en video binnen HTML 5 wordt het meest gesproken. Deze feature integreert namelijk audio en video in je pagina, zonder dat je gebruik hoeft te maken van externe speler. Je kunt bij HTML5 gebruik maken van de tags < audio > en < video >, mits je audiobestand van het type .ogg, .mp3, .wav of .aac is of je videobestand een .ogv of .mp4 (h.264) filmpje is. Voorbeeldjes kun je hier (audio) en hier (video) vinden.
Canvas Met het element < canvas > kun je met HTML5 afbeeldingen in 2D JavaScript tekenen. Het toevoegen van het element in je code is makkelijk, maar het daadwerkelijk laten tekenen van vormen, grafieken, animaties en verschillende composities op je pagina is andere koek en voorbehouden aan echte programmeurs. Deze demo tekent een .png afbeelding met behulp van HTML5. Ook kun je met canvas speelbare games maken. (werkt niet in Internet Explorer)
Content Editable Dit attribuut zorgt ervoor dat gebruikers jouw content kunnen veranderen op je pagina. Eventueel kun je met extra JavaScript code toevoegen om dit ook in een WYSIWYG-omgeving te laten doen. Dat betekent dat gebruikers gemakkelijk plaatjes, links en andere uitgebreide toevoegingen kunnen doen. De standaardcode laat vooralsnog alleen de aanpassingen bold (vette tekst), italic (schuine tekst) en underline (onderstreepte tekst) toe.
Drag and Drop, oftewel slepen en neerzetten. Voor gebruikers wordt het hiermee mogelijk om elementen binnen pagina's te verplaatsen, zoals tekst, hyperlinks, afbeeldingen, audio of video. Een simpele demo hiervan kun je hier proberen. (werkt niet in Opera)
Persistent Data Storage is eigenlijk een nieuwe vorm van een cookie, een stukje code dat de browser achterlaat op de cliënt op bijvoorbeeld bij te kunnen houden hoe vaak je op een pagina bent geweest. De nieuwe attributen zijn "sessionStorage" en "localStorage" en zullen handig zijn voor bijvoorbeeld e-commerce activiteiten. Een filmpje waarin via HTML5 en Persistent Data Storage een to-do lijstje wordt gebouwd kun je hier bekijken.
Naast bovenstaande nieuwe mogelijkheden biedt HTML5 ondersteuning voor offline webapplicaties, zodat het mogelijk wordt om door te blijven werken in documenten van Office Web Apps of Google Docs, ook als het netwerk niet langer functioneert. Ook nieuw zijn Cross Document Messaging en DOM-elements by class name.
Op moment van schrijven is HTML5 nog geen officiële standaard, maar de verwachting is dat zodra dit gebeurt - wanneer weet nog niemand - steeds meer sites op basis van deze nieuwe structuur geschreven zullen worden. Tot die tijd kun je hier een paar voorbeelden van sites op basis van HTML5 bekijken, mits je browser dit ondersteunt.
Controleren of jouw HTML5-site alle officiële standaarden ondersteunt? Check het hier.