Introduktion

HTML5 började som ett samarbete mellan tillverkare av olika webbläsare för att w3c ursprungligen inte ansåg att behovet för utökningarna fanns. Arbete på XHTML2 var på tapeten då, och hade varit länge.

Vad folk inte förstod dock, och fortfarande inte förstår, är att XHTML är html+xml, alltså XML, och XML är mycket mindre förlåtande än HTML. Anledningen till varför folk inte ser detta är att nästan ingen på nätet skickar sin webbsida som MIME-typen xml från webbservern för då kommer webbläsaren använda ett mycket strängare regelverk och minsta lilla fel kommer få webbsidan att sluta visas.

Konflikten låg just i att w3c ville arbeta mot ett strängare Internet, jag förstår dem faktiskt, för att tvinga folk in på standarder. Tyvär insåg tillverkarna av de olika webbläsarna att HTML måste vara något förlåtande, det kan inte bara sluta visa webbsidan vid minsta fel.

Så gruppen Web Hypertext Application Technology Working Group började utveckla HTML5 standarden själva, under ett annat namn vid den tiden. Efter ett tag kom styrelseledamoten Tim-Berners Lee, även en av det moderna internätets grundare, på andra tankar och sträckte ut en olivkvist till WHATW-gruppen. Så började samarbetet mellan w3c och WHATWG för att skapa det vi nu känner till som HTML5-standarden.

Just nu existerar stöd för HTML5 experimentellt i de flesta webbläsare och inte alls i MSIE 6, 7 och 8. Microsoft har lovat att MSIE 9 ska ha stöd för HTML5. Så stöd för enkla formateringsdirektiv finns redan i kända webbläsare som Firefox, Safari, Chrome och Opera. En sak de inte lyckats enas om är dock vilket format som ska stödjas av video-funktionen i HTML5.

Till sist vill jag bara nämna att hela dokumentet är skrivet i HTML5 efter principerna som jag presenterar, så det bästa man kan göra för att lära sig mer är att visa källkoden av dokumentet samt kika på stilmallen som tillhör.

Formatering

I den här tabellen listas de flesta nya formateringstaggar i HTML5 med en lätt beskrivning. För mer information, kika på källkoden av det här dokumentet för att se ett exempel av dessa nya taggar, eller klicka på taggens länk för att ta dig till dokumentationen på whatwg.org.

<header>: Något som är väldigt vanligt på de flesta webbsidor, ett huvudstycke. Här kan <h1> t.ex. ha en egen storlek, separat från den i <hgroup>.
<nav>: Något som ofta hittas i just huvudstycken av en webbsida är navigation, men <nav>-taggen är självklart inte begränsad dit. Detta blir en stor fördel när olika hjälpprogram för handikappade användare uppdateras att stödja HTML5 eftersom vi då inte behöver de här dolda Hoppa till innehåll-länkarna.
<article>: Den här kommer det oftast bara finnas en av i varje sida, t.ex. den här sidan som jag kallar en artikel. Den kan användas istället för den gamla metoden av <div id="content"> som ofta visar var innehåll på sidan börjar.
<section>: Den här taggen kännetecknar som det låter en sektion av webbsidan. Ska helst användas för att dela in en artikel i flera sektioner.
<hgroup>: Precis som <header> kan vara ett huvud för <body> så är <hgroup> ett huvud för <section>. Nu blir grupperingen av ett dokument bättre eftersom själva innehållet kan använda sig av <h1> separat från <header> av dokumentet. Den är taggen kan även användas för undergrupper av rubriker, t.ex. i en <header>.
<aside>: Något som skjuts åt sidan, återigen en ersättare för något man brukade göra med <div>, kan användas t.ex. för en sidospalt och syftet är att det typografiskt ska visas som en sidospalt någonstans.
<mark>: En markering av text, kan självklart ha en stilmall men syftet är att <mark>markera text på något sätt</mark>.
<time>: Den här får mig att tro att w3c menar allvar med <mark>, för denna tag beskrivs som formatering för tid och datum. Läser man vidare så står det att du kan ange ett datetime argument som ska vara en sträng med maskinläsbar tid/datum. Fler och fler webbsidor blir ju maskinlästa nu för tiden så det är bra på sådant vis.; Här finns även ett bool-värde som heter pubdate och anger att tiden ska vara publiceringstid för antingen omslutande <article> eller hela sidan. Så ett exempel blir <time datetime="2010-08-19T21:30:00" pubdate>Torsdag, 8 Augusti</time>.
<footer>: Sidfot, kan t.ex. innehålla en <nav> med lite länkar, eller annat! <footer> kan precis som alla andra sektioner av webbsidan ha undersektioner med <section> eller navigation med <nav> till exempel.

Viktigt att framhäva här är att det inte är så märkvärdigt, HTML5 är bakåtkompatibelt med HTML4 och inget kommer gå sönder. Det är bara lite nya taggar som ska hjälpa till och föra med sig fördelarna av XHTML till HTML. Så det viktigaste är nog bara att känna till vilka nya taggar som erbjuds, hur de ska användas, sen är det egen kreativitet som sätter gränser.

