HTML5 maakt de browserinterface volwassen

8 oktober 2010

HTML, kort voor HyperText Markup Language, is de taal waarin webpagina’s worden gespecificeerd. Het gaat dan echt om de opgemaakte tekst die vanaf de webserver naar de client (meestal Internet Explorer of Firefox) wordt gestuurd. Het transport geschiedt via HTTP (HyperText Transfer Protocol), een eenvoudig TCP/IP protocol vergelijkbaar met POP3 (Post Office Protocol) voor mail, FTP (File Transfer Protocol) voor bestandsoverdracht en SSH (Secure Shell) voor remote login.

HTML is echter al lang niet meer zo eenvoudig als bij de introductie twintig jaar geleden. Met het toenemende belang van de specificatietaal zijn er in de loop der tijd allerlei uitbreidingen aan toegevoegd. Belangrijkste zijn JavaScript (een programmeertaal die aan zowel Java als C++ doet denken en meer dynamiek en interactiviteit aan webpagina’s toevoegt), cookies (om gegevens voor langere tijd bij de client op te slaan), CSS (Cascading Style Sheets) voor de scheiding van inhoud en vorm, en embedded elementen en proprietary plugins als Java applets, ActiveX controls en QuickTime, Flash en Silverlight voor video.

Op dit moment worden HTML 4.01 en XHTML 1.1 het meest gebruikt. Die eerste is een natuurlijk vervolg op de eerdere HTML-standaarden, die allemaal implementaties van het oude SGML (Standard Generalized Markup Language) waren. De tweede is een parallelle ontwikkeling van het W3C (World Wide Web Consortium) en gebaseerd op het moderne XML (Extensible Markup Language).

Hoewel de naam anders doet vermoeden, is HTML5 niet langer gebaseerd op SGML. In de nieuwe standaard komen HTML en XML bij elkaar in een specificatie die ook met slecht gevormde HTML-code overweg kan. De basis is gelegd door de Web Hypertext Application Technology Working Group (WHATWG). Zij vonden het W3C te traag en te behoudend bij de ontwikkeling van XHTML 2.0. Inmiddels werken de twee organisaties samen aan HTML5. De WHATWG heeft daarbij zijn eigen Web Applications 1.0 ingebracht, tezamen met Web Forms 2.0, Web Workers (multi-core uitbreidingen voor JavaScript) en Microdata.

De belangrijkste vernieuwingen van HTML5 zitten in de ondersteuning voor multimedia, een betere interface en tags voor het semantische web, mashups en Content Management Systemen (CMS).

Audio en video

Multimedia wordt ondersteund met drie nieuwe tags: audio, video en embed. Daarmee kunnen streams voor respectievelijk geluid, beeld en andersoortige media in het HTML-document worden opgenomen, op vergelijkbare wijze als dat nu met plaatjes gebeurt. Firefox en Opera ondersteunen het open Ogg Vorbis formaat. Apple Safari en de volgende versie van Internet Explorer (IE9) gebruiken MP3. Google Chrome doet allebei.

Voor video lijkt het er op dat de Ogg container met een Theora codec de standaard wordt in de open wereld (Firefox, Chrome en Opera). Na bezwaren van Nokia en Apple is die combinatie echter uit de draft voor HTML5 geschrapt. Safari en IE9 (alsook Chrome) gebruiken het met licenties belaste H.264/MPEG4-formaat. De nieuwe tags betekenen in ieder geval het einde van de bestaande video-widgets en merk-gebonden formaten.

Canvas

De interactie met de gebruiker wordt op verschillende punten verbeterd en uitgebreid. Enerzijds zien we dat functionaliteit waarvoor nu nog de server nodig is, naar de client wordt verplaatst. Voorbeeld daarvan is de canvas tag. Daarmee kunnen in JavaScript plaatjes en diagrammen worden getekend.

Hieraan gerelateerd zijn inline SVG (Scalable Vector Graphics) and MathML. Die eerste is een XML-standaard voor 2-dimensionale vectorplaatjes en -animaties. In tegenstelling tot het canvas werkt SVG niet met een bitmap maar op basis van een beschrijving van lijnen, krommen, teksten en alle andere functies die je normaal gesproken in een tekenpakket tegenkomt. MathML is een verzameling tags voor de weergave van wiskundige formules in HTML-documenten.

Anderzijds zullen functies die nu nog via aparte JavaScript-widgets worden afgehandeld, straks door de browser zelf worden ondersteund. Dat zien we vooral terug in de formulieren. Nieuwe inputelementen zijn calendar, date, time, email, url, tel, number, range, color en search. Hun invoer kan meteen gevalideerd worden. Maar de browser zou sommige waarden ook direct uit je adresboek of bookmarks kunnen halen, vergelijkbaar met de manier waarop je nu een bestand op de harde schijf selecteert voor upload naar de server.

JavaScript-widgets

Andere input elementen vervangen speciale JavaScript-widgets die nu apart vanaf de server naar de client worden gestuurd. Bijvoorbeeld om een datum uit een kalender te selecteren, om een kleur uit een spectrum te halen, of om een waarde met behulp van een slider (meter) in te stellen. Straks zijn die mogelijkheden ingebakken in elke browser.

Nog een verbetering in de formulieren is de mogelijkheid om bij elk inputelement een form id te definiëren. Zo kun je meerdere buttons in hetzelfde formulier opnemen, bijvoorbeeld voor Submit, Preview en Review.

Tenslotte ondersteunen de formulieren naast GET en POST straks ook de PUT- en DELETE-opdrachten. Deze zijn al veel langer onderdeel van de HTTP-standaard. Ze zijn bedoeld om pagina’s - of beter gezegd: de datastructuren daarachter - te creëren en te verwijderen.

