XHTML 1.0

XML - HTML - CSS - XHTML

Kortfattat är XML - Extensible Markup Language - ett språk som används för att strukturera data. XML är inte någon nymodighet utan har varit standard sen 1996 och bygger på SGML som fanns redan i början på 80-talet. XML är designat för att presentera data oberoende av vilken plattform (vilket system) man använder för att tolka informationen.

HTML bygger också på SGML. I och med HTML fanns möjligheten att fokusera på hur websidan tog sig ut visuellt i en webläsare. Layouten blev viktig - och utformningen gjorde sidorna tunga att ladda och komplicerade att koda.

HTML kompletterades med CSS för att man inte skulle behöva skriva in layouten direkt i koden på sidan. Det gjorde websidorna smidigare - men fortfarande är HTML inte det mest flexibla språket om man vill "läsa" informationen från olika plattformar.

På senare tid har det blivit allt vanligare att man vill ta del av innehåll på websidor med andra verktyg än en dator och en webläsare. Framöver kommer t.ex små handdatorer och mobiltelefoner vara ofta förekommande redskap när man vill surfa på webben. Alltså kommer behovet av att läsa websidor också utan tung layout att växa. Därav den nya standarden: XHTML.

XHTML är alltså en utveckling av HTML som är baserat på och anpassat till XML där endast sidans innehåll skrivs in i dokumentet. Layouten (Placering och Utseende) styrs av ett annat dokument: Stilmallen. I XHTML-strict tillåts inte heller attribut som styr sidans "beteende". Sånt ska skötas med JavaScript. XHTML är alltså skapat för att kunna hanteras av många olika plattformar. Det är därför det är så noga med hur man kodar i XHTML-strict.

 Till Toppen 

Hur fungerar XHTML?

XHTLM 1.0 är helt enkelt en utveckling av HTML 4.01. XHTML är den nya standarden - även om det faktiskt finns något som kallas HTML 5...

Jaha! Ska man glömma allt man kan om HTML nu då, och börja om från början och lära sig massa nya grejer? Nej då! Inte alls! Du måste behärska HTML för att kunna koda i XHTML. Man använder samma gamla taggar. Man får kanske vänja sig av med några stycken - och använda de gamla taggarna enligt några få nya regler - men annars är det samma sak! En sida kodad i XHTML ska forfarande ha filändelsen HTML!

XHTML eller HTML?

Jag vill så här inledningsvis påpeka att det inte är nåt fel ALLS att koda sina sidor i HTML. Det går utmärkt!

Du kan presentera "snygg och ren" kod (som blir lättladdad) genom att koda enligt standarden i HTML 4.01 Strict. Vilket språk du använder beror uteslutande på vad din sida har för målgrupp!

Egentligen är det inte så många som har någon fördel av att använda XHTML - sidan kommer i de flesta fall att tolkas på precis samma sätt som om du använde HTML... Fördelarna kan du dra nytta av först när din sida tolkas som XML. Nämnas bör att den mest använda webbläsaren Internet Explorer 6 inte stöder XHTML som XML på ett bra sätt...

Men när du kodar i HTML kan det vara bra att redan från början tänka på att inte slarva med kodningen och använda dig av CSS / Stilmallar för att styra din sidans utseende (presentation) i så stor utsträckning som möjligt. Då underlättar du en eventuell övergång till XHTML.

XHTML

Vill du vara "up to date" kan du använda XHTML i stället för HTML. Men kom ihåg att det är inte förrän du bestämmer att sidan ska tolkas som XML som det kommer att innebära någon avgörande skillnad... Läs mer om det längre ner!

Du måste koda din sida helt korrekt i XHTML. Den strikta versionen av XHTML tillåter inte att man använder element eller attribut som styr presentationen av innehållet. Det ska skötas uteslutande med CSS / Stilmallar.

