Vis XHTML-information

Få din hjemmeside til at se ens ud i alle browsere

Det er ikke altid lige nemt at få sin hjemmeside til at se ens ud i alle browsere. Første skridt er dog altid at angive korrekt doctype og tegnkodning.

HTML kan læses på to måder. Enten som HTML eller som XML. Den valgte metode har stor indflydelse på hvordan man skal gøre.

Hvilken af de to varianter der bruges afhænger den HTTP Header der kaldes Content-Type, og som sendes med din side.

Hvis du har Content-Type: text/html, så bruges HTML (også kaldet Tag Soup)
Hvis du har Content-Type: application/xhtml+xml, så bruges XML (også kaldet XHTML)
Hvis du har en anden eller ingen Content-Type, så er det en fejl, som er vigtig at rette

Værktøjshjælp: Her er en liste over hvordan du kan se Content-Type headeren i forskellige browsere:

I Internet Explorer har jeg ikke fundet nogen nem måde at se den på.
I Firefox kan den ses med Live HTTP Headers eller med Firebugs Net-panel. (Hvordan?)
I Google Chrome kan den ses i Udviklerværktøjernes Resources-panel. (Hvordan?)
Safari har jeg ikke prøvet med, men den skulle efter sigende ligne Chrome.
Du kan også bruge min online service Vis HTTP Headers.

Baggrundsinformation: Ældre standarder som HTML 4 og XHTML 1 har beskrevet brug af doctype til at ændre mellem de to serialiserede formater HTML og XML, men det har dog aldrig været anvendt i nogen browsere, og er da også rettet i HTML 5, så det kun er Content-Type HTTP headeren der bestemmer dette. Hvis du tror du skriver XHTML bare fordi du har en XHTML-doctype, så tager du fejl. Det er browserne der bestemmer i sidste ende. validator.w3.org vejleder kun.

HTML (Content-Type: text/html)

HTML, også kendt under navnet "Tag Soup", er den normale måde at gemme og læse HTML-dokumenter på, og vil man understøtte Internet Explorer 8 og ældre er det denne variant man skal vælge.

Når man skriver HTML er der to vigtige ting at huske, som er markeret med fed i nedenstående eksempel.

<!DOCTYPE html>
<html>
  <head>
    <meta charset=UTF-8>
    <title>Hello World!</title>
  </head>
  <body>
  </body>
</html>

Doctype

Uden korrekt doctype vil browsere tro at hjemmesiden er fra før 1995, som er specielt skrevet til den enkelte browser, og hver browser vil vise siden forskelligt.

Regler for doctype:

Korteste og anbefalede variant er <!DOCTYPE html>.
Vil du absolut bruge en mere kompliceret doctype fra den ældre HTML4-standard, så undgå en doctype der genkendes som gammel og derfor ignoreres. Vælg en med flest grønne felter i denne tabel.
Doctypen skal stå øverst på siden. Der må fx ikke være en <?xml ... ?> eller en  før doctypen, da Internet Explorer 9 og ældre så vil ignorere den.

Baggrundsinformation: I 1990'erne var der hår kamp mellem Internet Explorer og Netscape. De to fortolkede websider meget forskelligt, så det var ikke unormalt at lave sin hjemmeside i to kopier - en til hver browser. Da man senere lavede den fælles HTML-standard i W3C i 1994-97, var det nødvendigt at kende forskel på gamle sider lavet specifikt til enten Internet Explorer 5 eller Netscape 4 (kaldet Quirks Mode), og på sider lavet efter den fælles standard (kaldet Standards Mode), så de alle kunne vises korrekt. Doctypen blev brugt til dette formål.

I Internet Explorer Quirks Mode inkluderer CSS width og height padding og border, mens disse ikke er inkluderet i Standards Mode

Typiske Quirks

Hvis tilføjelsen af en doctype fik din hjemmeside til at se forkert ud, er det typisk fordi Internet Explorer fortolker CSS width og height forkert, hvis der ikke er angivet en korrekt doctype. Er størrelser eller afstande forkerte på din hjemmeside, så gennemgå alle width og height og ret dem hvor det er nødvendigt. Følgende figur illustrerer betydningen af width og height.

Hvis al din CSS forsvinder ved tilføjelsen af en doctype er det typisk fordi du med dine CSS style sheets sender HTTP headeren Content-Type: text/html. Så vil browseren ignorere dem. De skal i stedet have HTTP headeren Content-Type: text/css. Du kan se hvordan du finder ud af hvilken HTTP header du bruger øverst på denne side under XHTML-information.

Charset

En hjemmeside skal angive hvilken tegnkodning den er lavet med, ellers må browseren gætte og den kan af og til gætte forkert. I en dansk tekst vil et forkert gæt typisk betyde at Æ, Ø og Å vises forkert.

