1
Mar

En förhandstitt på HTML 5

Kategorier: (X)HTML Semantik Webstandarder

Under snart ett decenniums tid har vi levt med de två vanligaste webbstandarderna för uppmärkningsspråk, HTML 4.01 och XHTML 1.1. Det kommer att dröja något eller några år till innan vi får en ny webbstandard, men den är på väg. Den heter HTML 5 och introducerar en rad nyheter, samtidigt som gammalt skräp städas bort. Den här artikeln tar en smygtitt på HTML 5 innan standarden är spikad och försöker ge dig en liten föraning om det som komma skall.

Webben har utvecklats otroligt mycket sedan HTML 4 kom. Bristerna i den grund som en stor del av webben står på, uppmärkningsspråket, märks tydligt. HTML skapades för att semantiskt märka upp vetenskapliga dokument, men med webbens utveckling har HTML använts till att beskriva många andra typer av dokument. Detta är vad HTML 5 försöker avhjälpa. Nya strukturella element, nya formulärmöjligheter samt APIer för 2D-grafik, musik och video är bara några av nyheterna.

Kom ihåg att HTML 5 fortfarande är under utveckling och kan komma att ändras framöver.

De största skillnaderna mellan HTML 5 och 4

I dokumentet HTML 5 differences from HTML 4 har W3C tagit upp de största skillnaderna mellan det nya och det gamla. Här ska jag försöka ge en komprimerad version av det viktigaste.

HTML 5 har två syntaxer: HTML och XML. Vilken som används avgörs av content-typen. Text/html för HTML och application/xhtml+xml eller application/xml för XML. Väljer man XML-syntaxen (vilken är kompatibel med XHTML 1) behöver man även ange namespace:

<html xmlns="http://www.w3.org/1999/xhtml">

Doctypen för HTML-syntaxen har förenklats väldigt mycket:

<!DOCTYPE html>

Doctypen anges för att webbläsare ska ramla in i standards mode (mer om det kan du läsa i artikeln "Vad är en doctype?" här på klientsidan). Dokument med MIME-typen XML hanteras alltid i standardsmode av webbläsare.

En uppsjö nya element och attribut har tillkommit, mer om dessa kan du läsa senare i artikeln. Borta är frames (äntligen!) och samtliga presentationsattribut på element (detta ska göras i CSS). I DOM blir bland andra getElementsByClassName() och innerHTML en del av standarden.

Nya element

Ett gäng nya element och attribut har tillkommit. Först och främst dyker några nya strukturella element upp som hjälper till med semantiken i ett dokument. De flesta av dessa kan du se genom att kika i källkoden på exempelsidan för HTML 5.

header - Används för att märka upp ett huvud på en sektion (inte nödvändigtvis ett sidhuvud) och kan med fördel innehålla dels rubriken samt information om den:

<header>

	<h1>En förhandstitt på HTML 5</h1>

	<h2>En liten artikel om HTML 5</h2>

</header>

Notera att det i och med den nya standarden är okej att ha flera H1-element på samma sida. Varje strukturellt element har en egen heading-hierarki (med h1-h6 element).

nav - används för att märka upp en navigeringsdel som till exempel en sitenavigering:

<nav>

	<ul>

		<li><a href="start.html">Start</a></li>

		<li><a href="lankar.html">Länkar</a></li>

		<li><a href="kontakt.html">Kontakt</a></li>

	</ul>

</nav>

section - Används för att märka upp en del av en sida. Till exempel kapitel i en artikel eller en innehållsdel på en sida.

article - representerar ett självständigt stycke innehåll på en sida som till exempel ett blogginlägg eller en nyhetsartikel.

aside - används för information som är löst relaterad till innehållet på resten av sidan.

footer - representerar en fot till en del av dokumentet. Det kan vara till exempel en artikelfot eller en sidfot.

Förutom alla dessa nya strukturella element tillkommer flera andra, några av dessa är:

video och audio - Används för att visa film och spela ljud på en sida. Webbläsarna kommer att ha stöd för codecs så dessa kan visas rakt i sidan. Webbläsarna kommer även att ha APIer så att man kan scripta egna användarinterface till t.ex. filmer.