För att koda din sida i XHTML måste alltså du ha MYCKET goda kunskaper i både HTML och CSS! Vill du använda XHTML-strict skadar det inte heller att vara rättså bra bekant med JavaScript.

Här kan du läsa utförlig information om XHTML 1.0 - på engelska!
XHTML 1.0 - W3C Recommendation

 Till Toppen 

DOCTYPE m.m. i XHTML

!DOCTYPE

Precis som i HTML måste du använda rätt Doctype för att sidan ska visas på det sättet du har tänkt dig! I XHTML 1.0 är det tre olika DOCTYPE'er som är aktuella.

HTML

I XHTML ska själva taggen <html> också innehålla attributet "xmlns" som står för XML-Name-Space och attributet "xml:lang" - som upplyser om på vilket språk sidan är skriven. Skriver man på svenska ska det se ut så här: xml:lang="sv" lang="sv". Men det skadar inte att samtidigt ha med ISO-upplysningen i en meta-tagg...

Är du nyfiken på vad XML-Name-Space är kan du läsa mer här:
www.w3.org / XML namespaces - på engelska!

Här hittar du en lista på all världens namnkoder: Oasis

Så här kan alltså grunden till en XHTML-sida se ut:

Läs vidare!

 Till Toppen 

Skillnader

Vad är då skillnaden mellan HTML och XHTML?

EXEMPEL

I XHTML måste taggar och attribut skrivas med små bokstäver

<TABLE BORDER="1">

<table border="1">

I XHTML måste alla taggar ha en slut-tagg - de måste avslutas

<p>Här följer en lista
<ul>
<li>Nummer ett
<li>Nummer två
<li>Nummer tre

<p>Här följer en lista</p>
<ul>
<li>Nummer ett</li>
<li>Nummer två</li>
<li>Nummer tre</li>
</ul>

De taggar som inte har någon naturlig slut-tagg - t.ex: <br> <hr> <meta> <link> <img> - måste ändå avslutas. Observera att det SKA vara ett mellanslag innan snedstrecket för att det ska fungera i alla webläsare. Så här:

<br />

<hr />

<meta name="author" content="Bill Gates" />

<link rel="stylesheet" href="stilmall.css" type="text/css" />

<img src="bild.gif" alt="beskrivning" />

I XHTML ska attributens värde omges av citationstecken:

<table border=1>

<table border="1">

I XHTML måste alla taggar avslutas i rätt ordning - de får inte överlappa varandra

<p>Text där sista ordet är <u>understruket</p></u>

<p>Text där sista ordet är <u>understruket</u></p>

I XHTML är attribut utan värde är inte tillåtna

Vissa attribut har så att säga bara ett värde. De ska ändå skrivas in med både attribut och värde.

<hr noshade>

<hr noshade="noshade">

I XHTML används attributet "id" för identifikation

I HTML 4 används "name" för att identifiera element - taggar - som: <img> <frame> <iframe> <map>. I XHTML används uteslutande "id". Det innebär t.ex att det många gånger blir enklare att länka till ett ankare.

<h1><a name="ankare">Rubrik</a></h1>

<h1 id="ankare">Rubrik</h1>
eller
<h1><a id="ankare">Rubrik</a></h1>

Undantaget är formulär och objekt. Där går det bra att använda "name". Så här t.ex:

<form>
<input type="text" name="Namn" />
</form>

I XHTML ska Javaskriptets start-tagg innehålla: type="text/javascript"

<script language="javascript" src="script.js"></script>

<script type="text/javascript"  src="script.js"></script>

CSS / Stilmallar används för sidans presentation

I XHTML ska du använda CSS / Stilmallar för att presentera din sida dvs. skapa din layout. XHTML-Transitional tillåts fortfarande viss formatering direkt i koden, men i XHTML-Strict tillåts ingen formatering alls. Det betyder att du måste ha goda kunskaper i hur man positionerar med CSS om du vill koda enligt XHTML-Strict.

Externa Stilmallar & Javaskript används i första hand

