Artiklar / Utveckling

En introduktion till HTML5

Publicerad . Senast uppdaterad
Skriven av

- och en genomgång av skillnader och likheter mellan alla de olika versionerna av HTML och XHTML.

Här följer en genomgång av de olika versionerna och efter det en tar vi en titt på vad HTML5 innebär för nyheter. Vissa säger att det kommer dröja ytterligare 10 år, men stödet för HTML5 är ganska bra redan nu.

Historien om HTML och XHTML

HTML har utvecklats under många år och den senaste W3C-standarden HTML 4.01 är sedan slutet på 1999. Som vi alla vet har det hänt en hel del sedan dess. HTML har alltid varit bakåtkompatibelt, vilket är en stor fördel, och det är alltså inga problem att se en webbsida skriven i HTML 3 i dagens webbläsare.

Som en vidareutveckling av HTML lanserades XHTML 1.0 (senast reviderad under 2002) där den största skillnaden är att man införde krav på att använda XML-syntax. Detta innebär bland annat;

  • alla taggar skrivs med små bokstäver
  • alla taggar skall avslutas
  • alla attribut skall ha citationstecken

I övrigt är det inte så stora skillnader mellan HTML 4.01 och XHTML 1.0.

XHTML utvecklades också sedan till XHTML 1.1 som i princip är samma sak som XHTML 1.0, men med kravet att all data skall skickas med samma MIME-typ som XML (application/xhtml+xml).

För ett par år sedan var många säkra på att XHTML 1.1 var rätt väg att gå. Genom att använda XHTML 1.1 istället för HTML4 eller XHTML 1.0 så tolkades dokumenten som XML-dokument istället för SGML-dokument.

Som vanligt, så ställde däremot de olika webbläsarversionerna till det för oss utvecklare och även denna gången var det Internet Explorer som satte käppar i hjulet eftersom IE inte tolkade XHTML som XML utan som HTML.

Detta resulterade i att många utvecklare, däribland vi, började utveckla och validera dokumenten efter XHTML 1.1 Strict men fortfarande skicka dokumenten till webbläsaren som html/text istället för application/xhtml+xml som 1.1-specifikationen egentligen krävde. Såhär i efterhand kunde man kanske skickat dessa som XHTML 1.0 istället, eftersom vi ändå inte använde XML-egenskaperna, men så när som på en något annorlunda DOCTYPE så ser koden likadan ut. I praktiken blir alltså resultatet likadant.

Det finns givetvis möjlighet att skicka ett dokument med olika headers beroende på vilken webbläsare som står för anropet, men detta innebär då också att man var tvungen att skriva kod för att ta hand om detta och att det blev ytterligare en sak att testa i olika webbläsare.

I praktiken är oftast html/text ett bättre val.

Ovanstående tillvägagångssätt var i och för sig inte helt dumt i praktiken, eftersom XML på gott och ont är ett väldigt strikt språk. Visst bidrar ett XML-baserat dokument till striktare strukturerade dokument, men gör samtidigt webbsidorna väldigt känsliga för fel. Ett enda litet fel i koden innebär att sidan inte visas alls för besökaren, utan denne endast ser XML-tolkens felmeddelande på skärmen.

Finns det ett publiceringssystem bakom kulisserna, eller om man läser in data från någon extern källa, så riskerar man alltid att den kod som genereras inte är helt strikt. Det är alltså väldigt riskabelt att låta ett av dessa små fel göra hela webbsidan otillgänglig, då det framförallt inte är många kunder som nöjer sig med den här förklaringen när hela deras webbplats endast säger ”XML parsing error…”.

HTML5 vs. XHTML2

De senaste åren har två olika standards utvecklats parallellt. Den ena är HTML5 som W3C utvecklar tillsammans med WHATWG och den andra är XHTML2 – båda är så kallade Working Drafts för tillfället och är alltså inte helt spikade standards.

HTML5 är en vidareutveckling av HTML 4.01 medan XHTML2 inte har något som helst att göra med XHTML 1.1, utan är en helt ny standard som inte är bakåtkompatibel med HTML.