Media

Canvas

<canvas> är en av de mer spännande utvecklingarna i HTML5, inte mycket som sätter gränserna här eftersom Javascript kan rita, eller skicka, vilken data som helst till en canvas. Vissa har t.ex. skapat spel som körs i canvas.

Här nedan ser ni en liten bit kod som lyder <canvas id="ritbord" height="155" width="200"></canvas>, det är faktiskt inte mycket att se på och därför har jag angett en stilmall med en gräns runt för att visa var rutan är.

Tack vare att den har ett id kan vi anropa den genom DOM i JS och leka lite. Se källkoden av dokumentet för en bättre förklaring av vad jag gör men just nu har jag för det första skaffat ett objekt som pekar mot <canvas> med hjälp av var canvas = document.getElementById('ritbord');.

Ritbordet går även att återställa genom att ändra storleken, eller bara återställa storleken till den befintliga. Eller så kan man gå widescreen!

Det tog emot men jag har valt att sluta där och istället skriva mer om <canvas> här..

Video

Så här kan <video>-taggen användas för att inkludera en videospelare direkt i HTML-webbsidor, fungerar dock endast i webbläsare som stödjer video i HTML5. Fungerar inte HTML5 så är det meningen att den ska använda en lokal flashspelare som heter jwplayer.

<video width="640" height="360" controls>
	<source src="/pub/html5/Smiley.webm" type="video/webm" />
	<source src="/pub/html5/Smiley.m4v" type="video/x-m4v" />
	<source src="/pub/html5/Smiley.ogv" type="video/ogg" />
	<source src="/pub/html5/Smiley.mp4" type="video/mp4" />

	<object width="640" height="385" type="application/x-shockwave-flash" data="/pub/html5/jwplayer.swf">
		<param name="movie" value="/pub/html5/jwplayer.swf" />
		<param name="flashvars" value="autostart=false&image=preview.jpg&file=Smiley.flv" />

		<img src="preview.jpg" width="640" height="360" title="Tyvär inget videostöd i din webbläsare." />
	</object>
</video>

Här är resultatet.

Det är enkelt så mycket mer att säga finns inte men ni kan ändå läsa mer om <video> här.

Ljud

Enklare än <video>, spelar helt enkelt upp ljudfiler i webbsidan. Jag vet inte mycket om mediastöd för detta än och ska helt klart forska mer i det.

Kan se ut så här <audio src="Ente.ogg" controls></audio> och låta lite så här.

Så vitt jag kan se så har alla fyra av de bästa webbläsarna, Opera, Firefox, Chrome och Safari, stöd för just den här ogg-filen och audio-taggen.

Vanliga problem

Är ganska givet att det kommer vara lite problem, HTML5 är ju fortfarande experimentellt. Det som är roligt med experimentell mjukvara i ett så mångfaldigt moln som internet är dock att problemen endast är så stora som tillverkarna av mjukvaran som läser internet låter.

Med andra ord är det största problemet just nu att Microsoft® Internet Explorer® Inte Fungerar® med HTML5¿¡ Både företaget och utvecklare har dock lovat att detta ska fixas till version 9 av deras webbläsare. Tills dess får vi nöja oss med att all formatering av HTML5 fungerar utmärkt i alla andra stora webbläsare på marknaden.

Det största problemet med taggar som inte är implementerade är att det inte går att ange stilmallar för dem. Så det kan förstöra en webbsidas design just nu, t.ex. den här, och därför ska man komma ihåg att HTML5 är fortfarande experimentellt! En provisorisk lösning just nu är ett script från Remy Sharp som aktiverar HTML5 taggar i MSIE6, 7 och 8.

Scriptet lägger till element i DOM så att MSIE känner igen vad t.ex. <article> är för något och du kan använda stilmallskod på den. Det kan dock inte lägga till mediastöd i webbläsaren, men det är en väldigt bra provisorisk lösning för design.

Ett annat problem just nu är att flera olika företag som Apple, Opera, Mozilla och Google måste enas om vilket mediacodec HTML5-webbläsare ska ha stöd för som standard. Alltså är det ett dödlås just nu av nördar som argumenterar för hur man kan se suddiga pixlar i den andre nördens codec och att deras codec ger alla mest nördorgasm i upplösning och... ja, så kommer det förmodligen fortsätta ett tag till.

Personligen tror jag detta kommer vara den enorma grodan som antingen får HTML5 på fall eller gör att inget blir riktigt som det planerades. För även om de enas, så kommer folk utveckla egna plugins för webbläsare att stödja andra format och vi är tillbaka till ruta ett där alla drar åt var sitt håll. Vi får helt enkelt se vilket som blir mest populärt tror jag.

Ett mycket mindre problem som faktiskt syns på den här sidan är att Opera och Firefox inte verkar tycka om en gräns (border) runt <footer>-taggen. I Chrome och Safari syns den helt ok men de har ju samma renderingsmotor, WebKit, i Opera och Firefox syns bara två små streck till vänster. Detta löser sig med display:block; på <footer>-taggen.