Tutorials
XHTML 1.0
Eigenlijk moet je website tegenwoordig wel XHTML valid zijn. En omdat ik toch vaak een wirwar van hoofdletters, kleine letters, daar wel, daar geen quotes, geen doctype boven de pagina, enz, tegenkom, leek het me verstandig een tutorial te schrijven.
Pagina 1
Inleiding
XHTML 1.0 is de eerste nieuwe versie van HTML na HTML 4.01. Waar de afkorting van HTML staat voor HyperText Markup Language, is XHTML verrijkt met het eerste woord eXtensible. Deze 'opmaaktaal' is bedoeld om webpagina's mee op te bouwen. XHTML kun je zien als een strengere, schonere versie van HTML.
In deze tutorial zal ik eerst het een en ander uitleggen, daarna het verkeerd voordoen en verbeteren, een lijstje met deprecated elementen en attributen laten zien, en wat verduidelijken over de W3c validator.
Veel leesplezier :)
In deze tutorial zal ik eerst het een en ander uitleggen, daarna het verkeerd voordoen en verbeteren, een lijstje met deprecated elementen en attributen laten zien, en wat verduidelijken over de W3c validator.
Veel leesplezier :)
Pagina 2
Voordelen
Er zijn verschillende voordelen t.o.v. HTML.
- XHTML is strenger dan HTML. Je mag dingen maar op 1 manier doen. Dit kun je als een nadeel ervaren, maar hier tegenover staat dat alles ordelijk is, en je minder kans hebt fouten te maken.
- Een tweede voordeel van XHTML is, dat het compatible is met de meest uiteenlopende apparaten. Je website zal zich hetzelfde gedragen op een desktop als op een PDA.
- Je site gedraagt zich over het algemeen hetzelfde in nieuwere browsers.
- XHTML is strenger dan HTML. Je mag dingen maar op 1 manier doen. Dit kun je als een nadeel ervaren, maar hier tegenover staat dat alles ordelijk is, en je minder kans hebt fouten te maken.
- Een tweede voordeel van XHTML is, dat het compatible is met de meest uiteenlopende apparaten. Je website zal zich hetzelfde gedragen op een desktop als op een PDA.
- Je site gedraagt zich over het algemeen hetzelfde in nieuwere browsers.
Pagina 3
Doctypes
Er zijn net als bij HTML verschillende 'smaken' XHTML. Waar deze doctypes in HTML nog niet verplicht waren, zijn ze dat in XHTML wel. Een doctype geeft informatie over hoe de browser de pagina moet verwerken. De declaratie moet altijd helemaal bovenaan het document staan. Er zijn 3 verschillende doctypes:
- Transitional
Dit is de 'standaard' versie van XHTML. De regels zijn iets soepeler t.o.v. strict, en er mogen meer elementen en attributen gebruikt worden.
De doctype declaratie boven het document ziet er als volgt uit:
- Strict
Strict is de strengere versie van XHTML. Er zijn meer elementen en attributen deprecated (niet meer ondersteund). De doctype boven het document ziet er zo uit:
- Frameset
De frameset versie, de naam zegt het eigenlijk al, is speciaal voor een website met frames. Het heeft dezelfde toegestane elementen en attributen als transitional. Dat doctype moet zo boven aan je pagina staan:
- Transitional
Dit is de 'standaard' versie van XHTML. De regels zijn iets soepeler t.o.v. strict, en er mogen meer elementen en attributen gebruikt worden.
De doctype declaratie boven het document ziet er als volgt uit:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">- Strict
Strict is de strengere versie van XHTML. Er zijn meer elementen en attributen deprecated (niet meer ondersteund). De doctype boven het document ziet er zo uit:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">- Frameset
De frameset versie, de naam zegt het eigenlijk al, is speciaal voor een website met frames. Het heeft dezelfde toegestane elementen en attributen als transitional. Dat doctype moet zo boven aan je pagina staan:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">Pagina 4
Nieuwe regels - Hoofdletters, en tags afsluiten
In XHTML zijn er verschillende nieuwe regels. Zo mag je sommige elementen niet meer gebruiken, of moet je ze anders afsluiten.
- Geen hoofdletters
Dit is een van de belangrijkste nieuwe regels in XHTML. De tags en attributen mogen niet meer met hoofdletters worden geschreven.
Zo is het niet goed:
A en HREF staan beide in hoofdletters, dat moeten kleine letters zijn, en index.php staat niet binnen quotes. Hoe het wel moet is dus zo:
Een ander voorbeeld is deze:
En weer, alle tags en attributen moeten in kleine letters staan, en het kan al helemaal niet half/half zoals methOD en typE. Verder moet de waarde van het attribuut method ook altijd in kleine letters worden geschreven. Dat is een uitzondering. Ook iets bijzonders is, dat je voortaan elke tag moet afsluiten. Bij iets als <a></a> is dat makkelijk, maar hoe werkt dat bijvoorbeeld bij <br>? Bij tags die normaliter geen afsluiting hoeven moet er aan het einde ‘ /’ toegevoegd worden. <br> wordt dus <br />, <input> wordt <input />, enzovoort. Verder moeten net als in het vorige voorbeeld de variabelen binnen quotes staan. Dit is de XHTML versie van de verkeerde voorbeeld:
Samengevat:
- Alle tags en attributen moeten in kleine letters geschreven worden, de waardes mogen ook in hoofdletters
- Elke tag moet worden afgesloten. Of met een aparte afsluittag, of met een alsluitslash achteraan.
- Geen hoofdletters
Dit is een van de belangrijkste nieuwe regels in XHTML. De tags en attributen mogen niet meer met hoofdletters worden geschreven.
Zo is het niet goed:
<A HREF=index.php>Index</a>
A en HREF staan beide in hoofdletters, dat moeten kleine letters zijn, en index.php staat niet binnen quotes. Hoe het wel moet is dus zo:
<a href="index.php">Index</a>
Een ander voorbeeld is deze:
<form action=form.php methOD=POST>
<INPUT typE=text name=verkeerd_input_veld>
</FORM>
En weer, alle tags en attributen moeten in kleine letters staan, en het kan al helemaal niet half/half zoals methOD en typE. Verder moet de waarde van het attribuut method ook altijd in kleine letters worden geschreven. Dat is een uitzondering. Ook iets bijzonders is, dat je voortaan elke tag moet afsluiten. Bij iets als <a></a> is dat makkelijk, maar hoe werkt dat bijvoorbeeld bij <br>? Bij tags die normaliter geen afsluiting hoeven moet er aan het einde ‘ /’ toegevoegd worden. <br> wordt dus <br />, <input> wordt <input />, enzovoort. Verder moeten net als in het vorige voorbeeld de variabelen binnen quotes staan. Dit is de XHTML versie van de verkeerde voorbeeld:
<form action="form.php" method="post">
<input type="text" name="goed_input_veld" />
</form>
Samengevat:
- Alle tags en attributen moeten in kleine letters geschreven worden, de waardes mogen ook in hoofdletters
- Elke tag moet worden afgesloten. Of met een aparte afsluittag, of met een alsluitslash achteraan.
Pagina 5
Nieuwe regels - Deprecated en de juiste opbouw
Deprecated elementen en attributen
In XHTML zijn verschillende elementen deprecated (niet meer ondersteund, niet meer aanbevolen). Hieronder volgt een lijst. Eerst staat het deprecated element, en na de komma de manier hoe het wel moet in XHTML.
Deprecated elementen:
<applet></applet>, <object></object>.
<b></b>, stylesheets, maar je kunt ook <strong></strong> gebruiken.
<basefont />, stylesheets.
<blackface></blackface>, stylesheets.
<blockquote></blockquote>, stylesheets.
<center></center>, stylesheets.
<dir></dir>, <ul></ul>.
<embed />, <object></object>
<font></font>, stylesheets.
<i></i>, stylesheets, je kunt ook <em></em> gebruiken.
<isindex />, <input />.
<layer></layer>, stylesheets.
<menu></menu>, <ul></ul>.
<noembed></noembed>, <object></object>
<s></s>, stylesheets.
<shadow></shadow>, stylesheets.
<strike></strike>, stylesheets.
<u></u>, stylesheets.
Deprecated attributen (aangezien het grootste deel van de XHTML oplossingen stylesheets zijn, zet ik het er alleen de goede oplossing achter wanneer het wat anders is):
alink
align
background
border
color
compact
face
height
language, type
link
noshade
nowrap
size
start
text
version, doctype
vlink
width
Opbouw van een goede XHTML pagina
Je Doctype en de xml starttag. De XML tag kun je beter niet gebruiken omdat sommige browsers dan een zootje maken van je pagina. In plaats daarvan kun je aangeven dat het een X(HT)ML document in een meta tag.
De <html> starttag, let op xmlns, dat is de namespace van de xml (de declaratie van alle tags). Let ook op lang, en xml:lang. xml:lang is nieuw in XHTML, maar om backwards compatible te blijven wordt aanbevolen ook lang er naast te zetten. xml:lang gaat boven lang.
De head, let op de meta-tag. Die moet je niet gebruiken in combinatie met de XHTML start-tag. Je hebt 2 versies, een om het bestand als HTML voor te doen, en een om het als XML + XHTML te laten verwerken. Om backwards compatible te blijven, wordt het gebruik van 'text/html' aangeraden, omdat oudere browsers niet weten wat ze aan moeten met 'application/xhtml+xml'.
De body van je pagina met de inhoud
En we sluiten de html-tag weer af
In XHTML zijn verschillende elementen deprecated (niet meer ondersteund, niet meer aanbevolen). Hieronder volgt een lijst. Eerst staat het deprecated element, en na de komma de manier hoe het wel moet in XHTML.
Deprecated elementen:
<applet></applet>, <object></object>.
<b></b>, stylesheets, maar je kunt ook <strong></strong> gebruiken.
<basefont />, stylesheets.
<blackface></blackface>, stylesheets.
<blockquote></blockquote>, stylesheets.
<center></center>, stylesheets.
<dir></dir>, <ul></ul>.
<embed />, <object></object>
<font></font>, stylesheets.
<i></i>, stylesheets, je kunt ook <em></em> gebruiken.
<isindex />, <input />.
<layer></layer>, stylesheets.
<menu></menu>, <ul></ul>.
<noembed></noembed>, <object></object>
<s></s>, stylesheets.
<shadow></shadow>, stylesheets.
<strike></strike>, stylesheets.
<u></u>, stylesheets.
Deprecated attributen (aangezien het grootste deel van de XHTML oplossingen stylesheets zijn, zet ik het er alleen de goede oplossing achter wanneer het wat anders is):
alink
align
background
border
color
compact
face
height
language, type
link
noshade
nowrap
size
start
text
version, doctype
vlink
width
Jelmer
em -> emphasis -> benadrukken. Voorbeeldje: "a of b, dus niet beide"
strong -> sterk benadrukken. "Het is onmogelijk om 2 door 0 te delen"
Verder heb je nog wat minder bekenden zoals:
ins -> inserted -> om wijzigingen aan te geven.
del -> deleted -> ook om wijzigingen aan te geven.
etc.
Allemaal semantiek. De elementen beschrijven de inhoud. Een <p>, paragraaf, is semantisch, een <h2> ook. Een <div> en een <span> bijvoorbeeld minder semantisch, omdat dezen niets specifieks zeggen over de inhoud. Dat is de grote vernieuwing van HTML5, er komen een heleboel nieuwe semantische elementen bij, en wat minder semantische elementen gaan weg of worden vervangen. Zo krijgen we straks <menu> en <video> bijvoorbeeld.
En het nadeel van xhtml, wanneer je dat werkelijk als xhtml+xml verstuurt zal IE 7 het bestand ter download aanbieden omdat het niet weet wat het ermee moet. Firefox zal het behandelen als XML, en dat heeft invloed op het renderen (deze gaat wat strikter) Echter, wanneer er een syntax-foutje in zit (bijvoorbeeld een & teken zonder dat het een entiteit is, of een foutje in de hiërarchie) krijg je een grote rode pagina met de melding dat de XML fout is. "ouderwetse" html probeert er op dat moment gewoon het beste van te maken.
Opbouw van een goede XHTML pagina
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Je Doctype en de xml starttag. De XML tag kun je beter niet gebruiken omdat sommige browsers dan een zootje maken van je pagina. In plaats daarvan kun je aangeven dat het een X(HT)ML document in een meta tag.
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl">De <html> starttag, let op xmlns, dat is de namespace van de xml (de declaratie van alle tags). Let ook op lang, en xml:lang. xml:lang is nieuw in XHTML, maar om backwards compatible te blijven wordt aanbevolen ook lang er naast te zetten. xml:lang gaat boven lang.
<head>
<title>Titel van de pagina</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
</head>
De head, let op de meta-tag. Die moet je niet gebruiken in combinatie met de XHTML start-tag. Je hebt 2 versies, een om het bestand als HTML voor te doen, en een om het als XML + XHTML te laten verwerken. Om backwards compatible te blijven, wordt het gebruik van 'text/html' aangeraden, omdat oudere browsers niet weten wat ze aan moeten met 'application/xhtml+xml'.
<body>
</body>
De body van je pagina met de inhoud
</html>En we sluiten de html-tag weer af
Pagina 6
W3c Validator
Als je code geen XHTML fouten bevat, dan is je code 'XHTML valid'. Dit kun je te weten komen door je code door de validator te halen. De url voor de validator is http://validator.w3.org. Als je code helemaal goed is, dan krijg je de volgende melding:
Echter, is je site niet XHTML valid, dan krijg je, zoals bij phphulp.nl het geval is, een foutmelding:
En daaronder staan je fouten. Als je 'show source' hebt aangevinkt, dan wordt het regelnummer van de foutmelding een link, en als je daarop klikt kom je onderaan de pagina op de regel van de fout.
Heb je het een en ander verbeterd, dan kun je op ‘Revalidate’ klikken, waarna de validator je site nogmaals controleert.
Als je wilt kun je, als je pagina foutloos is, een button plaatsen waarmee je laat zien dat jij aandacht aan je site hebt besteedt en dat hij XHTML valid is!
Echter, is je site niet XHTML valid, dan krijg je, zoals bij phphulp.nl het geval is, een foutmelding:
En daaronder staan je fouten. Als je 'show source' hebt aangevinkt, dan wordt het regelnummer van de foutmelding een link, en als je daarop klikt kom je onderaan de pagina op de regel van de fout.
Heb je het een en ander verbeterd, dan kun je op ‘Revalidate’ klikken, waarna de validator je site nogmaals controleert.
Als je wilt kun je, als je pagina foutloos is, een button plaatsen waarmee je laat zien dat jij aandacht aan je site hebt besteedt en dat hij XHTML valid is!
Pagina 7
Afsluiting
Ik hoop dat jullie wat gehad hebben aan deze tutorial, en gelijk als een gek je site XHTML valid maken :). Commentaar hoor ik graag in de reacties!
Als referentie heb ik gebruik gemaakt van:
Inleiding over XHTML
Deprecated tags
Als referentie heb ik gebruik gemaakt van:
Inleiding over XHTML
Deprecated tags
Reacties
0