Förvirrande? Ja, en aning. Nyligen så har nu däremot W3C tagit beslutet att lägga ner fortsatt arbete med XHTML2 och istället fokusera på HTML5 – detta har också gjort att HTML5-stödet fått ett uppsving i webbläsarna och det ser alltså ut som om det är HTML5 som gäller framöver.

Åter dags för HTML då alltså, eller?

Så, nu verkar det alltså som om det är dags att börja koda HTML igen och då tänkte jag att det kunde vara nyttigt med en kort genomgång efter ovanstående historielektion.

Eftersom man också kommer att kunna välja att skriva koden som HTML-kod eller som XHTML-kod (och då menar jag alltså med XHTML 1.0-syntax) och validera den som HTML5 oavsett så finns alla möjligheter att fortsätta skriva bra kod, oavsett vilken syntax du gillar bäst. I de allra flesta fall är det alltså ingen större skillnad på att skriva bra HTML och bra XHTML, bara du är konsekvent och håller dig till en av de två.

HTML5 kan även ha både MIME-typ html/text så väl som MIME-typ application/xhtml+xml. I det senare fallet kommer det troligen att kallas XHTML5 istället för HTML5, vilket på ett sätt känns ganska logiskt men samtidigt blir ytterligare en XHTML-term som inte har något med XHTML2 att göra, trots ett högre ”versionsnummer”…

HTML4 och XHTML 1.0

Oavsett om du väljer att skriva HTML eller XHTML så skriv strikt kod. Detta gör du genom att använda en så kallad DOCTYPE längst upp i varje dokument. På detta sätt talar du om vilken typ av dokument det är du skriver och triggar även så kallat Standards Complient mode i webbläsarna som gör att sidorna renderas efter samma regler (i mycket större utsträckning).

Använd alltså HTML 4.01 Strict eller XHTML 1.0 Strict

HTML5

Kan alltså skickas som både application/xhtml+xml, som XHTML 1.1 skall göras enligt specifikation, och som text/html som HTML och XHTML 1.0 skall göras enligt specifikation. Det finns alltså inga hinder för er som vill använda HTML5 med en XML-parser.

Använder en mycket enkel DOCTYPE som <!DOCTYPE html>

Introducerar en rad nya semantiska taggar för att kunna strukturera dokumenten ännu bättre än idag. Visst fungerar <div id="navigation"> bra och är någorlunda både strukturellt och semantiskt men eftersom lika många använder <div id="nav"> eller <ul id="menu"> så finns det ingen standard.

De nya taggarna inkluderar bland annat;

”The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links”.

Denna tagg är alltså avsedd för att märka upp sidans huvudsakliga och primära navigation.

section

”The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a header, possibly with a footer.”

Används alltså för att märka upp specifika delar av en sida som hör samman.

I en <section> kan informationen ytterligare märkas upp med hjälp av följande taggar. Används dessa taggar utanför en <section> så associeras de med <body> och gäller således hela dokumentet istället.

”The header element represents the header of a section.” Därmed inte sagt att den endast innehåller H1 eller H2 taggar utan kan även innehålla information så som författare, publiceringsdatum och annan metadata.

”The footer element represents a footer for the section it applies to. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.”

Används alltså för att definiera information relaterad till den <section> den ingår i. Som exempel på detta använder W3C alltså länkar till relaterade artiklar och copyright-information. Värt att notera är att om en <footer>-tagg representerar hela sidan och innehåller kontaktuppgifter så skall dessa märkas upp med <address>-taggen som det tidigare funnits många olika åsikter om.

article

”The article element represents a section of a page that consists of a composition that forms an independent part of a document, page, or site.”

Tanken är alltså att <article> är tänkt att användas för att märka upp delar av ett dokument som klarar sig bra även på egen hand. W3C använder forumposter, artiklar, blogginlägg och kommentarer som exempel i sin beskrivning.

aside

”The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content.”

Hur man märker upp sekundär information när man skriver HTML finns det många åsikter om, i och med HTML5 finns nu en tagg som är specifikt tänkt att utnyttjas för att märka upp relaterad men inte primär information. Ett exempel på detta är den text som oftast funnits i en kolumn eller som utskjutande text i längre artiklar (så som citat och extra information).

