Jonas Webresurs: Xhtml 2.0 (Web 2.0)

1. Inledning
2. Varför kommer det nya kodstandarder?
3. Varför Xhtml 2.0?

4. Skillnader mellan Xhtml 1.0 och Xhtml 2.0
a) Strukturen skiljd från presentationen
b) <section> och <h>
c) <hr> har blivit <separator>
d) Navigationslistor med <nl>
e) Bilder
f) Länkar
g) Tabeller
h) Metadata
i) Mikroformat med role-attributet
j) Andra nyheter

5. Vad kommer Xhtml 2.0 att innebära för den som gör webbsidor?

Länkar, se min särskilda sida »

1. Inledning

Den här sidan bygger vidare på resonemanget kring den andra webben (Web 2.0) och tar upp vad den nya kodstandarden för standardwebbsidor innebär.

Resonemanget kräver att man har läst mina sidor om hemsidor enligt den första webben, Web 1.0, i synnerhet sidan om Xhtml 1.0. Du hittar alla sidor här »

2. Varför kommer det nya kodstandarder?

Varför kommer det hela tiden nya standarder? Frågan är berättigad eftersom språken för att koda hemsidor hela tiden förändras. Ett enkelt svar på frågan är att det hela tiden sker en utveckling av webben.

Denna utveckling innebär t.ex nya versioner av webbläsare, som klarar lite mer än sina föregångare. Kommersiella intressen tvingar många gånger fram nya funktioner och besökarna vill kunna skicka formulär enklare, titta på videor, lyssna på musik, skicka sms och mms, delta i videochattar, blogga, söka, osv.

På mina sidor om Web 2.0 har jag visat att den nya webben kräver nya funktioner i form av webbapplikationer, semantiskt innehåll, m.m.

Förutom denna utveckling måste webben också ständigt göras säkrare för att skydda den data som överförs. Det kan vara när du besöker din bank, handlar med betalkort, loggar in på ett forum eller liknande.

Sedan finns en stor mängd intressegrupper som vill vara med och ha åsikter och förbättra de standarder som finns. De ser ofta nya och bättre sätt att koda webbsidor och är med och skapar debatt.

Problemet med de standarder som finns är att de oftast inte innehåller några bra sätt att lösa de krav de nya funktionerna ställer. De som skapar de nya sajterna tvingas därför gå omvägar, vilket i sin tur innebär att mer kod måste skrivas, vilket innebär många nackdelar.

Därför tar man fram nya standarder. Problematiken diskuteras utförligt på många webbsidor och du hittar alla mina länkar på en särskild sida. Gå dit »

3. Varför Xhtml 2.0?

Vad är då poängen med Xhtml 2.0? Siffran "2" tyder väl på att något drastiskt har skett? Ja, men mest handlar det nya versionsnumret om att markera att man nu har en kodstandard som är anpassad för Web 2.0.

Som jag visade på förra sidan (se bilden här bredvid) så skapades Xhtml 1.0 för att man skulle kunna ta ett litet steg ifrån Html mot den mer användbara standarden XML.

Vad Xhtml 1.0 innebär kunde du läsa om på den särskilda sidan om detta, i sektionen om hemsidor och Html. Läs mer »

Xhtml 2.0 har alltså införts för att man skall kunna motsvara dagens - och framförallt morgondagens - krav på funktionalitet på webben. W3C skriver i specifikationen till Xhtml 2.0 (se särskilt avsnitt 1.1.1) att man i den nya standarden strävat efter:

Generisk XML
Att där det är möjligt använda XML snarare än att försöka härma XML. Finns det en funktion i XML så skall den alltså användas snarare än att man gör någonting nytt. Uttrycket man använder i specifikationen är "As generic XML as possible"

Usability
Man vill öka användbarheten genom att det bara går att skriva Xhtml-koden på ett sätt. Jämför med Html där <p> och <P> betyder samma sak.

Accessibility
På svenska "tillgänglighet". Genom att följa XML utesluter man inte framtida krav på nya funktioner.

Internationalization
Den första webben byggdes för den amerikanska marknaden. Numera finns det webbsidor på i stort sett alla språk, som ryska, grekiska, arabiska och kinesiska, men internationaliseringen ställer allt större krav som man måste tillmötesgå.

Device independence
Man kommer i framtiden att titta på en webbsida i datorn, mobilen och andra apparater. Tidigare har man varit tvungen att skapa flera olika versioner av samma sida för att bemöta dessa krav. Men ett modernt kodspråk måste på bättre sätt kunna anpassa koden och funktionerna så att man slipper sådant extrajobb.

