XHTML

Info 
Door: Cepheus Moeilijkheidsgraad: 3/3
Views:29.933Reacties: 16(Bekijken)
  Log in om zelf te reageren
 Waardering:8.6/10 (5 stemmen)



Het is de nieuwste rage in de webdesignwereld: XHTML. In deze tutorial leer je werken met deze opmaaktaal en wordt er vooral ingegaan op de verschillen met HTML.

Wat is XHTML?

XHTML is een herformulatie van HTML 4.01 in XML. Het moet dus voldoen aan de richtlijnen van XML documenten die zijn vastgesteld door het W3C. XHTML documenten worden dus ook verwerkt door een XML parser, in tegenstelling tot HTML dat door een SGML parser wordt verwerkt.

- XHTML 1.0: The Extensible HyperText Markup Language
- XHTML 1.1 - Module-based XHTML

De opbouw van een XHTML document

De minimale opbouw van een XHTML document is als volgt:

#Code
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Een correcte XHTML 1.1 pagina</title>
  </head>
  <body>
    <p>Paragraaf</p>
  </body>
</html>


Als eerst is er dus de verplichte DTD (Document Type Declaration) waarmee wordt aangegeven wat voor een soort bestand het is.
Vervolgens het html element, het html element moet altijd het eerste element in de pagina zijn en moet verplicht het XML namespace attribuut hebben. Veel mensen vergeten dit attribuut omdat de W3C validator er geen melding van geeft, het weglaten ervan is echter wel fout. In het head element is het title element verplicht.

Als je een andere karakter codering gebruikt dan UTF-8 of UTF-16 moet je een XML declaratie bovenaan het bestand toevoegen. Volgens Architecture of the World Wide Web, Volume One: Media Types for XML mag je de karakter codering niet specificeren in de HTTP headers:

Quote:

In general, a representation provider SHOULD NOT specify the character encoding for XML data in protocol headers since the data is self-describing.



De XHTML 1.0 specificaties zeggen echter:

Quote:

In order to portably present documents with specific character encodings, the best approach is to ensure that the web server provides the correct headers.



De W3C specificaties spreken elkaar dus een beetje tegen, maar het is toch beter om hem wel te gebruiken, volgens het W3C: XHTML document authors are strongly encouraged to use XML declarations in all their documents.

De goede XML declaratie voor de meeste gevallen is:
#Code
1
<?xml version="1.0" encoding="iso-8859-1"?>

Een probleem waar je rekening mee moet houden bij het gebruiken van een XML declaratie; Internet Explorer gaat in de zogenaamde quirks mode en zal zich minder aan de standaarden houden omdat hij op de eerste regel van het document geen DTD vindt. Voor sommige pagina's maakt dat weinig uit maar voor andere kan quirks mode een groot verschil maken.
Een ander klein probleempje is dat de <? van de XML declaratie door PHP wordt gezien als een start tag, hij zal dus proberen je XML declaratie als PHP te gaan parsen, dit is als volgt op te lossen:

#Code
1
<?php print '<?xml version="1.0" encoding="iso-8859-1"?>'; ?>


Correcte formulatie