Structuur

Een andere groep nieuwe tags in HTML5 richt zich niet zo zeer op de inhoud van de pagina maar op de structuur. Blokken en tekstonderdelen worden op dit moment gemarkeerd met respectievelijk de div en span tags. Deze worden met name ingezet om de layout van de pagina te definiëren.

De nieuwe tags vormen een uitbreiding op deze twee bestaande, algemene tags. Het gaat om menu, command (een knop of actie binnen een menu), header (het hoofd van de pagina), footer (de voet van de pagina), nav (bijvoorbeeld de vorige/volgende knop onderaan een artikel bestaande uit meerdere pagina’s), article (voor een extern onderdeel, bijvoorbeeld een teaser afkomstig uit een RSS feed), section, aside (vergelijk een kader), details (meer informatie over deze pagina, bijvoorbeeld de naam van de auteur en de datum van publicatie) en hgroup (een groep koppen en subkoppen bovenaan een pagina).

Manipulatie

De structuur van een document is vooral interessant voor search engines en Content Management Systemen. Google kan de nieuwe tags gebruiken om belangrijke en minder belangrijke onderdelen van een webpagina van elkaar te onderscheiden. Naar verwachting zullen deze tags wel aanleiding geven tot nieuwe pogingen om de Google-indexering te manipuleren.

Interessanter zijn de mogelijkheden om hele blokken content in zijn geheel te kunnen managen. Behalve Content Management Frameworks (CMF) kunnen ook zogenaamde mashups de nieuwe tags gebruiken om veel flexibeler met blokken dynamische content om te gaan.

We willen hier ook de tientallen nieuwe events noemen. Je kunt nu JavaScript code triggeren op van alles en nog wat. Het interessantst zijn de events voor drag-and-drop, tot nu toe een van de grote tekortkomingen van de HTML-interface.

Semantische web

De nieuwe tags van HTML5 worden ook wel gezien als een eerste stap naar het semantische web of Web 3.0. Het draait daarbij echter niet in eerste instantie om de structuur maar vooral om de betekenis en de onderlinge relaties tussen pagina’s en blokken content.

De behoefte aan dit soort informatie is groot. Op internet wordt immers alles in HTML weergegeven. En daarmee gaat vrijwel alle meta-informatie verloren, terwijl die in het achterliggende systeem vaak wel beschikbaar is.

Voor het weergeven van relaties tussen documenten zijn al de rel en rev tags beschikbaar, maar die zijn beperkt en worden maar weinig gebruikt. De veel uitgebreidere RDF- (Resource Description Framework) en OWL- (Web Ontology Language) standaarden worden vooral toegepast in gespecialiseerde omgevingen. RDFa (RDF-in-attributes) en eRDF (embedded RDF) maken het wel mogelijk om RDF in combinatie met XHTML te gebruiken.

Microdata

Microformaten lijken nu nog de meest toegankelijke manier om webteksten van metadata te voorzien. Adressen, geo-informatie, datum/tijd-aanduidingen, contactgegevens, nieuwsberichten, producten, cv’s, recepten en sociale netwerken kunnen allemaal machineleesbaar worden gemaakt. Zwak punt van de microformaten is dat de structuur - en daarmee de layout - van de tekst meestal moet worden aangepast om de microformatspecificatie in de HTML-code te kunnen verwerken.

Microdata, wel onderdeel van HTML5, is een algemenere vorm om informatie die nu over verschillende plaatsen in het HTML-document verdeeld is, weer samen te brengen en een naam te geven. Dat is vergelijkbaar met de structuur in een tabel of een database. In feite is dat precies wat je met dit soort formaten wilt: de (database-)structuur waaruit de dynamische pagina’s meestal zijn gegenereerd weer reconstrueren uit de HTML-code.

Aan het semantische web wordt vooral getrokken door Tim Berners-Lee, uitvinder van het World Wide Web en directeur van het W3C. Anderen zijn echter van mening dat hij hiermee een utopie najaagt.

Achterstand

Tenslotte is er ook een aantal (deprecated) elementen uitgegooid. Dat geldt bijvoorbeeld voor tags die inmiddels vervangen zijn door CSS-aanduidingen. Maar ook de frames zijn straks niet meer te gebruiken.

Het zal sowieso nog jaren duren voordat HTML5 in zijn geheel gespecificeerd en geïmplementeerd is. Wel worden inmiddels al delen daarvan door Firefox, Chrome, Safari en Opera ondersteund. IE9, waarvan zojuist de eerste bètaversie is verschenen, ondersteunt de video en audio tags, canvas en SVG. Maar daarmee gaat deze nieuwe browser nu al met een achterstand van start.

Lokale opslag

Met lokale opslag biedt HTML5 een alternatief voor de beperkte en inefficiënte cookies. De localStorage is per domein georganiseerd. Net als bij de bestaande cookies blijven de gegevens hier permanent bewaard. Dit in tegenstelling tot de sessionStorage die wordt opgeruimd als de gebruiker zijn window of pagina dichtklikt. Deze laatste wordt gebruikt om meerdere sessies tegelijkertijd te ondersteunen. Nu kun je bijvoorbeeld maar op één Google-account actief zijn.

 
Lees het hele artikel
Je kunt dit artikel lezen nadat je bent ingelogd. Ben je nieuw bij AG Connect, registreer je dan gratis!

Registreren

  • Direct toegang tot AGConnect.nl
  • Dagelijks een AGConnect nieuwsbrief
  • 30 dagen onbeperkte toegang tot AGConnect.nl

Ben je abonnee, maar heb je nog geen account? Neem contact met ons op!