I XHTML är externa Stilmallar och Javaskript att föredra. Så här skrivs länkarna i koden:

<link rel="stylesheet" href="stilmall.css" type="text/css" />

<script type="text/javascript"  src="script.js"></script>

Vill man infoga script eller stilmallar direkt i koden bör man infoga koden i en CDATA-sektion. Annars kan webläsaren missförstå och tro att det handlar om XML-kod. Så här:

<style type="text/css">
<![CDATA[

Här skrivs stilmallen in precis som vanligt!

]]>
</style>

<script type="text/javascript">
<! [CDATA [

Här skrivs skriptet in precis som vanligt!

]]>
</script>

I XHTML måste teckenkoder för vissa tecken användas

När man kodar i HTML är det viktigt att ersätta de tecken som är reserverade för att användas i själva kodningen med teckenkoder. I HTML fungerar det många gånger även om man slarvar, men i XHTML måste de ersättas - annars tolkas de som kod. Det gäller främst dessa tecken:

 Till Toppen 

XML eller HTML?

Förenklat är XHTML 1.0 liksom en blandning av HTML och XML. XHTML kan tolkas antingen som HTML eller XML. Om du inte särskilt anger det kommer din sida att automatiskt tolkas som "text/html".

Som redan nämnts tidigare är det inte så många som har någon fördel av att använda XHTML - eftersom sidan i de flesta fall kommer att tolkas på precis samma sätt som om du använde HTML. Fördelarna kan du dra nytta av först när din sida tolkas som XML. Tilläggas bör att XHTML 1.1 alltid levereras som XML.

Vill du att din sida ska tolkas som XML anges det överst i dokumentet - ovanför doctype-deklarationen. Och ingen meta-tagg med: text/html - se ovan !

Så här t.ex:

<?xml version="1.0" encoding="iso-8859-1"?>

MEN!
Vill du att din sida ska tolkas som XML gör du klokt att läsa in dig ORDENTLIGT på hur det fungerar - hur det tolkas av olika webläsare och hur du ska göra för att komma runt de olika skillnaderna.

Observera till exempel att document.write i script inte fungerar när innehållet skickas som application/xhtml+xml - vilket kan ställa till en hel del trassel både här och där om man inte känner till det!

Här kan du läsa mer: Att leverera XHTML 1.0

Här diskuteras XHTML på svenska: xhtml.se

Här kan du läsa allt om XML: Extensible Markup Language (XML) 1.0 - på engelska!

En svensk sida om XML: XML SWEDEN

Eller sök på Google efter mer information!

    World Wide Web Consortium

Ibland kan man verkligen få för sig att det är de som tillverkar webläsare som bestämmer standarden på webben. Men så är det inte. Det gör World Wide Web Consortium.

Deras hemsida är förstås på engelska, men fixar du det kan du besöka den om du vill frossa i information om olika standarder på webben:
www.w3.org

Men det viktigaste finns också översatt till svenska! Kika här:
www.w3c.se

Validera

Valid är engelska och betyder "giltig" på ren svenska. Ett väldigt bra sätt att kolla koden på sin sida är att "validera" den och se hur pass "giltig" den är enligt standarden som man vill koda sin sida efter! Det finns en hel del sådana här validerings-sidor på webben men det bästa är förstås att validera sidan hos World Wide Web Consortium.

För att sidan ska kunna valideras måste man ange en korrekt DOCTYPE i sidans huvud och enligt alla konstens regler ska du också validera din Stilmall!

Här kan du validera din sida: W3.org / Validator och din Stilmall: W3.org / CSS-Validator

När det är klart kan du stolt infoga knappar som bevis på alla de sidor som är korrekt kodade i XHTML och inte har NÅGRA som helst anmärkningar! GRATTIS!

Eftersom den här sidan validerar som korrekt "HTML 4.01 Transitional" hos W3C kan jag infoga nedanstående knapp:

Du kan läsa mer om validering på föregående sida!