Regler for tegnkodning:

I mit eksempel bruger jeg tegnkodningen UTF-8. Vælg enten UTF-8 eller ISO-8859-1.
Tegnkodningen i <meta charset=...> skal matche tegnkodnings-indstillingen i din hjemmeside-editor. Tjek din editors indstillingsdialog eller tilhørende dokumentation. Nogle editorer kalder ISO-8859-1 for ANSI eller Latin1.
…skal matche…
Eksemplet viser den korteste form <meta charset=UTF-8>. Andre tilladte varianter:
- <meta charset="UTF-8" /> er både gyldig HTML og XML.
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> validerer med den ældre HTML4-standard.
<meta charset=...> skal stå før alle andre elementer i <head>-sektionen (altså før <title>), og skal afsluttets inden for de første 512 bytes af HTML-dokumentet, ellers vil de fleste browsere ignorere den.
Content-Type HTTP headeren kan også indeholde information om tegnkodningen, og det er nok at informationen står et af de to steder. Jeg vil dog fraråde at placere tegnkodningsinformationen i HTTP headeren. Står samme information to steder risikerer man at skrive noget forskelligt hvert sted, og hvis tegnkodningen kun står i headeren, mistes den hvis siden fx gemmes lokalt til senere brug.
Hvis din hjemmeside bruger en database, skal forbindelsen til databasen have samme tegnkodning som <meta charset=...>. Med PHP og MySQL gøres det fx med mysqli::set_charset eller en SET NAMES query i PDO. I MySQL hedder tegnkodningerne henholdsvis utf8 og latin1.

Baggrundsinformation: Den korte version <meta charset=...> blev først dokumenteret i HTML5, men har altid været understøttet af browserne, fordi webudviklere ofte glemte citationstegn omkring attributter med mellemrum, så der kom tre attributter i stedet for to. Browserne indførte derfor den korte version så de kunne håndtere begge varianter:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta http-equiv=Content-Type content=text/html; charset=UTF-8>

Hvilken tegnkodning skal jeg vælge? Det er helt op til dig selv. Vælg en, som er understøttet af din editor, og indstil din editor til at bruge den. Med ISO-8859-1 er det kun muligt at lave hjemmesider på dansk eller andre vestlige sprog, og der er kun mulighed for at bruge få avancerede tegn. Med UTF-8 kan du derimod bruge stort set alle tegn fra næsten alle sprog. Det er dog ikke alle hjemmesideeditorer, der understøtter UTF-8. Tegnkodning vælges typisk i din editors indstillinger eller "Gem som"-dialogboks.

Pas på BOM! Mange teksteditorer indsætter et såkaldt BOM i begyndelsen filer i UTF-8. Hvis du fx bruger includes i PHP, ASP.NET eller andre server-side-sprog, vil disse BOMs pludselig optræde midt i dit HTML-dokument og skabe problemer. Hvis din editor giver dig valget, så vælg ikke at inkludere BOMs, ellers overvej at bruge ISO-8859-1 i stedet.

XML (Content-Type: application/xhtml+xml)

XML, også kendt som XHTML, kan alternativt bruges, men så vil Internet Explorer 8 og ældre ikke kunne vise siden, men vil i stedet bare vise en download-dialogboks. Hvis du bruger XML er doctype og tegnkodning meget nemmere. XHTML fandtes slet ikke i 1995, så alene at du bruger det er nok til at overbevise enhver browser om, at din hjemmeside ikke er fra den gang. Det er for XML også klart defineret at der bruges UTF-8, hvis ingen tegnkodning er angivet. Der er altså ingen risiko for at browseren vælger noget uforudset. Bruger du en anden tegnkodning kan den angives med en deklaration lignende <?xml version="1.0" encoding="UTF-8"?>. I XML kan man ikke bruge <meta charset...>. Du skal huske at angive XHTML namespacet som vist i eksemplet nedenfor, men du vil hurtigt opdage det, hvis du glemmer det.

Husk at dette kun gælder hvis du har en Content-Type: application/xhtml+xml HTTP header. Et <meta>-tag med en lignende information eller en XHTML doctype har ingen virkning i praksis og kan ikke bruges til at aktivere fortolkning med XML-syntaks i browsere. En hurtig test er at lave en syntaksfejl i dit dokument med vilje. Så skal browserne fejle komplet i at vise din side. Vises din side, selv delvist, så er det fordi du ikke har aktiveret brug af XML-syntaks!

Eksempel på et HTML-dokument overført med XML-syntaks:

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Hello World!</title>
  </head>
  <body>
  </body>
</html>