Jag bloggar numera på http://blog.dileno.com ».

Börja med XHTML

en XHTML-artikel av Martin S., publicerad den 2 maj 2005
XHTML är språket som ska ersätta HTML fullt ut. Men innan man tar steget från HTML till XHTML så finns det några saker att tänka på. I denna artikel tar jag upp skillnaderna och hur man börjar skriva XHTML-sidor.

Varför blev HTML till XHTML?


HTML bygger i grunden på SGML (Standard Generalized Markup Language), som är ett språk för att beskriva andra språk. HTML är dessvärre ett språk som tillåter ostrukturerade dokument, och har genom åren inte används som det var tänkt. Man insåg att språket inte hade en framtid, och bestämde sig för att skapa ett nytt språk – XHTML (eXtensible HyperText Markup Language).
Till skillnad från HTML, bygger XHTML inte på SGML, utan på en mer restriktiv form av SGML – XML (eXtensible Markup Language). XML är inte lika komplicerat som SGML, men den största skillnaden är att XML inte tillåter ostrukturerade dokument. XHTML är egentligen HTML definierat som en XML-applikation.

I en värld där allt fler och fler använder andra plattformar än datorn till att surfa med (mobiltelefoner, handdatorer m.fl.), krävs ett språk som är strukturerat – och kan användas på samma sätt på de olika plattformarna. Det var oundvikligt att frångå HTML på grund av detta behov.

XHTML blev en webbstandard i januari 2000. W3C (The World Wide Web Consortium) är organisationen som ligger bakom utvecklingen av XHTML, tillika andra webbstandarder vi använder idag.

Viktigaste skillnader mellan XHTML och HTML


Eftersom XHTML bygger på XML, som inte tillåter ostrukturerade dokument, är XHTML ett språk som kräver att man strukturerar sina dokument väl. Nedan är de största väsentligheterna att ta i beaktande. Förklaring kommer senare.

  • XHTML-element måste vara rätt nästlade
  • XHTML-dokument måste ha rätt struktur
  • XHTML skrivs enbart med små bokstäver
  • XHTML-element måste stängas


XHTML-element måste vara rätt nästlade. I HTML tilläts det att skriva exempelvis

<b><i>Här är en fet kursiverad text</b></i>
vilket är fel. I XHTML måste man nästla elementen korrekt. Detta är rätt:

<b><i>Här är en fet kursiverad text</i></b>
XHTML-dokument måste ha rätt struktur. Detta är rätt struktur:

<html>
<head>..</head>
<body>..</body>
</html>

Till skillnad från HTML, så får man bara skriva XHTML med små bokstäver. Allt annat är fel.

Alla XHTML-element måste också stängas. Man får inte glömma bort att t.ex. skriva </p> efter en ny paragraf. Detta är fel:

<p>Detta är ett nytt textstycke.
Rätt:

<p>Detta är ett nytt textstycke.</p>
Detta inkluderar HTML-element såsom <br> och <img>. <br> och <img> har ingen sluttagg i XHTML. I stället skrivs <br> och <img> så här, med ett mellanrum och ett snedstreck före >:

<br /><img src=”bild.gif” alt=”bild” />
Andra element som detta gäller för är exempelvis hr och meta.

När du ger ett attribut ett värde, så måste värdet skrivas inom citattecken. Detta är fel:

<table border=0>
<tr><td valign=top></td></tr>
</table>

Rätt:

<table border=”0”>
<tr><td valign=”top”></td></tr>
</table>

Vad gäller bilder så måste de ha ett alternativt värde – alt-attributet får inte glömmas bort:

<img src=”bild.gif” alt=”bild” />
När man exempelvis använder sig av en dropdownlista så kan man välja att en listpunkt ska vara markerad. I HTML behöver man bara ange värdet för attributet, men i XHTML måste man ange både attribut och värde. Detta är fel:

<option value=”Sverige” selected>Sverige</option>
Rätt:

<option value=”Sverige” selected=”selected”>Sverige</option>
Du måste även ersätta < och >-tecken med dess så kallade entitet. I stället för att skriva < så skriver man
<
och för > blir det
>
. Även &-tecknet måste vi använda dess entitet för:
&
.

Slutligen så måste man, när man jobbar med ”externa” språk (exempelvis CSS och JavaScript), ange vilket typ av dokument som man jobbar med. Detta gör man genom att lägga till attributet type och korrekt värde:

<link rel="stylesheet" type="text/css" href="style.css" />
<script language=”javascript” type=”text/javascript” src=”fil.js” />

Dokumenttyper – ett måste


I XHTML finns det tre dokumenttyper (eng: doctypes) som man kan använda sig av. En dokumenttyp specifierar närmre vad för slags typ av dokument man har gjort. Beroende på vilken dokumenttyp man väljer (eller om man inte väljer någon alls – fast då går man mot standarden) så visas I XHTML finns det tre stycken dokumenttyper: transitional, strict och frameset.

Transitional och strict är de två som används mer frekvent. Strict är den dokumenttypen man väljer ifall om man totalt vill skilja innehåll från design, medan transitional snarare är en kompromiss mellan innehåll och design. Frameset-dokumenttypen använder man om man använder ramar på sina sida.

Dokumenttypen ska finnas innan <html>-taggen på varje sida:

<!DOCTYPE…>
<html>
<head>..</head>
<body>..</body>
</html>

Så här ser de tre dokumenttyperna ut:

Transitional:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Frameset:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Den grundläggande dokumentstrukturen på en XHTML-sida skulle alltså kunna se ut så här:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>..</head>
<body>..</body>
</html>

Börja använda XHTML nu!


XHTML är inte nytt – det är redan fem år sedan XHTML blev en webbstandard. HTML är förlegat och XHTML säkrar framtiden. Därför bör man snarast möjligt gå över till att skriva sina sidor i XHTML i stället för HTML. Från det steget är det sedan inte så långt till steget att på allvar skilja innehåll/presentation från design. (Men det är en annan fråga, och en annan artikel..)
Ta de främsta skillnaderna i beaktande och kör igång.