1. XHTML
De betekenis van XHTML is eXtensible HyperText Markup Language, het is min of meer een opvolger van HTML. Omdat XHTML vrij veel op HTML lijkt is het makkelijk te begrijpen, het enigste waar je op moet letten is dat de controle strenger is en je dus scripts krijgt die er netjes uitzien, dus zonder rotzooi.
Wat heeft dit voor voordelen?
- XHTML rendeert sneller, dus worden de pagina’s sneller geladen.
- Met XHTML kun je CSS makkelijker gebruiken
- Het is de nieuwe standaard
top2. DOCTYPE
Frameset: Deze wordt gebruikt op een website met frames.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Transitional: Hierbij is de controle wat minder streng dan bij Strict, het is dus mogelijk om gebruik te maken van tags.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Strict: Bij Stict moet je je aan de regels houden, het wordt ook geprefereerd om te werk te gaan via CSS.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Mijn eerste XHTML pagina</title>
</head>
<body> Hier komt de tekst, tabellen, etc </body>
</html>
Vaak word er tussen de head-tags nog een meta-tag gezet
maar eigenlijk is dit net fout, hierdoor verzend je XML als HTML. Dit werkt omdat XHTML backwards compatible is, dit kun je beter met PHP regelen.
top4. Tags
Bij XHTML moet je alle tags die gebruikt worden op de juiste manier afsluiten, anders wordt de tag niet toegestaan, dus fout gerekend. Je XHMTL is dan niet valid.
Er is nu ook bijgekomen dat je horizontal rules, breaks en images o.a. moet afsluiten, dus je krijgt min of meer het volgende:
Maar de manier die aangeraden word is:
Horizontal rule => <hr />
Break => <br />
Image => <img />
Je moet ook de tags op de juiste volgorde afsluiten, dus als je een div opent en daarna pas een span, dan moet je ook eerst de span afsluiten en daarna pas de div.
De goede manier:
<div>blaat <span>aap</span> koe</div>
De foute manier:
<div>blaat <span>aap koe</div></span>
top5. Attributen
Was het in HTML 4.01 nog zo gemakkelijk om je attributen zo kort mogelijk te schrijven, zo lang moet je ze nu maken, ze hebben namelijk ingevoegd dat je attributen voluit moet schrijven. Doe je dit niet zal je attribuut niet werken.
Voorheen ging het dus zo:
<hr noshade>
<td nowrap></td>
Tegenwoordig moet het zo:
<hr noshade="noshade"/>
<td nowrap="nowrap"></td>
top6. Dubbel-quotes
Ook is het een must om alles met dubbel-quotes te doen, in HTML 4.01 kon je nog zonder werken, maar in XHTML wordt dit niet valid verklaard.
Wat je nu dus moet doen:
<span style="color: #EFEFEF"></span>
Wat in HTML 4.01 nog mogelijk was:
<span style=color: #EFEFEF></span>
top7. ID vs NAME attribuut
Waar men in HTML 4.01 nog het NAME attribuut voor gebruikte, is het in XHMTL het ID attribuut geworden.
Dus waar je vroeger een NAME gebruikte gebruik je nu een ID:
HTML:
<object name="blaat"></object>
XHTML:
<object id="blaat"></object>
Bij forms wordt wel aangeraden om nog beiden te gebruiken, de reden hiervoor is dat als je de ID alleen gebruikt ze niet gesubmit worden, als je de name tag alleen gebruikt worden ze niet gelinkt aan hun label. Wat is dus de conclusie? Gebruik ze beide.
top8. Waar moet je op letten?
- Elementen moeten netjes geplaatst worden.
- Documenten moeten goed vormgegeven (tags altijd lowercase) worden.
- Tags en attributen moeten goed afgesloten worden.
- Alle elementen moeten gesloten worden.
- Attributen moeten gequote worden.
- Attributen minimaliseren is verboden, dus geen <hr noshade>.
- Het ID attribuut vervangt het NAME attribuut.
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