meter - används för att visa en mätare av något slag. Till exempel diskanvändning.

progress - används för att visa framåtskridande vid tunga händelser i webbläsaren, t.ex. en bilduppladdning.

Nya APIer

Flertalet nya APIer kommer att tillkomma, och dessa är nästan de som är mest intressanta enligt min mening. Nya strukturella element i all ära, men egentligen skiljer de sig inte mycket från att ha div-element med olika klass-attribut.

2D-grafik - Ett API för att rita 2D-grafik i det nya canvas-elementet. Detta kommer gissningsvis att användas mycket till att bland annat rita upp grafer och göra spel möjliga rakt i webbläsaren.

Video och audio - APIer för att spela upp ljud och visa film direkt i webbsidan.

Drag & drop - Ett API för att tillåta dra och släpp på element som har det nya draggable-attributet.

history - ett API som tillgängliggör historiken i webbläsaren för att inte förstöra bakåt-knappen. Sidor kommer att kunna skriva till webbläsarhistoriken. Detta tolkar jag som att det kommer att lösa ett stort problem med AJAX-sidor, nämligen att bakåtknappen inte fungerar något vidare.

Stöd för offline webbapplikationer - APIer för offline databaser och applikationer.

Men stödet då?

Nu har jag inte testat alla funktioner i alla webbläsare, men HTML 5 stöds redan till relativt stor del. De nya strukturella elementen stöds av de flesta webbläsare. IE 7 och 6 stöter dock på patrull när man försöker styla dessa element med CSS.

Samtliga stora webbläsare (förutom .. surprise! IE 6 och 7) har redan stöd för canvas-elementet.

Opera och Mozilla har stöd för video och audio med de olika OGG-formaten (theora och vorbis).

Sakta men säkert implementeras standarden, trots att den inte är färdig, vilket påskyndar tillgängligheten. Man kan se det som att det är enkelt att stödja de nya strukturella elementen, till skillnad från att implementera alla nya APIer som är på gång. Personligen kommer jag inte att ödsla tid på att koda efter den nya standarden förrän den är spikad och har ett brett stöd i samtliga större webbläsare.

Finns det något dåligt med HTML 5?

En sak som har slagit mig när jag suttit och läst spaltmeter om HTML 5 är att div-elementet fortfarande finns kvar i standarden (men det kan så klart ändras) och bör användas där man har delar i ett dokument som inte har någon semantisk mening. Frågan är bara vilka dessa delar är?

En annan sak jag märkte är också att man vid vissa tillfällen får mer markupkod än vad som är nödvändigt. Se till exempel på huvudnavigeringen på en sida. I dagsläget skapar jag oftast en ul med id-attributet satt till "nav". Sedan stylar jag denna. I HTML 5 bör man först skapa ett nav-element och sedan under detta skapa ul-elementet.

Många har också påpekat att vi inte behöver fler element. Den egentliga skillnaden mot att ha div-element med klasser som heter "articles" och "section" etc. är väldigt liten. Många förespråkar en mer modulär och utbyggbar standard.

Vi får helt enkelt se hur HTML 5 ser ut när den är färdig och släpps. Har du själv åsikter om HTML 5 eller har möjlighet att svara på min frågeställning här ovan? Lämna en kommentar!

TYCKTE DU OM ARTIKELN?

KOMMENTARER

#1. Skriven av David den 21 Sep 2009

De nya elementen är väl bra att ha då sökmotorer och liknande vet vilken information som är vettig och inte och på så sätt får man bättre resultat. Screenreaders kan t ex leta upp alla menyer för användaren genom att kolla nav-elementen?

Nu blir det att kolla ifall du har fler artiklar inom ämnet ;-)

#2. Skriven av Stefan den 21 Sep 2009

Hej David,
jag håller med dig till fullo att t.ex. nav är bra att ha. Däremot kan man fundera på hur stor skillnaden verkligen är på t.ex. "articles" och "section". Det finns även andra som har de funderingarna har jag märkt:
http://www.zeldman.com/superfriends/guide/

Jag har tyvärr inte skrivit fler artiklar i ämnet HTML 5, men har funderat på att skriva en liten artikel om det nya javascript-API:et geolocation.