Annat intressant

Andra intressanta taggar att hålla reda på är exempelvis;

  • <audio>
  • <video>
  • <canvas>

Nytt är också att <input> elementets type-attribut kompletteras med ett par nya varianter, exempelvis;

  • date
  • time
  • number
  • email
  • url

För oss som använder UTF-8 kodning (vilket i princip alla borde göra idag) kan detta definieras genom att lägga till <meta charset="UTF-8"> som första elementet i <head>-taggen.

Att använda HTML5 redan idag

Det är faktiskt inte speciellt svårt att börja använda HTML5 redan idag. Firefox i version 3.5+, Safari i version 4+ och Google Chrome klarar redan av det mesta utan några konstigheter, medan Internet Explorer kan behöva lite hjälp på vägen. Först och främst så tolkas inte de nya taggarna som block-element, så du måste deklarera dessa i CSS-dokumentet som sådana;

nav, section, header, footer, article, aside { display:block; }

För att applicera CSS i IE så måste även man registrera de object som använder taggarna ovan i DOM:en. Detta görs enklas genom att skapa dom med hjälp av JavaScript i början av dokumentet;

<script>
document.createElement('section');
document.createElement('nav');
document.createElement('header');
document.createElement('footer');
document.createElement('article');
document.createElement('aside');
</script>

Alternativt kan du använda dig av html5shiv eller ett mer robust bibliotek som Modernizr för att lösa problemet ovan.

Som bland annat Steve Smith påpekar i sin artikel så tolkar HTML5 <script>-taggen som JavaScript om inget annat anges, så därför är det onödigt att deklarera type=”text/javascript” explicit.

Nytt sätt att bädda in video på webben

Det är alltså möjligt att börja använda de nya strukturella taggarna ovan redan nu, men givetvis så kommer inte de nya elementen så som <video> eller <audio> att fungera i de webbläsare som inte har inbyggt stöd för HTML5.

Idag har Firefox, Safari, Chrome och Opera ganska bra stöd för <video> medan de andra webbläsarna fortfarande kräver att man använder exempelvis SWFObject.

En stor fördel med <video>-taggen idag är att så länge videoformatet stöds av Safari så fungerar den även på en iPhone med OS 3.0. Henrik Sjökvist har skrivit en bra introduktion som heter ”Using the HTML5 <video> tag with a Flash fallback” som är både kort och bra.

Använder du Firefox 3.5+ eller Opera kan du kolla in hur den nya <video>-taggen fungerar på länkarna nedan. Där visas en video i Ogg Theora-format (.ogm/.ogg) som går att spela utan några extra plugins, och endast uppkodat med HTML5.

Tyvärr så klarar inte Safari av .ogm-formatet i dagsläget, trots att Safari har stöd för HTML5. I det fallet är det dock ett aktivt val av Apple som är orsak till att videon i exemplet ovan inte spelas upp i Safari, och inte en brist i stödet för HTML5. Hade filmen varit i något format som Safari stöder hade det givetvis fungerat även där. För tillfället så stöder Safari samma format som QuickTime (där troligen MPEG4 är det vanligaste och mest använda idag).

Avslutning

Hoppas ni fått en ganska snabb men någorlunda överblick av hur HTML utvecklats och en tjuvtitt på den kommande HTML5-standarden. Nedan finns länkar till fler intressanta resurser om ni vill gräva djupare.

Referenser och resurser

Kommentarer

Jonas skriver:

Mycket bra artikel men sjukt svårläst text (texten är kamouflerad i bakgrunden). Fixa det så blir läsningen dubbelt så bra =)

Republic Factory skriver:

Tackar!

Skall vi vara helt ärliga så är det faktiskt så att du hittade till artiklarna innan vi hunnit finlira designen och testa den ordentligt.

Vi gjorde en liten smyglansering av artiklarna innan jul, men har inte riktigt hunnit med att slutföra den här delen av webbsidan efter det. Men nu när vi ser att folk börjar hitta hit får vi allt lägga på ett kol… ;)

Skriv en kommentar