För en tid sedan började jag läsa igenom Mark Pilgrims bok om HTML5 för att sätta mig in i vilka skillnader det rent konkret innebär vid webbutveckling. Som jag tidigare konstaterat så finns det anledning att grotta ner sig i HTML5 ifall man är intresserad av webbutveckling – och det behöver inte vara så svårt. Första steget för att konvertera till 5:an är nämligen bara att byta doctype. Med denna enkla handling är du igång. Oroa dig inte för komplikationer, resten av sidan kommer fortfarande att renderas korrekt eftersom HTML5 är en förlåtande uppdatering som är bakåtkompatibel (hoppas Pilgrim har rätt). Så här ser doctypen för HTML5 ut:
<!doctype html>
Borta är de långa doctypes som var omöjliga att minnas och ständigt copy/pastades in på sidorna. Et voíla! Du är nu igång med HTML5 och har tillgång till nya element som:
<nav>, <section>, <header>, och <footer>
För dig som har kodat blockdesign med hjälp av CSS är det här egentligen inget nytt. Istället för att använda span class eller id så har du färdiga element att använda dig av. Du sparar in några tecken och förbättrar samtidigt webben. Hur kan användandet av färdiga element göra anspråk på att förbättra webben? Jo, genom tydligare struktur på våra sidor blir det lättare för olika webbläsare att hantera innehållet. Framförallt kan det underlätta tillgängligheten för grupper som av olika skäl vill kunna hoppa över delar eller lätt kunna hoppa mellan rubriker, som exempelvis användare av talsyntes.
Behovet av de nya elementen hänger samman med att vi idag ofta bygger sidor med hjälp av mallar. Ett blogginlägg kan utgöra en fullvärdig sida i ett sammanhang för att i nästa utgöra en sidkomponent. Det är därför viktigt att vår markup kan anpassa sig efter detta. Alla webbutvecklare med aktning vet t.ex. att man bara får använda en gång per sida, men detta är numera inte längre helt sant. Genom att lägga under en egen sektion som t.ex. så kommer den tolkas som en del av en sidkomponent och automatiskt skapa en korrekt outline/hierarki för läsaren. Borta är en stor del av det komplicerade nästlandet med -, där man var tvungen att försöka hålla koll på vilken nivå en rubrik skulle sättas.
Men hur är det med alla kreativa möjligheter som man har hört talas om? Jo HTML5 erbjuder också element som:
, och nya formulärelement som <input type=”search”>
Dessutom finns en rad nya funktioner som möjliggör geolocation, offline funktion och HTML5 lagring hos användaren. Funktioner som jag ser fram emot att bekanta mig med. Framförallt ser jag fram emot att sätta mig in i hur detta kan användas för att förhöja upplevelsen för användaren och på så vis underlätta vardagen för oss alla.
Vilka är dina favoritfunktioner med HTML5? Vad bör jag fördjupa mig i?