Less scripting and more integration
Man vill även göra koden enklare att skriva för programmerarna och lättare att passa ihop med andra kodspråk, t.ex för scripts.

Det nya som tillkommit är en anpassning av Xhtml-koden för webbspecifika applikationer (på engelska Web API's) och formulär (XForms).

Web APIer är små program som körs direkt i webbläsaren. Jag har pratat om dem på mina sidor om Web 2.0. Google Docs & Spreadsheets är ett sådant exempel.

XForms är formulär i XML-format. De är mycket mer komplexa än formulär i Html och går att anpassa på betydligt fler sätt.

I länklistan över Xhtml 2.0 hr jag samlat lite länkar där man kan få svar på sina mer tekniska frågor kring Web APIer och XForms. Läs mer »

4. Skillnader mellan Xhtml 1.0 och Xhtml 2.0

Xhtml 2.0 innebär både att funktioner lagts till och att gamla tagits bort. Här skall jag berätta om vad det innebär.

W3C, som ansvarar för utvecklingen av Xhtml, skriver att övergången till den nya standarden inte kommer att innebära några större problem för besökarna, eftersom de senaste webbläsarna redan nu är anpassade för Xhtml 2.0 (se t.ex avsnitt 1.1.2. "Backwards compatibility" i Xhtml 2.0-specifikationen).

Detta är dock en sanning med modifikation. När detta ursprungligen skrevs, i oktober 2006, fanns ganska dåligt stöd för Xhtml 2.0 i webbläsarna.

Xhtml 2.0 är inte heller lika bakåtkompatibelt som sin föregångare. Det betyder att man inte kommer att kunna skriva en "övergångssida", alltså det som i Xhtml 1.0 kallades transitional. Läs mer om det på min sida om DTD. Gå dit »

En tudig indikation på detta är att det på flera ställen i specifikationen till Xhtml 2.0 står att man måste koda si eller så. En första reaktion när jag läste sådana passager i specifikationen var att den nya Xhtml-standarden ställer mycket högre krav på den som kodar webbsidor. Jag återkommer till detta i avsnitt 5.

Hur skiljer sig då Xhtml 2.0 från Xhtml 1.0? Här nedan skall jag nu ta upp några av de större förändringarna mellan Xhtml 1.0 och 2.0.

4a) Strukturen skiljd från presentationen

Jag har redan berört detta på min sida om olika sätt att koda hemsidor (»). Jag skrev där att W3C har ett motto, som lyder:

Xhtml är egentligen inte gjort för att presentera innehållet på en sida. Det är alltså inte meningen att man med Html skall ange sådant som vilket teckensnitt, vilka färger och var på sidan olika saker skall placeras.

I stället skall Xhtml användas för sidans struktur, som att dela in en text i stycken med rubriker, mellanrubriker och brödtext eller att skapa andra tydligt avgränsade utrymmen som sedan kan styras med stilmallar.

"HTML is at heart a document structuring language. XHTML 2 takes HTML back to these roots, by removing all presentation elements, and subordinating all presentation to style sheets."

Ett exempel på detta är sättet att koda rubriker med det nya elementet <section>.

4b) <section> och <h>

Detta element har tillkommit för att undvika en felaktig användning av H1-H6. Många har nämligen utnyttjat rubrikelementen för att styra utseendet på texten snarare än dela in den i rubriker skiljda från brödtexten.

H1-H6 kommer att finnas kvar, åtminstone tills nästa version av Xhtml. Men i Xhtml 2 har man även infört ett element som döpts till section (på svenska ungefär "avsnitt"), som används för "structured headings":

"Structured headings use the single h element, in combination with the section element to indicate the structure of the document, and the nesting of the sections indicates the importance of the heading. The heading for the section is the one that is a child of the section element." (ur specifikationen till Xhtml 2.0, sektion 8.5)

   <section>
      <h>Mellanrubrik</h>
      <p>Brödtext</p>
      <h>Ytterligare en mellanrubrik </h>
      <p>Brödtext</p>
         <h>Underrubrik</h>
         <p>Brödtext</p>
   </section>

Det jag kallat huvudrubrik är detsamma som på engelska kallas "top level heading" eller "level 1 heading". "Mellanrubrik" är på motsvarande sätt "second-level heading" eller "level 2 heading".

Fördelen med section-elementet är att det blir mycket lättare att dela in en sida i olika sektioner, som man sedan kan behandla på olika sätt, t.ex med en stilmall:

