Observera att detta är en lite äldre artikel som skrevs när HTML5 var på väg att lanseras, den håller däremot ändå som sammanfattning än idag…
En introduktion till HTML
HTML är ett begrepp med många olika tolkningar, vissa använder det som en sammanfattning på alla de tekniker som ingår och andra menar istället själva HTML-standarden. Här tittar vi på det senare, och gör 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 HTML-versionerna vi haft under åren och efter det en tar vi en titt på vad HTML5 innebär för nyheter.
Historien om HTML och XHTML
HTML har utvecklats under många år och 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 att
- alla taggar skrivs med små bokstäver,
- alla taggar skall avslutas,
- och att alla attribut skall ha citationstecken.
I övrigt är det inte så stora skillnader mellan HTML 4.01 och XHTML 1.0.
XHTML utvecklades sedan till XHTML 1.1 som i princip är samma sak som XHTML 1.0, men med kravet på att all data skall skickas med samma MIME-typ som XML (application/xhtml+xml). Detta innebär att dokumenten tolkas som XML-dokument istället för SGML-dokument som tidigare versioner av HTML.
För ett par år sedan var många säkra på att XHTML 1.1 var rätt väg att gå. 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 Internet Explorer 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 i och med detta. Förutom en något annorlunda DOCTYPE
så ser koden likadan ut och i praktiken blir alltså resultatet likadant.
I praktiken var däremot 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.
Så visst bidrar ett XML-baserat dokument till striktare strukturerade dokument, men det 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 istället.
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. Därför är det alltså väldigt riskabelt att låta små fel göra hela webbsidan otillgänglig. Webben bygger på feltolerans och alla webbläsare gör sitt bästa för att rätta till små felaktigheter, så XML-tolkens felhantering kanske inte är det bästa för vare sig besökarna, publicister eller webben i sig.
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 däremot nu W3C tagit beslutet att lägga ner det fortsatta arbetet 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 ut som om det är HTML5 som gäller framöver.
Åter dags för HTML då alltså, eller?
Ja, 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.
I HTML5 kan man välja att skriva koden som klassisk HTML-kod eller som XHTML-kod (och då menar jag alltså med XHTML-syntax) och validera den som HTML5. Så det 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 för övrigt 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”…
Skriv kod enligt HTML- eller XHTML-syntax
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. Detta läge gör att sidorna renderas efter samma regler i de olika webbläsarna (i mycket större utsträckning).
Så, använd alltså HTML 4.01 Strict eller XHTML 1.0 Strict vad det gäller syntax.
HTML5
HTML5 kan alltså skickas som både application/xhtml+xml och som text/html. Detta innebär att det inte finns några hinder för er som vill använda HTML5 med en XML-parser.
HTML5 använder också en mycket enkel DOCTYPE, det räcker med <!DOCTYPE html>
.
Förutom detta så introducerar den nya standarden även 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 riktig standard gällande exempelvis hur navigering skall märkas upp.
De nya taggarna i HTML5 inkluderar bland annat;
<nav>
”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 taggarna nedan. Används dessa taggar utanför en <section>
så associeras de med <body>
och gäller således hela dokumentet istället.
<header>
”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.
<footer>
”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, och 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 till vänster eller höger om huvudinnehållet 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
- url
För alla 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 Internet Explorer så måste även man registrera de object som använder taggarna ovan i DOM:en. Detta görs enklas genom att skapa dem 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 båda problemen ovan.
Som bland annat Steve Smith påpekar i sin artikel Structural Tags in HTML5 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 iOS 3 eller senare. 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.
- tinyvid.tv/show/3uwvr4t3wi3rm
- people.opera.com/howcome/2007/video/controls.html
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 fungerat. 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 överblick över hur HTML utvecklats och en liten tjuvtitt på HTML5. Nedan finns länkar till fler intressanta resurser om ni vill gräva djupare.
Referenser och resurser
- HTML5 standard
- W3C HTML Working Group
- ”Web Hypertext Application Technology Working Group”
- Exempel på en ”företagssida” uppkodad i HTML5 gjord av WHATWG
- Validera HTML5 med validator.w3.org och html5.validator.nu
- Using the HTML5
<video>
tag with a Flash fallback av Henrik Sjökvist - Structural Tags in HTML5 av Steve Smith
- A Preview of HTML5 av Lachlan Hunt
- Misunderstanding markup av Jeremy Keith