HTML version 5

Världens webbutvecklare i framkant har, som det verkar, tröttnat på både w3c och webbläsarutvecklarna, och tagit fram ett förslag till ny standard för webben. De två idag mest förekommande standarderna html 4.01 och xhtml 1.x har en svag utvecklingstakt, och behovet av flera nya infallsvinklar är stort. Främst känner sig webbdesigners undanknuffade till förmån för utvecklare, och det är nu dags att erövra internet även för oss formgivare.

Den eminenta sajten A list apart har publicerat en artikel som går igenom de mest fundamentala skillnaderna mellan de gamla standarderna och den nya html 5.

En liten snabb sammanfattning av det som verkar vara mest intressant är följande:

  • Nya, beskrivande, taggar för områden på sajten
  • Generella taggar för inlänkning av multimedia som ljud och video
  • Starkare position för dom

Nya taggar för områden

Det här är den delen av den nya specifikationen som känns lite märklig. Den strävan som jag alltid har när jag bygger sajter är att få dem så semantiska som möjligt. Med det menas att man i koden beskriver vad det är som innehållet representerar. Inte hur utseendet på innehållet är.

I den nya specifikationen finns några nya taggar för områdesbeskrivning av sidhuvud, sidfot, artikel, avsnitt, navigering och sidokolumn. Just den sista av de här är den jag vänder mig frågande mot. Möjligtvis även sidhuvud och sidfot, men de är ändå en självklar del av en traditionell layout både med positionering och innehåll, vilket gör att de är beskrivande på ett annat sätt än en sidokolumn. Rent semantiskt borde sidokolumnen inte finnas, utan man bör istället använda den nya taggen för avsnitt tillsammans med ett id eller en class.

Exempel på hur skillnaden kan te sig när man jämför en normal uppmärkning av xhtml 1 med xhtml 5:

Layout med traditionell namngivning
Traditionell layout med <div>:ar

Layout med HTML5-taggar
Samma layout men med de nya elementen i html 5

Man kan i och för sig ställa sig frågande till varför man ska ta bort en generell tagg som <div> och ersätta den med inte mindre än sex nya. Vill man ha en förenkling av koden ställer jag mig tveksam till att det här är rätt väg att gå. Den av de nya som tillför mest är <nav> som är till för att ange att här finns en meny för navigering inom sajten. Eftersom navigeringen är en mycket central del av strukturen på sajten, är det inte mer än rätt att man märker upp var den är någonstans. Det här borde underlätta både för funktionshindrade, och för oss utan funktionshinder men som vill navigera med tangentbordet.

Det återstår att se hur den hanteras och används bara.

Multimedia-taggar

Här är något som verkligen är efterlängtat. Istället för att använda <object> och <embed> och förlita sig på att ett speciellt insticksprogram finns hos besökaren, så används istället generella taggar för länkning av multimedia. Precis (typ) på samma sätt som Levitra att länka in en bild i koden. Man låter helt enkelt datorn, eller webbläsaren, bestämma vilket program som ska användas för uppspelning.

Mycket bra av flera anledningar. Dels för att man förenklar inbäddandet för publicisten. Även normala användare kan infoga en kodsnutt som länkar till en film utan att behöva lägga till en trave kod för plugin-check, nedladdningslänkar och annat. Dels för att man främjar standardformat för ljud och video. Problemet har inte riktigt funnits med ljudfiler (mp3 är och har varit dominerande), men med video är det en djungeln.

Förhoppningsvis kommer mpeg4/avc och mpeg4/h.264 förpackade i en mp4-behållare att bli det format man föredrar. Det har fördelen att vara standardiserat, öppet och möjligt för i princip alla mediespelare att spela upp. Dessutom är det mycket bra både i kvalitet kontra filstorlek, och genom möjligheten att ha multipla parallella spår.

Exempel på hur en video kan länkas in:

<video src=”video.mp4″ controls poster=”poster.jpg” width=”480″ height=”320″>
<a href=”video.mp4″>Ladda ner filmen</a>
</video>

Här ser man att taggen är bakåtkompatibel mot läsare utan stöd för den nya taggen. I ett sådant läge visas länktexten istället för videon inbäddad på sidan. Man kan även lägga till en ”poster”-bild som platshållare för filmen. Inget mer trixande med referensfilmer alltså.

Ett annat exempel på en intressant funktion är taggen <canvas> som finns förklarad här.

DOM-trädets styrka

Det bästa här är att man har möjlighet att själv välja om man vill ha xml-stil eller traditionell html-stil på uppmärkningen av koden. Man gör alltså inte ett separat spår som är xml-kompatibelt med egna taggar som tillåts och inte tillåts, utan man kan själv efter behov välja att använda xml-syntax.

Är det bra eller dåligt?

Som i alla sammanhang finns det bra och dåliga sidor. Över lag tycker jag det är bra att någon verkligen tar tag i även uppmärkningen av innehållet på webben. Fokus har den senaste tiden varit på css, och just uppmärkningen har på något sätt bara accepterats. Visserligen har det funnits ett förslag till xhtml 2, men det har mer eller mindre somnat in. I och med att idén om html 5 kommit upp till ytan via en gräsrotsrörelse av formgivare och webbutvecklare, så har det mycket större chans att verkligen bli något, och det snabbt.

Visserligen har man en tidsplan om 15 år för att specifikationen ska sätta sig, men redan idag kan man om man vill använda delar av html 5. En sajt som redan idag använder det är Daring fireball. Varför man lagt ett så långt tidsspann som 15 år på implementeringen är svårt att gissa sig till. Kanske räknar man med att det först då är dags att övergå helt till nästa version eller kanske generation av sidbeskrivningsspråk på nätet.

Några intressanta platser att besöka för att läsa mer är så klart What WG, men även W3C och kanske Wikipedia.

Prenumerera på kommentarer till artikeln via RSS

Skriv en kommentar