4c) <hr> har blivit <separator>

Ytterligare ett exempel på hur man kan skapa en tydligare struktur med Xhtml 2.0 är hr-elementet. "Hr" står ju för "horizontal rule" och har tidigare använts för att skilja olika avsnitt från varandra med en linje.

I Xhtml 1.0 hade man inte gjort något åt det, som följdaktligen inte gick att styra med stilmallskod. I den nya versionen har man emellertid bytt ut <hr> mot <separator>. Följden har blivit att man nu kan anpassa sina avgränsare så att de inte blott består av en (horisontell) linje utan av i princip vad som helst: linjer, prickar eller symboler. Och man kan placera dem vertikalt eller horisontellt. Så här kan det se ut:

<p>Här är text som jag vill skilja från...</p>
<separator />
<p>...den här texten.</p>

4d) Navigationslistor med <nl>

Eftersom många använder sig av listelementet och stilmallar för att skapa listor med länkar, har man nu lagt till ett element för det, <nl>.

"Navigation lists are intended to be used to define lists of selectable items for ordered presentation. These may be presented in a number of ways, for instance as a navigation bar, or as a menu." (ur specifikationen, avsnitt 11.2)

        <li>
          <nl>
            <label>Filosofer</label>
            <li href="#sokrates">Sokrates</li>
            <li href="#platon">Platon</li>
            <li href="#aristoteles">Aristoteles</li>
          </nl>
        </li>
    <li href="#conformance">Moderna filosofer </li>
    <li href="#litteratur">Litteraturförteckning</li>
  </nl>

4e) Bilder

Hittills har man i princip bara kunnat lägga in bilder med <img>, men har sedan inte kunnat påverka vilken bild som skall visas. Därför har man nu gjort två stora förändringar.

src
Den första innebär att bilder (och annat innehåll) kan läggas in i alla element, med attributet src. Detta diskuteras i specifikationen, avsnitt 18: "XHTML Embedding Attributes Module". Där hittade jag följande exempel:

<p src="semester.png" srctype="image/png">
<span src="semester.gif" srctype="image/gif">
En bild på oss på semestern.
</span>
</p>

Man kan på det här sättet låta webbläsaren (eller besökaren) visa antingen en gif-, png-version av bilden eller texten, beroende på vilken resurs som finns tillgänglig.

På motsvarande sätt skulle man kunna lägga in logotyper, tecken på andra språk, osv. Detta blir möjligt tack vare att man kan lägga in en beskrivning av vad det är man vill visa på samma ställe som man vill visa det.

img
Detta element har utökats så att man kommer att kunna lägga till innehåll i det. Men src-attributet kommer alltså delvis att ersätta <img>:

Här skulle bilden visas om den finns tillgänglig, men annars skulle bara texten synas. Detta är alltså ett smartare sätt att använda alternativ text, jämfört med då man utnyttjar alt-attributet.

object
Ännu större frihet ger detta element, som gör det möjligt att lägga till i princip vilket objekt som helst: texter, bilder, musik, osv. äs mer om det i avsnitt 25.1 i specifikationen.

4f) Länkar

på motsvarande sätt som src, kan href nu läggas in i vilket element som helst. Detta gör <a> överflödigt att använda för länkar, men finns ändå kvar i Xhtml 2.0. Så här blir det:

4g) Tabeller

I specifikationen ägnas tabeller ett helt kapitel: "30. XHTML Tables Module". Den stora förändringen är att man försökt styra upp användningen av tabeller.

Ett exempel på detta är att tabeller i fortsättningen måste innehålla en sammanfattning av innehållet. Detta görs med det nya elementet <summary>. Man rekommenderar också att <caption> utnyttjas för att ge tabellen en rubrik:

<table>
<caption>Årets bästa skivor 2006</caption>
<summary>Tabellen innehåller en lista över de skivor jag tycker varit bäst under 2006. Kolumnerna innehåller följande data: Artist, Skivtitel, Skivbolag.</summary>
<tr><td>Artist...
</table>

Xhtml 2.0 går dock inte så långt som att man förbjuder dem att innehålla stilmallar för att presentera innehållet på en webbsida. Detta har diskuterats flitigt på webben och strider har stundtals rasat mellan dem som föredrar tabellfria webbsidor och de som ser tabellernas fördelar.

Däremot rekommenderar många att inte använda tabeller för att styra var saker och ting skall ligga på sidan. I stället bör man använda <div>-elementet och positionering med stilmallar. Du kan läsa mer om vad det innebär på mina sidor om stilmallar. Läs mer »

