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

Hvis man glemmer doctype, hvis den er forkert eller hvis den er placeret forkert, vil browsere tro at hjemmesiden er en gammel side fra før 1995, som er specielt skrevet til den enkelte browser, og hver browser vil vise siden forskelligt. Her er nogle regler for doctype:

Den korteste variant er <!DOCTYPE html>, og denne anbefales.
Man kan godt bruge mere komplicerede doctypes fra den ældre HTML4-standard, men pas på ikke at bruge en, som af visse browsere genkendes som gammel og som derfor ignoreres. Vælg en doctype med så mange grønne felter i rækken som muligt i denne tabel, hvis du ikke vil bruge <!DOCTYPE html>.
Doctypen skal stå øverst i den side der sendes til browseren. Der må fx ikke være en <?xml ... ?> eller en  før doctypen. Den skal være aller øverst, ellers vil Internet Explorer 8 og ældre 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.

Charset

Hvis man ikke angiver tegnkodning eller angiver den forkert, så browseren ikke kan finde den, vil browseren være nødt til at gætte, og tekst risikeres at vises forkert. I en dansk tekst vil det typisk være tegn som Æ, Ø og Å, man kan have problemer med, hvis man gør dette forkert. Generelt er reglerne for angivelse af tegnkodning:

I mit eksempel bruger jeg tegnkodningen UTF-8. Man skal enten vælge UTF-8 eller ISO-8859-1.
Tegnkodningen i <meta charset=...> skal matche den tegnkodning man bruger i sin hjemmeside-editor. Konsulter din editors indstillingsdialog eller tilhørende dokumentation for at se dette.
Man kan også skrive <meta charset="..." /> i stedet, hvis man vil have en syntaks der både er gyldig HTML og XML (men det gør stadig ikke din side til XHTML).
Eksemplet viser den korteste form <meta charset=UTF-8>. Man kan også bruge den længere form <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">, som validerer med den ældre HTML4-standard.
<meta charset> skal stå blandt de første elementer i <head>-sektionen. Kun andre <meta http-equiv> må stå før. Elementer som <title>, <link> og <meta name> skal stå efter <meta charset>, ellers vil den blive ignoreret.
<meta charset> skal være afsluttet inden for de første 512 bytes af HTML-dokumentet, ellers vil de fleste browsere ignorere den.
Content-Type HTTP headeren nævnt øverst på denne side 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.

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. Browserne indførte derfor den korte version så de kunne håndtere <meta http-equiv=Content-Type content=text/html; charset=...> korrekt (læg mærke til at der her er tre attributter kaldet http-queiv, content og charset i stedet for to).

Hvilken tegnkodning skal jeg vælge? Det er helt op til dig selv. Vælg en tegnkodning, som er understøttet af din editor, og indstil din editor til at bruge den valgte tegnkodning. 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>

Typiske Quirks

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

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.