Extensible HyperText Markup Language (XHTML)

Det finns några skillnader mellan HTML och XHTML och den viktigaste skillnaden är att man måste "stänga" alla taggar i ett XHTML-dokument. Även taggar som normalt inte har någon motsvarande stängningstagg, såsom <img> för bilder och <br> för radbrytning, måste stängas! Det gör man med en "slash" ( / ) i slutet på taggen.

Skillnader mellan XHTML och HTML

En skillnad är att en del HTML-taggar inte är tillåtna i XHTML. Det gäller främst taggar som används för presentation, dvs layouten för innehållet på sidorna. XHTML är inte avsedd att användas för att producera presentation, utan bara markering (markup) av hur sidorna visas. För presentationen skall man istället använda CSS (Cascading Style Sheets). Exempelvis "font" taggen är något som inte är godkänd i XHTML.

Konvertera HTML till XHTML

Om man redan har en webbsida som man vill konvertera till XHTML kan man följa nedanstående lista, steg för steg.

1: Ändra alla element till små bokstäver (gemener)
I XHTML måste alla taggar och attribut skrivas med gemener, vilket betyder att om man tidigare skrivit koden med versaler (stora bokstäver) måste dessa ändras.

Till exempel <EM>kursiv text</EM> är inte godkänd XHTML. Detta måste alltså ändras till <em>kursiv text</em>. Samma gäller naturligtvis för attribut i ett element, till exempel <a HREF="http://...">länktext</a> ska ändras till <a href="http://...">länktext</a>

2: Ersätt doctype-deklarationen
Detta måste göras för att dokumentet ska få rätt dokument-typ. Om man inte har en dokument-typ tidigare, måste man ha en i fortsättningen, högst upp i dokumentet. Nedanstående exempel gäller för XHTML 1.1. Fler dokumenttyper finns på W3C-sidan

<?xml version="1.1" encoding="UTF-8"?>
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Notera XML-taggen på första raden. Den säger att dokumentet är skriven i XML, som tillsammans med HTML, är en av delarna i XHTML. "UTF-8" kan naturligtvis ändras till den (ISO)kodning du vill använda.

3: Ändra i <html> taggen
Den vanliga <html> taggen måste ersättas med:

De två bokstäverna "sv" refererar till det språk webbsidan huvudsakligen är skriven i, i detta fall alltså svenska. Detta ändras förstås till "en" (för engelska), "fr" för franska, eller något annat, beroende på vilket språk som används.

4: Stäng alla element
Exempelvis måste <p> taggen i början på nytt stycke följas upp med </p> taggen i slutet på samma stycke. Detta gäller alla element som där detta är "frivilligt" i HTML och gäller då även listor med <li> elementet. Varje

Element som normalt sägs vara "tomma" (dvs element som fungerar ensam) måste också stängas i XHTML. Exempelvis <br> måste nu skrivas som <br />. (Notera ett mellanslag före /, detta för att det av någon anledning inte alltid fungerar utan mellanslag).

5: Kontrollera att alla attribut har citationstecken
I XHTML måste alla attributvärden vara omgivna av citationstecken. Exampelvis <table width=100%> måste kompletteras med citationstecken före och efter 100% så att det ser ut så här: <table width="100%">.

6: Förändra "minimiserade" attribut
En del attribut i ett element har alltid varit "minimiserade" för att bara har haft ett tänkbart värde. Ett exempel är <hr noshade> där "noshade" attributet bara har ett tänkbart värde, dvs "noshade". I XHTML måste du skriva <hr noshade="noshade" /> då "noshade" attributet inte längre kan skrivas minimerad.

Denna regel gäller förstås också attribut som 'selected' i <input type="radio" />, och <option></option> taggarna och alla andra mindre använda minimerade attribut.

7: Kontrollera att alla bilder har ett 'alt' attribut
Detta "alt" attribut i <img /> har alltid varit användbart, men nu är det också obligatoriskt. Attributet ger en alternativ text om bilden av någon anledning inte kan ses. Till exempel i en textbaserad webbläsare, som även sökmotorerna är. Synskadade använder datorer som med artificiellt ljud högläser innehållet och kan då höra vad bilden innehåller. Attributet skrivs in på detta sätt: <img src="dinbild.jpg" alt="alternativ text" />.

Om du har en bild som inte behöver en alternativ text (t.ex. för att den inte ska vara synlig) så kan du använda en tom "alt" (alt=""). Observera att detta attribut är inte avsett som ett sätt att visa "tooltips" när man för musen över en synlig bild! Vill man ha en sådan effekt på en synlig bild ska attributet "title" användas, utöver "alt" attributet.

8: Korrigera "överlappande" element
"Överlappande" element är till exempel: <b><i>text</b></i>. Detta är inte godkänd HTML även om det ofta "fungerar", men i XHTML är det ännu viktigare att elementen öppnas och stängs i rätt ordning. Med rätt ordning avses att det först öppnade ska stängas sist. Då blir till exempel: <b><i>text</i></b> det rätta sättet att ordna elementen.

9: Kontrollera "type" attributet för script och CSS element
Ett "type" attribut i <script> och <style> elementen måste användas när dessa element används. För <style> elementet är den vanligaste användningen:

För <script> elementetet är den vanligaste användningen:

10: Validera koden!
Detta gör man egentligen inte som ett steg i konverteringen, men som en god vana vid all webbkodning bör man alltid validera kodningen när den känns "färdig", för att kunna rätta till eventuella fel. Det gör man även om sidan ser bra ut i den egna webbläsaren, ett litet fel kan innebära att den inte alls ser så bra ut i någon annan webbläsare. Valideringen gör man online med ex.vis validator.w3.org kostnadsfritt och enkelt!

Arnel's Webb