HTML5: the new kid on the block
Al gedurende lange tijd lezen we veel over HTML5. In deze blogpost gaan we je geen introductie of cursus geven in HTML5 maar proberen we toe te lichten wat HTML5 voor ons kan betekenen. Maar wat weten we er eigenlijk van?
Het slechte antwoord
HTML5 is een vaak gebruikte marketingterm, gebruikt om de prijs van een website omhoog te krijgen of om aan te geven dat je als bedrijf modern en up-to-date bent.
Het iets betere antwoord
HTML5 is meer dan een specificatie. Het is eerder een combinatie van HTML, CSS en Javascript die ervoor wilt zorgen dat we klaar zijn voor de toekomst.
-
Semantiek
Voor de developers onder ons misschien wel het leukste aan HTML5. In HTML5 kan je gebruik maken van een eenvoudigere syntax voor een aantal elementen (bv. type-attribuut van script is niet meer verplicht, verkorte doctype-declaratie …). Naast de vereenvoudigingen zijn er ook een aantal nieuwe semantische elementen toevgevoegd aan HTML5. Zo kan je door gebruik te maken van o.a. header, footer, section en article tags de HTML-code semantisch beter indelen waardoor de HTML direct een stuk leesbaarder wordt en Google (in de toekomst) je pagina makkelijker kan indexeren aan de hand van deze tags. -
Mobiel
Een andere leuke nieuwigheid in HTML5 zijn de nieuwe input types voor e-mail, number, date … Langs de ene kant zorgen ze ervoor dat de validatie door de browser zelf wordt afgehandeld, al is dit nog niet goed of volledig ondersteund. Aan de andere kant kan je op bv. de iPhone direct een aangepast toetsenbord weergeven. Zo is het voor de mobiele bezoeker een heel stuk makkelijker om een formulier in te vullen. Daarnaast voorziet HTML5 ook een GeoLocation API om je bezoeker lokale informatie te geven (bv. dichtstbijzijnde dealer). -
Offline
Een aantal nieuwe API’s in de HTML5 specificatie kunnen er ook voor zorgen dat je website of webapplicatie nog steeds beschikbaar is wanneer de bezoeker geen verbinding meer heeft met het internet. Op de dag van vandaag ben je vaak overal en altijd online via het 3G-netwerk van je operator. Met o.a. localStorage kunnen we ervoor zorgen dat een groot deel van je website offline beschikbaar is voor de bezoeker, wat de laadtijd (zeker over Edge) een stuk kan verbeteren. Een mooi voorbeeld hiervan is mobiele versie van Gmail -
CSS3
Vaak onder dezelfde noemer vermeld maar ook CSS kreeg een tijdje geleden al een stevige opknapbeurt. Deze nieuwe versie zorgt o.a. voor afgeronde hoeken, schaduwen, RGBA kleuren … waardoor we minder afbeeldingen moeten gebruiken wat de performantie van je website alleen maar kan verbeteren. Als we verder kijken dan zien we ook nog dat we in de toekomst animaties gaan kunnen tonen die we eerder met Javascript deden.
Het is belangrijk om te onthouden dat lang niet alle browsers deze nieuwe technologieën ondersteunen en we dus vaak nog moeten zorgen voor backwards compatbility. Enkele goede projecten hieromtrent zijn o.a. Modernizr, CSS3 PIE en HTML5shiv.
Het juiste antwoord…
… gaan we je niet kunnen geven! Echter wel interssante links...
-
The HTML5 Specifcation
Voor de echte die-hards -
W3C HTML5 Logo
Het enige echte logo! -
HTML5 Rocks
Open source project om te tonen wat allemaal mogelijk is met HTML5.
6 Reacties op deze blogpost:
Het enige wat we moeten wijzigen aan bestaande websites om ze HTML5 valid te krijgen is dit:
That's it.
Bedrijven die in de toekomst HTML5 functionaliteit willen gebruiken zoals local storage kunnen dat dus in principe direct doen.
-----------
Ik krijg echter vaak de vraag 'waarom zou ik nu HTML5 willen', xhtml doet het goed.
Dan zeg ik dat HTML5 idd. meer is dan een doctype wijziging. Voor de basing (de basis html) is de semantiek het belangrijkste, en net dat wijzig je niet zo snel meer achteraf.
Lijkt mij dat het nog wel enige tijd gaat duren voor je echt met HTML5 aan de slag kan. Zoals in het artikel vermeld zijn er inderdaad nog maar weinig browsers die het ondersteunen. Dit plus het feit dat vele gebruikers met verouderde browsers blijven werken gaat ervoor zorgen dat het nog wel een tijdje duurt. Net zoals het bij xhtml toch vrij lang geduurt heeft.
Zelfs nu zie je nog af en toe gebruikers met IE6.0, die dan verbaast zijn dat er iets niet werkt op een website.
Klaaske, je kan direct aan de slag met html5 hoor, er is geen reden om te wachten. Er zijn heel veel nieuwe features die je nu al kunt gebruiken in alle browsers. Als je enkel met die features werkt is er geen probleem, later kan je uitbreiden. Ondertussen leer je omgaan me de nieuwe semantieks want dat gaat niet altijd even vlot. Wat met de DIV tag bv (is tegenwoordig de nieuwe SPAN) en wanneer gebruik je ARTICLE en wanneer NAV. Soms zorgt dit nog wel eens voor wat verwarring.
Alle browsers zijn HTML5 ready. De meest voorkomende issues:
-> in Firefox zijn de nieuwe HTML5 elementen zoals header, footer, section, article, nav, aside geen block elementen, in je css display: block op deze zetten en Firefox zit in de loop
-> in Internet Explorer (alle versies lager dan de 9) volstaat het om een simpel stukje javascript te includen die de nieuwe elementen bruikbaar maakt.
Er zijn natuurlijk zaken die nog niet af zijn, maar de meeste zaken kan je al gebruiken, inclusief video en audio.
Wat me het meeste stoort tijdens discussies is dat websites niet 100% correct werken op oudere browsers maar dat ligt niet aan de HTML/ xHTML, eerder aan een slechte implementatie van CSS. Denken we maar aan de double margin, peekaboo, etc...
Btw, interessante link:
http://developers.whatwg.org/
Een goede basis trouwens om een HTML5 project te starten is HTML5 boilerplate: http://html5boilerplate.com/
Deed iedereen maar een update van zijn browser. Nog veel teveel mensen in België gebruiken IE6 of 7 (soms gaat het niet anders in bedrijven). Hoe je het ook draait of keert, HTML5 wordt hierdoor sterk beperkt, je kan er soms wel tussenoplossingen voor bedenken. Zelfs HTML4 werkt niet perfect op iedere browser.