Omdat XHTML op XML gebaseerd is moet het ook aan de richtlijnen van XML voldoen, deze zijn een stuk strikter dan die van HTML dat gebaseerd is op SGML. Hieronder zijn de dingen opgesomd die in HTML wel mochten maar in XHTML niet meer:

    Zorg dat al je tags en attributen klein geschreven zijn, in tegenstelling tot HTML is XHTML [b]hoofdlettergevoelig[/b]: [code][color=#f00]<P TitLe="Een paragraaf">Paragraaf</p>[/color][/code] [code][color=#0a0]<p title="Een paragraaf">Paragraaf</p>[/color][/code]

    Elementen moeten altijd goed genest worden volgens de XML richtlijnen: [code][color=#f00]<b><i>Tekst</b></i>[/color][/code] [code][color=#0a0]<b><i>Tekst</i></b>[/color][/code]

    Alle tags moeten weer worden afgesloten, ook als ze leeg zijn zoals <br /> [code][color=#f00]<p>Paragraaf<br> Nieuwe regel <p>Nog een paragraaf[/color][/code] [code][color=#0a0]<p>Paragraaf<br /> Nieuwe regel</p> <p>Nog een paragraaf</p>[/color][/code] [i]Lege elementen zoals <br /> mogen in theorie ook als <br></br> geschreven worden, in de praktijk renderen sommige browsers dit als twee nieuwe regels.[/i]

    Attribuutwaarden moeten tussen aanhalingstekens staan: [code][color=#f00]<span color=red>Rode tekst</span>[/color][/code] [code][color=#0a0]<span color="red">Rode tekst</span>[/color][/code]

    Attributen mogen niet meer geminimaliseerd worden: [code][color=#f00]<input checked />[/color][/code] [code][color=#0a0]<input checked="checked" />[/color][/code]


- XHTML 1.0: Differences with HTML 4

Commentaar

Een oud truukje om scripts en CSS voor oudere browsers te verbergen is om deze tussen zogenaamde SGML comments te zetten: (<!-- comment -->):

#Code
1
2
3
4
5
6
7
8
<style type="text/css">
<!--
body {
background-color: #f00;
color: #00f;
}
-->
</style>


In een goede XML browser echter wordt alles wat tussen SGML comments staat volledig genegeerd, dus wordt het afgeraden om deze techniek te gebruiken in XHTML documenten. Deze techniek is al heel oud en eigenlijk ook redelijk nutteloos, het aantal mensen dat nog met browsers surft die geen CSS ondersteunen is zeer klein.

PCDATA & CDATA

Scripts en stylesheets worden door een XML parser gewoon gezien als zogenaamde PCDATA, wat staat voor Parsed Character Data. Een XML browser zal je javascript en CSS dus proberen te parsen als XHTML wat natuurlijk fout gaat, vooral als je "&", "<", "]]>" of "--" gebruikt in je script of CSS.
De oplossing hiervoor is om van je scripts en CSS zogenaamde CDATA blokken te maken, wat staat voor Character Data en dus niet geparsed zal worden, dit doe je als volgt:

#Code
1
2
3
4
5
6
7
<style type="text/css">
<![CDATA[
body > p {
color: #f00;
}
]]>
</script>


Als je deze correcte XHTML voorschoteld aan een SGML browser dan gaat het fout, hij zal je scripts en CSS niet meer willen parsen, om dit op te lossen kan je het volgende doen:

#Code
1
2
3
4
5
6
7
<style type="text/css">
/* <![CDATA[ */
body > p {
color: #f00;
}
/* ]]> */
</script>


Of voor javascript:

#Code
1
2
3
4
5
<script type="text/javascript">
// <![CDATA[
...
// ]]>
</script>


Je zet de CDATA tags dus tussen of achter comments zodat ze genegeerd worden in HTML 4. Als je website ook moet werken in browsers die niet eens HTML 4 ondersteuning bieden moet je het nog iets ingewikkelder maken:

#Code
1
2
3
4
5
6
7
<style type="text/css">
<!--/*--><![CDATA[/*><!--*/
body > p {
color: #f00;
}
/*]]>*/-->
</script>


Of voor javascript:

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

Voor de meeste mensen is dit overbodig, maar als je perc� ook hele oude browsers wilt ondersteunen kan je het gebruiken.

- Sending XHTML as text/html Considered Harmful Kijk bij specific problems voor meer over CDATA

CSS & XHTML

CSS wordt in XHTML net iets anders gebruikt als in HTML. Een paar punten waar je op moet letten:

Hoofdlettergevoelig

CSS is in XHTML hoofdlettergevoelig, dat betekend dus dat...

#Code
1
div#Inhoud

Iets anders is dan...
#Code
1
div#inhoud


Body element

Het body element wordt iets anders weergeven, hij neemt namelijk niet de gehele viewport in beslag. Dit wordt vooral duidelijk als je een achtergrond kleur of plaatje aan de body geeft.

CSS toewijzen

In XHTML moet je een XML operator gebruiken om CSS toe te wijzen aan een XHTML bestand, voor externe CSS bestanden gebruik je de volgende code:

#Code
1
<?xml-stylesheet href="screen.css" type="text/css"?>


De code plaats je onder de XML declaratie en net boven de DTD.
Je kan ook een style element gebruiken om CSS op te geven, deze zul je als volgt moeten opgeven:

#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet href="screen.css" type="text/css"?>
<?xml-stylesheet href="#css" type="text/css"?>
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>An internal stylesheet example</title>
<style type="text/css" id="css">
  code {
    color: green;
    font-family: monospace;
    font-weight: bold;
  }
</style>
</head>
<body>
<p>
  This is text that uses our 
  <code>internal stylesheet</code>.
</p>
</body>
</html>


Je verwijst dus in de XML operator naar de ID van je style element.

Internet Explorer problemen

Internet Explorer geeft een paar vervelende bugs als je met een XML operator naar een externe stylesheet wil linken. Firefox pakt de externe style-sheet alleen maar als de XHTML met het goede MIME-type verzonden wordt (zie verderop voor meer info). Om toch correcte XML te gebruiken maar Internet Explorers bug te omzeilen kan je het volgende doen:

#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet href="#css" type="text/css"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>An internal stylesheet example</title>
<style type="text/css" id="css">
@import url(screen.css);
</style>
</head>
<body>
<p>
This is text.
</p>
</body>
</html>


Je gebruikt dus de XML operator om naar de ID van het style element te verwijzen om in het style element vervolgens met de import rule je externe CSS te laden.

- CSS body Element Test
- XHTML 1.0: Referencing Style Elements when serving as XML

Speciale karakters

In theorie ondersteund XHTML maar 5 zogenaamde "karakter entiteitsreferenties". Namelijk &lt;, &gt;, &amp;, &quot;, en &apos;. Andere karakters zoals &nbsp; moeten gecodeerd worden met numerieke karakter referenties, voor &nbsp; is dat dus &#160;. Deze referenties zijn alleen nodig als je geen UTF-8 of UTF-16 gebruikt als karakter codering.
Sommige browsers ondersteunen meer karakter entiteitsreferenties voor XHTML, maar als je deze gebruikt heb je kans dat andere browsers ze helemaal niet of fout laten zien.

- Character entity references for ISO 8859-1 characters

Javascript

Bij javascripts moet je opletten dat het XHTML DOM (Document Object Model) de namen van elementen anders teruggeeft. HTML is hoofdletterongevoelig en geeft alle namen in hoofdletters terug, XHTML zal alle namen hoofdlettergevoelig geven zoals ze in het document staan.

Een andere verandering is dat document.write() niet meer werkt, in XHTML documenten zul je de document.createElementNS() functie moeten gebruiken om dynamisch elementen toe te voegen.

- Document Object Model: XHTML and the HTML DOM
- Why document.write() doesn't work in XML
- This year's Document Object Model

MIME-type

Bij MIME-types ligt het grootste probleem van XHTML. Om dit te snappen zul je eerst wat moeten weten over MIME-types.

MIME staat voor Multipurpose Internet Mail Extensions, zoals de naam al suggereert zijn ze oorspronkelijk gebruikt bij e-mail. Met MIME types kan je aangeven wat voor een soort bestand iets is, in een e-mail heeft het bericht bijvoorbeeld het MIME type text/plain, waarmee wordt aangegeven dat het bericht gewoon tekst is. Maar een PNG plaatje heeft het MIME type image/png, hierdoor weet een computer wat hij met een bepaald bestand van het internet moet doen. MIME types worden tegenwoordig niet alleen gebruikt voor e-mail, maar bijna alle bestanden op het internet hebben een MIME type. Een paar bekende mime types zijn:

#Code
1
2
3
4
text/css              - CSS
text/html             - HTML bestanden
application/xhtml+xml - XHTML bestanden
text/javascript*      - Javascript

* text/javascript bestaat officieel niet, de standaard is application/x-javascript, helaas ondersteund IE deze niet

Het grote probleem van XHTML is dat de meeste servers XHTML bestanden met een .html of .htm extensie verzenden als text/html. De browser ontvangt het bestand dan en neemt aan de hand van het MIME type aan dat het oom een HTML bestand gaat. Vervolgens wordt het XHTML bestand dus verwerkt door een SGML parser die bedoelt is voor HTML. Op dit moment wordt ongeveer 99% van de websites die XHTML gebruiken dus verwerkt als HTML, hierdoor gaan enkele voordelen van XHTML zoals de striktheid verloren, een XML parser zou namelijk een error geven als het bestand niet valide XHTML is, een SGML parser doet dit niet.
De meeste dingen in deze tutorial als CDATA, CSS en het body element en scripts in commentaar zullen dan ook alleen maar van toepassing zijn als een XHTML bestand ook echt als XML wordt behandelt.
Het komt erop neer dat XHTML dus eigenlijk door alle browsers als HTML wordt verwerkt, en dat is niet wat we willen. Dit is als volgt op te lossen:

Het goede MIME-type toekennen

We moeten zorgen dat XHTML bestanden ook echt als XHTML verzonden worden, dus met het MIME type application/xhtml+xml.

Apache

Als je toegang hebt tot de configuratie of .htaccess van Apache kan je daar de volgende regels toevoegen:

#Code
1
2
AddType application/xhtml+xml .xht
AddType application/xhtml+xml .xhtml


Hiermee worden alle bestanden met de extensie .xht of .xhtml verzonden met het goede MIME type, je kan natuurlijk ook alles .htm en .html bestanden als XHTML bestanden verzenden.

PHP

Als je geen toegang hebt tot de server configuratie kan je ook het goede MIME type met PHP defini�ren:

#Code
1
2
3
4
<?php
header('Vary: Accept');
header("Content-Type: application/xhtml+xml");
?>


Content negotiation

Als je XHTML documenten eindelijk met het goede MIME type worden verstuurd zul je tot de ontdekking komen dat als Internet Explorer je pagina probeert te bezoek hij een Opslaan als... dialoog zal geven. Dit gebeurt omdat Internet Explorer niet om kan gaan met het MIME type application/xhtml+xml. Om dit probleem op te lossen hebben we content negotiation met behulp van PHP, content negotiation vraagt aan de browser welk MIME type hij wil en geeft hem afhankelijk van het antwoord een XHTML of HTML document.

Het volgende script komt van The Autistic Cuckoo

#Code
1
2
3
4
5
6
7
8
9
10
1. $xhtml = false;
 2. if (preg_match('/application/xhtml+xml(;q=(d+.d+))?/i', $_SERVER['HTTP_ACCEPT'], $matches)) {
 3.   $xhtmlQ = isset($matches[2]) ? $matches[2] : 1;
 4.   if (preg_match('/text/html(;q=(d+.d+))?/i', $_SERVER['HTTP_ACCEPT'], $matches)) {
 5.     $htmlQ = isset($matches[2]) ? $matches[2] : 1;
 6.     $xhtml = ($xhtmlQ >= $htmlQ);
 7.   } else {
 8.     $xhtml = true;
 9.   }
10.}


De browser verstuurt naar de server HTTP headers waarin hij verteld welke MIME types hij ondersteund en welke hij het liefste heeft. In dit stukje script wordt deze informatie uit de HTTP headers gehaald en aan de hand daarvan besloten of er XHTML of HTML verstuurd gaat worden.

#Code
1
2
3
4
5
11. function xml2html($buffer) {
12.   $xml = array('/>', 'xml:lang=');
13.   $html = array('>', 'lang=');
14.   return str_replace($xml, $html, $buffer);
15. }


Deze functie verandert de verkorte sluitingstag van XHTML naar HTML en verandert ook het xml:lang attribuut naar zijn HTML equivalent.

#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
16. if ($xhtml) {
17.   header('Content-Type: application/xhtml+xml');
18.   header('Vary: Accept');
19.   echo '
<?xml version="1.0" encoding="utf-8"?>', "n";
20.   echo '
<?xml-stylesheet type="text/css" href="/css/screen.css" media="screen"?>', "n";
21.   echo '
<?xml-stylesheet type="text/css" href="/css/print.css" media="print"?>', "n";
22.   echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">', "n";
23.   echo '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">', "n";
24. }
25. else {
26.   header('Content-Type: text/html');
27.   header('Vary: Accept');
28.   ob_start('xml2html');
29.   echo '<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">', "n";
30.   echo '<html lang="en">', "n";
31. }


Als er besloten is XHTML te verzenden wordt het goede MIME type gestuurd, de XML declaratie en operators en de goede DTD.
Als er HTML verzonden gaat worden wordt het goede MIME type gestuurd, worden alle values uit de array $xml vervangen door de tegenhangers uit de $html array en wordt er een goede HTML DTD verzonden.

Eindresultaat

Een goede XHTML 1.1 pagina, die met behulp van content negotiation naar niet compatibele browsers verzonden wordt, zou er als volgt uit kunnen zien:

#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?php
$xhtml = false;
if (preg_match('/application/xhtml+xml(;q=(d+.d+))?/i', $_SERVER['HTTP_ACCEPT'], $matches)) {
  
$xhtmlQ = isset($matches[2]) ? $matches[2] : 1;
  
if (preg_match('/text/html(;q=(d+.d+))?/i', $_SERVER['HTTP_ACCEPT'], $matches)) {
    
$htmlQ = isset($matches[2]) ? $matches[2] : 1;
    
$xhtml = ($xhtmlQ >= $htmlQ);
  
} else {
    
$xhtml = true;
  
}
}
function xml2html($buffer) {
  
$xml = array('/>', 'xml:lang=');
  
$html = array('>', 'lang=');
  
return str_replace($xml, $html, $buffer);
}
if ($xhtml) {
  
header('Content-Type: application/xhtml+xml');
  
header('Vary: Accept');
  
echo '<?xml version="1.0" encoding="iso-8859-1"?>', "n";
  
echo '<?xml-stylesheet type="text/css" href="#cssScreen" media="screen"?>', "n";
  
echo '<?xml-stylesheet type="text/css" href="/css/print.css" media="print"?>', "n";
  
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">', "n";
  
echo '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">', "n";
}
else {
  
header('Content-Type: text/html; charset=iso-8859-1');
  
header('Vary: Accept');
  
ob_start('xml2html');
  
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">', "n";
  
echo '<html lang="nl">', "n";
}
?>
<head>
  <title>Een correcte XHTML pagina</title>
  
<?php if(!$xhtml) { echo '<link rel="stylesheet" type="text/css" href="/css/print.css" media="print">', "n"; } ?>
  <style type="text/css" id="#cssScreen">
  /* <![CDATA[ */
  body > p {
    color: #f00;
  }
  /* ]]> /*
  </style>
</head>
<body>
  <p>Tekst</p>
</body>
</html>


- Content Negotiation @ The Autistic Cuckoo
- Serving up XHTML with the correct MIME type

16 reacties
h4k3r9 Geplaatst op 26-12-2008 om 14:34
 

Regular
wat kan je met xhtml meer dan gewoon html?
chieltjuuhh Geplaatst op 09-06-2008 om 14:50
 

Regular
Hallo,

ik ben ook bezig met een website maken in dreamweaver.
Ik heb pagina 1 gemaakt en nu wil ik dus alle pagina's het zelfde. maar nu heb ik als ik naar contact ga de zelfde informatie als bij home, dus overal staat de zelfde informatie en als ik het bij de ene aan pas is doettie dat bij allemaal.. hoe kan da en kan ik dat weer veranderen??

tnx
chieltjuuhh Geplaatst op 09-06-2008 om 14:41
 

Regular
Hallo,

ik ben ook bezig met een website maken in dreamweaver.
Ik heb pagina 1 gemaakt en nu wil ik dus alle pagina's het zelfde. maar nu heb ik als ik naar contact ga de zelfde informatie als bij home, dus overal staat de zelfde informatie en als ik het bij de ene aan pas is doettie dat bij allemaal.. hoe kan da en kan ik dat weer veranderen??

tnx
dragmen Geplaatst op 31-07-2007 om 21:56
 

Regular
Heb mij net als nieuweling geregistreerd en eigenlijk gelijk deze Tutorial gelezen.
Vindt deze er goed uit zien.
Komt zeker regelmatig hier terug.
Onbekend lid Geplaatst op 14-03-2006 om 21:01
 

Spammer

Pagina 1 2 3 4 

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be, uw Hosting Solution Builder