Att leverera HTML & XHTML

MIME-typer

När en server levererar (dvs sänder) ett dokument till en webbläsare så sänds också en del extra information tillsammans med dokumentet, vilket kallas HTTP huvud.

Det så kallade Content-Type-fältet i HTTP-huvudet beskriver vilket dataformat som används. Denna information uttrycks med hjälp av en MIME media typ. Nedan följer ett exempel på ett HTTP-huvud för en HTML-fil som använder MIME-typen text/html. Lägg märke till att Content-Type-fältet också kan tala om vilken teckenkodning dokumentet är uttryckt i.

För HTML-filer väljs normalt MIME-typen text/html. Då en webbläsare tar emot en fil av denna MIME-typ, så gör den antagandet att uppmärkningen används enligt HTML-syntax, och den kommer att använda en HTML-parser för att tolka vad uppmärkningen i dokumentet betyder.

Till skillnad från HTML är XHTML ett uppmärkningsspråk baserad på XML. Syntaxen för XML skiljer sig något från HTML-syntaxen, och en XML-processor ger felanmärkning om du använder syntaxen på ett ogiltigt sätt. Vid utveckling av XML-baserat innehåll läggs stor vikt på att uppmärkningen är välformad och giltig, och man kan bearbeta innehållet med alla de verktyg, data och automatiserade processer som finns i XML-världen. Många utvecklare föredrar att använda XHTML, eftersom XML:s strikta definition möjliggör ett antal fördelarna vad gäller skapande och uppdatering av dokument, liksom automatiserad behandling av dessa.

För att skicka XHTML-dokument till en webbläsare tillsammans med en MIME-typ som säger att detta är XML, så måste du använda en av följande MIME-typer: application/xhtml+xml, application/xml eller text/xml. W3C rekommenderar att man bara använder den första av dessa MIME-typer då man levererar XHTML som XML – dvs application/xhtml+xml.

När en webbläsare läser XML, så använder den en XML-parser, inte en HTML-parser.

Tyvärr kan Internet Explorer, i versioner upp t.o.m. 8, inte hantera filer som levereras som XML. Men det finns ett flertal andra webbläsare som klarar av detta. För att komma runt problemet att inte alla webbläsare kan stödja XML-baserat innehåll, så levereras många XHTML-filer med MIME-typ text/html. I dessa fall kommer webbläsaren att läsa filen som om det var HTML, och alltså använda en HTML-parser.

Eftersom webbläsaren då behandlar XML som om det vore HTML, så måste man, när man skapar detta innehåll, ta hänsyn till skillnaderna mellan dessa två format, så att skillnaderna mellan XML och HTML inte får webbläsaren att bli lurad. Bland annat handlar det om olika sätt att deklarera teckenkodning eller språkdeklarationer i dokumentet.

Appendix C av specifikationen för XHTML rekommenderar att man följer en liten uppsättning kompatibilitetsriktlinjer då man levererar XHTML som HTML. Dessa riktlinjer är speciellt viktiga för äldre versioner av webbläsare. De rekommenderar t.ex. att man ser till att ha ett blanktecken före tecknen '/>' vid slutet av tomma taggar (såsom img, hr eller br), att man använder både HTML:s attribut lang och XML:s attribut xml:lang, att använder båda attributen id och name i fragmentidentifierare.

'Standards' vs 'Quirks' modes

Dagens populära webbläsare kan visa HTML-dokument antingen i s.k. standards mode eller i s.k. quirks mode. Detta betyder att olika uppsättningar presentationsregler kommer att användas i dessa två olika fall – 'standards mode' gör att filen behandlas enligt W3C:s standarder, och 'quirks mode' gör att den försöker återskapa det avvikande beteende som gamla webbläsare har.

I de senaste versionerna av alla vitt spridda webbläsare aktiveras 'standards mode' då det mottagna dokumentet har en DOCTYPE-deklaration. Om det inte finns en DOCTYPE-deklaration så kan ett och samma dokument visas upp på olika sätt i olika webbläsare.

Skärmdumparna nedan illustrerar några av skillnaderna.

De två bilderna visar två sidor med exakt samma uppmärkning och CSS-formattering, med ett undantag. Den enda skillnaden i källformatet för dessa två filer är att den till vänster inleds med en DOCTYPE-deklaration, medan den andra inte gör det. En fil med en lämplig DOCTYPE-deklaration skall i normala fall visas i 'standards mode' i moderna versioner av de flesta webbläsare. Om DOCTYPE saknas, så används 'quirks mode'.

De visuella skillnaderna illustrerade ovan beror på följande skillnader i implementering i webbläsare som Internet Explorer:

• I 'standards mode' kommer inte CSS-värden för bredd av en 'div' att absorbera värden för bredd av 'padding' och 'border', medan i 'quirks mode' så sker detta – vilket orsakar att den större lådan är bredare i den vänstra ('standards mode') bilden.

• I 'quirks mode' har inte tabellen ärvt värden för typsnittstorlek från 'body'-elementet, så texten ser större ut.

Den ursprungliga avsikten med DOCTYPE är att ange definitionen av det använda uppmärkningsspråket. Följande visar källtexten med DOCTYPE-deklarationen högst upp (betonad som röd kursiv text).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>XHTML document</title> 
    <style type="text/css">
    body { background: white; color: black; font-family: arial, sans-serif; font-size: 12px; }
    p { font-size: 100%; }
    h1 { font-size: 16px; }
    div { margin: 20px; width: 170px; padding: 50px; border: 6px solid teal; }
    table { border: 1px solid teal; }
    </style> 
    </head> 

<body> 
    <h1>Test file for Standards/Quirks</h1> 
    <div>
        A div with CSS width:170px, margin:20px, padding:50px and border:6px.
        </div> 
    <p>Text in a p element.</p>
    <table> 
        <tr><td>Text in a table.</td></tr> 
        </table>
    </body> 
</html> 
	

Webbläsare som behandlar dokument på olika sätt enligt ovan, kallas ofta DOCTYPE-bytande.

Rent allmänt är det en bra ide att alltid leverera dina sidor i 'standards mode' – dvs ange alltid en DOCTYPE-dellaration.

Mer att läsa

• XHTML Media Types

• XHTML™ 1.0 The Extensible HyperText Markup Language, C. HTML Compatibility Guidelines

• List of valid DTDs you can use in your document

• Doctype switching in Internet Explorer

• Cascading Style Sheet Compatibility in Internet Explorer 7

• Doctype switching in Mozilla

• Doctype switching in Opera

• Tutorial – Handling character encodings in HTML and CSS