I den förra artikeln så vi vad som kan vara en god HTML-kod. Där började vi titta lite på skillnaderna mellan HTML och XHTML, samt på nedvärderade taggar och attribut. Nu skall vi gå vidare och utforska detta närmare och se mer specifikt på olika slags HTML.
Hur SGML blev HTML blev XML blev XHTML
Från början fanns Structured Graphics Markup Language
, ett märkspråk som bl.a. användes av det amerikanska försvaret för deras miljontals sidor manualer.
SGML var krångligt men kraftfullt. När Tim-Berners Lee ville göra sitt sidbeskrivningsspråk (HTML),
så utgick han från SGML, fast han förenklade det åtskilligt. Däri låg kraften. Enkelheten gjorde att i stort sett alla kunde göra egna hemsidor.
När främst Netscape började införa grafiska element och taggar så svarade det visserligen mot ett av användarna uttryckt behov, men det kom att göra språket mycket svårare.
Många misstag begicks, men det var ändå så att man insåg värdet av sidmärkningsspråk också för annat än rena hemsidor och i stället för att införa tusentals taggar i HTML,
så konstruerades eXtensible Markup Language
, XML. XML har blivit en hypersuccé och finns på mängder av ställen, vilket vanliga datoranvändare är
lyckligt ovetande om. XML-standarden definierar inga element, utan det är upp till varje utvecklare att själv välja lämpliga taggar. Det kan se ut så här:
<?xml version="1.0">
<familjer>
<familj id="1">
<medlem id="550712-1112">
<namn>Sven Svensson</namn>
<mamma>321109-2223</mamma>
<pappa>301212-7777</pappa>
</medlem>
<familj id="1">
<medlem id="540712-8882">
<namn>Stina Svensson</namn>
<mamma>371109-4223</mamma>
<pappa>321212-7373</pappa>
</medlem>
</familj>
</familjer>
En dator kan naturligtvis inte förstå koncepten familj
, mamma
och pappa
. Ur datorns perspektiv hade jag kunnat kalla mina taggar precis vad som helst.
Deras namn bör dock vara logiska för mig som utvecklar och använde XML-filen.
XHTML är XML som använder sig av HTML:s välkända taggar. XHTML måste alltså uppfylla alla formella regler för XML, bland vilka jag strax skall förklara de viktigaste. XHTML är alltså en tillämpning av XML. Det finns andra. När någon har kommit på vad han eller hon tycker är en fiffig uppsättning taggar, så bör man göra dem unika genom att definiera en namnrymd till dem. Ett enkelt sätt att göra namnrymder unika är att namnge dem som en URI. På detta sätt kan man i samma XML-dokument blanda flera olika uppsättningar taggar. XHTML kan till exempel kombineras med SVG, vilket stöds av bl.a. Firefox, Opera och Safari. (Ledsen MSIE användare, ni lär tvingas vänta på detta.)
HTML kontra XHTML
Följande saker, som var önskvärt i HTML, är nödvändigt om man kodar XHTML:
- Alla taggar måste nästlas i rätt följd, som jag skrev i förra artikeln.
- Alla taggar måste avslutas. I HTML 4 är det frivilligt för somliga taggar.
- Alla attributvärden måste sättas inom citationstecken.
Följande saker som man tidigare inte behövde tänka på har nu tillkommit:
- Eftersom man i XML skiljer mellan elementnamn och attribut också beroende på om de skrivs med stora eller små bokstäver, så måste dessa i XHTML skrivas med små bokstäver.
Följande var OK i HTML 4 och tidigare:
<BODY>, <BoDy> och <body>. Nu måste man använda det sista alternativet. - Taggar som inte alls inringar något, som
<br>(=ny rad (eng: break), skall man nu alltså avsluta. Det kan enklast göras så här:<br/>. Här avslutas alltså element i samma tagg som det påbörjades. Äldre webbläsare kan ha problem med detta, så ofta skriver man för deras skull in ett mellanslag före den avslutande slashen, så här:<br />. Dessa gamla webbläsare är numera i stort sett utrotade, men jag fortsätter använda detta mellanslag i alla fall då jag tycker att det ökar kodens läsbarhet.
Ett vanligt nybörjarmisstag är att tro att man måste ha små bokstäver också i attributvärdena. Det är naturligtvis inte sant, av lätt förstådda skäl. Ett annat sådant misstag är att tro att man numera måste använda XHTML. Många världsledande webbutvecklare föredrar faktiskt HTML 4.01. Faktum är att de allra flesta webbplatser skickar sina sidor på ett sådant sätt att webbläsarna inte gör någon skillnad mellan vanlig HTML och XHTML, och alla teoretiska fördelar den senare har finns dåp inte tillgängliga alls. Personligen föredrar jag XHTML endast för att det språket tvingar mig att vara noggrannare.
Strict, transitional och frameset
När man introducerade HTML 4, så ville man uppmuntra till att skilja ut design (med CSS) från innehåll (HTML). Dock så fanns det ju redan enorma
mängder sidor gjorda utan sådan separation. Därför valde man att tillåta vissa element och vissa attribut, som dock markerades som nedvärderade.
Detta var alltså en åtgärd för att inte bryta bakåtkompabiliteten på nätet. Den som idag skapar en hemsida kan tvinga sig själv att undvika dessa
dåliga saker genom att välja att koda sin sida strikt
. Det som undanbedes i övergångsformen (eng: transitional)
av HTML 4 är förbjudet i den strikta versionen.
En annan sak som man inte bör göra, och som följaktligen inte får göras i strikt HTML 4 (och strikt XHTML) är att ha text eller bilder som
inte befinner sig i ett lämpligt element som markerar vad slags text det är, rubrik, stycke, formulärförklaring, punkt i en lista, värde i en
tabell, etc. I transitional
får man alltså göra så här:
...
<body>
Någon text här...
</body>
...
I den strikta formen av (X)HTML så tvingas jag ställa mig frågan vad detta är för text. Vad fyller den för funktion? Svaret på den frågan avgör vilken tagg som jag skall omslute den med. Att koda strikt ger mig alltså en knuff att göra min kod semantisk.
Modulär XHTML
I standarden XHTML 1.1 så finns det inte längre någon uppdelning mellan strict
och transitional
.
I stället har man delat upp element och attribut i en mängd moduler. Detta innebär ökad flexiblitet, men jag menar att som nybörjare är det
bättre att lära sig XHTML 1.0 strict först. Det är en mer lättbegriplig väg. Och så kommer man igång snabbare med att koda själv!
Frames
En annan kvarleva från 90-talet är ramar. De fyllde en viss funktion när de infördes men är mest allmänt idiotiska idag. För att det
fåtal situationer man är tvungen att använda frames, så finns ändå den möjligheten. Då bör man deklarera i sin doctype att
man använder sig av frameset
-versionen av (X)HTML.
Varför frames är dåliga
Idag är det vanligaste att man kommer till en hemsida från en länk på en annan sida, oftast Google, men det kan också vara en bloggare som vill tipsa om något bra, eller en kompis som vill mejla en länk till dig. Allt detta är svårt att få att fungera på ett vettigt sätt om man använder frames. Sidor i ett frameset kan nämligen inte djuplänkas.
Frames är också ett elände för handikappade, speciellt för dem som inte tittar på en hemsida, utan lyssnar på den via talsyntes eller tar del av den som blindskrift via en braille-terminal.
Det som man kan göra bra med frames, att slippa upprepa koden för somliga delar av sidan, såsom menyer, sidhuvud och sidfot, det kan man idag lösa med andra metoder. Kort sagt: Glöm frames. Använd dem inte! Punkt.
XHTML 2.0
Sedan ett antal år så pågår ett arbete med att ta fram framtidens XHTML. Den standard som går under arbetsnamnet 2.0 är dock ännu inte klar och eftersom den till skillnad från tidigare inte längre är bakåtkompatibel med äldre (X)HTML, så kommer det dröja flera år innan den slår igenom. Inte någon av dagens ledande webbläsare stödjer XHTML 2.0 på ett nämnvärt sätt, och det verkar inte heller finnas något intresse att införa ett sådant stöd.
(X)HTML 5
Just för att XHTML 2 bryter mot tidigare syntax, och dessutom blir svår att göra webbläsare för, så blev ett antal aktörer intresserade av att i stället vidareutveckla dagens HTML. Denna grupp, WHATWG, har fått sitt arbete erkänt av W3C, och inom dess ram har en öppen arbetsgrupp påbörjat utvecklingen av HTML 5. Detta är en bakåtkompatibel utvidgning av dagens HTML, som kommer att finnas i två serialiseringar: HTML och XHTML. Firefox, Opera och Safari har redan börjat implementera stöd för denna standard.
Sammanfattning och doctypes
| Version | HTML 3.2 | HTML 4.01 |
|---|---|---|
| strict | En version endast (grötig) | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| transitional | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
|
| frameset | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> |
| Version | XHTML 1.0 |
|---|---|
| strict | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| transitional | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| frameset | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> |
| XHTML 1.1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
|---|---|
| XHTML 2.0 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml2.dtd"> |
| HTML 5 | <!DOCTYPE html> |
| XHTML 5 | Ingen (sic!) |