4h) Metadata

I Html och Xhtml 1.0 har man haft ett fåtal sätt att ange metadata och det är mycket man inte kan påverka. Det går t.ex inte att ange semantiskt innehåll på något bra sätt. Man är i princip utelämnad till <title>.

Många har därför ändå försöka ange sådan data på andra sätt. För att komma förbi detta har man därför i Xhtml 2.0 försökt skapa bättre verktyg. Dessa kan sammanfattas så här:

i) Metadata

Metadata går att styra på nya sätt med attributen property och content. Det kan se ut så här:

Man kan läsa mer om vilka attribut som finns i sektion 24 i specifikationen, "XHTML Metainformation Attributes Module". Sektionen innan, "23. XHTML Metainformation Module", beskriver på vilka nya sätt metadata går att styra.

ii) Semantiskt innehåll

Vägen man gått för att införa semantiskt innehåll är via RDF-liknande metadata. I sådan anger man subject (vem eller vad som pekas ut), property (vilken egenskap det utpekade har) och eventuellt beskrivningar av denna egenskap.

Man vill ha den här indelningen för att kunna skilja mellan sådant som webbsidan, det webbsidan handlar om, vem som skrivit texten på sidan, osv. Här använder man attribut som about:

iii) Placering av metadata var som helst i texten

Det kommer också att bli möjligt att placera metadata inne i dokumentet. Här är ett exempel på hur det kan se ut:

Här anger man att "Koda hemsidor med Xhtml 2.0" både är sidans huvudrubrik och dess titel. På det viset slipper man använda <title>.

4i) Mikroformat med role-attributet

Role-attributet talar om vilken roll ett visst element har. Detta ligger också i linje med att man vill kunna bereda vägen för semantisk märkning. Om detta kan man läsa i kapitel 26 i specifikationen. Där hittar man också en lista på de värden som finns tillgängliga (se avsnitt 26.1).

för att ange att det som står i stycket är av underordnad betydelse jämfört med resten av texten.

4j) Andra nyheter

Det jag sagt här skrapar bara lite på ytan och tar bara upp det som jag tycker är det viktigaste för den "normala" webbkodaren. Jag har utelämnat en del förändringar av gamla element, nya attribut, nya sätt att referera till olika datakällor, nya metoder för händelsehanterare, osv.

Genomgångar med olika djup hittar du på min sida med länkar till Xhtml 2.0-resurser. Gå dit »

Jag har inte heller sagt något om de nya sätten att hantera formulär och frames, som man försökt lägga utanför Xhtml 2.0. I stället utgör de numera egna standarder: XForms respektive XFrames. X:et indikerar att formulär och frames nu lämnat Html och i stället anpassats till XML.

Allt detta kan du också läsa mer om på de andra sidorna i den här sektionen. Liksom på min sida med Web 2.0-länkar.

5. Vad kommer Xhtml 2.0 att innebära för den som gör webbsidor?

Jag tror att man även i framtiden kommer att kunna koda sina egna webbsidor, men jag tror också att det kommer att ställas mycket höga krav på den som försöker.

För det första handlar det då om att man måste ha mycket större kunskaper om många fler element, attribut och arbetsmoment än tidigare. Goda kunskaper om Ajax kommer att behövas för den som vill göra något mer avancerat. Läs mer om Ajax på en särskild sida. Gå dit »

Det här kommer att gälla oavsett om man kodar helt för hand eller om man använder något program, som Dreamweaver.

För det andra handlar det om att man måste koda exakt rätt. Hittills har man nämligen kunnat göra små fel och webbläsarna har ändå visat sidan korrekt. Men Xhtml 2.0 är inte lika förlåtande.

Min bedömning och förhoppning är att de som vill göra webbsidor i allt mindre grad behöver bekymra sig om koden och i stället kan ägna sin energi åt att skapa ett intressant innehåll.

Nya verktyg finns också runt hörnet, i form av publiceringsverktyg eller "content management systems". Dessa kommer att med enkla medel göra det möjligt att skapa riktigt fina webbsidor och göra det enklare att förstå koden genom att tillåta kodning på olika svårighetsgrad.

Gamla webbsidor kommer att kunna visas ett tag till, men alla som idag har sidor som inte följer den första Xhtml-standarden (dvs 1.0) bör fundera över om det inte är dags att konvertera till den. Detta kan man göra automatiskt i bl.a Dreamweaver.

Att konvertera äldre sidor från Xhtml 1.0 till 2.0 kommer då förhoppningsvis inte att bli lika arbetsamt.