XHTML

(vrije vertaling naar een artikel op de website van W3Schools )

XHTML 1.0 werd een officiële W3C aanbeveling op 26 jan 2000.Een W3C-aanbeveling betekent dat deze versie nu een webstandaard is.

XHTML is een vernieuwde versie van HTML 4.01 in XML, en wordt herkend door de bestaande browsers, mits enkele eenvoudige regels te volgen.

I. Inleiding: Wat is XHTML?

Voor een goed begrip van deze cursus is het wenselijk dat u reeds over enige kennis van HTML beschikt. XHTML staat voor Extensible Hyper Text Markup Language. De bedoeling is om op de duur HTML door XHTML te vervangen.  XHTML lijkt erg veel op HTML 4.0 Maar is een strengere en “gekuiste” versie van HTML  HTML is eigenlijk een XML applicatie.
XHTML is de nieuwe generatie van HTML, maar het zal nog enige tijd duren voor alle browsers er klaar voor zijn.

In de tussentijd kun je jezelf voorbereiden, door je huidige code reeds op het niveau van de XHTML-standaard te brengen.

II. Verschillen tussen XHTML en HTML

  1. Alle tags en attributen moeten in kleine letters staan.
  2. Alle XHTML elementen moeten afgesloten worden.
  3. Alle attribuutwaarden moeten gequote worden.
  4. Het id-attribuut vervangt het name-attribuut.
  5. Het script-element moet een type-definitie krijgen.
  6. Documenten moet overeenkomstig de XML-regels opgesteld worden.
  7. XHTML krijgen nog enkele verplichte bijkomende elementen.

 

We lichten een en ander hieronder toe.

A. Alle tags en attributen moeten in kleine letters staan.

Dat is omdat XHTML documenten eigenlijk XML-toepasssingen zijn, en XML is case-sensistive.
Zo zijn tags <br> en <BR> verschillend.

Het volgende is verkeerd:


 

<BODY BGCOLOR="#CCCCCC">

<P>Dit is een paragraaf<P>

</BODY>

De juiste manier is:


 

<body bgcolor="#CCCCCC">

<p>Dit is een paragraaf</p>

</body>

B. Alle XHTML elementen moeten afgesloten worden

Dit is weer verkeerd:
 
<p>This is a paragraph

<p>This is another paragraph
 

En dit is correct:
 

<p>This is a paragraph</p>

<p>This is another paragraph</p>

Lege elementen moeten dus ofwel een end-tag hebben, of moeten eindigen/>

Dit is verkeerd

 
This is a break<br>

Here comes a horizontal rule:<hr>

Dit is correct:

 
This is a break<br />

This is a break too<br></br>

Here comes a horizontal rule:<hr />
 

BELANGRIJK: compatibiteit met de huidige browsers:

Om je XHTML compatibel te maken met de huidige browsers, moet je een extra spatie toevoegen voor het “/”-symbool zoals in <br /> en <hr />.

C. Alle attribuutwaarden moeten gequote worden.

Dit is verkeerd:
<table rows=3>

 
Dit is correct:

 
<table rows="3">

Minimalisatie is eveneens verboden:

Dit is verkeerd:

 
<dl compact>

<input checked>

<option selected>
 

Dit is correct:


 

<dl compact="compact">

<input checked="checked">

<option selected="selected">
 

D. Het id-attribuut vervangt het name-attribuut.

In XHTML wordt het “name”-attribuut vervangen door “id”

Dit is verkeerd:

 
<img src="picture.gif" name="picture1" />

Dit is correct:

 
<img src="picture.gif" id="picture1" />

BELANGRIJK: Voeg weer een extra spatie toe voor de “/”.

Symbolen zoals “<” en “&” maken deel uit van de opmaak. Om dit te vermijden kun je deze tekst in een CDATA-definitie plaatsen als volgt:

 
<script>

<![CDATA[

... script content ...

]]>

</script>

E. Documenten moet overeenkomstig de XML-regels opgesteld worden.

Documenten moeten opgesteld worden volgens de XML-syntax.

Dat zijn:

a) Elementen moeten juist genest worden

In HTML kon het volgende “er nog door”:
<b><i>This text is bold and italic</b></i>

In XHTML moet alles juist genest worden als volgt:

 
<b><i>This text is bold and italic</i></b>

b) Documenten moeten juist samengesteld zijn:

Alle XHTML elementen moeten in een <html> tag staan. Alle andere elementen kunnen sub-elementen (childs)
Hebben. Deze moeten in paren voorkomen en juist genest.
De basisstructuur ziet er dus als volgt uit:

 
<html>

<head> ... </head>

<body> ... </body>

</html>
 

In XML-cursus vindt u hierover meer.

F. XHTML krijgen nog enkele verplichte bijkomende elementen. 

Alle XHTML-documten krijgen een DOCTYPE-declaratie.
De tags html, head, en body moeten aanwezig zijn.

Dus een minimum voor een XHTML-document ziet er als volgt uit:

 
<!DOCTYPE html>

<html>

<head>

<title>This is a Title</title>

</head>

<body>

.

.

Body text goes here

.

.

</body>

</html>

III. XHTML Syntax

Een XHTML document bestaat uit drie delen:DOCTYPE,Head en Body.
De basisstructuur is:
 
<!DOCTYPE ...>

<html... >

<head> ... </head>

<body> ... </body>

</html>

Een eenvoudig XHTML zou er dus zo kunnen uitzien:

 

<!DOCTYPE html 

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/strict.dtd">

<html>

<head>

<title>simple document</title>

</head>

<body>

<p>a simple paragraph</p>

</body>

</html>

De DOCTYPE definitie geeft aan over welk soort document het gaat:
 

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/strict.dtd">

De document Type Definities
 


 

STRICT 

TRANSITIONAL 

FRAMESET 
 

a) XHTML 1.0 Strict

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/strict.dtd">

 

 

Gebruik dit als je echt heel zuivere code wil produceren. Gebruik het samen met CSS (Cascading Style Sheets)

b) XHTML 1.0 Transitional

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">

Gebruik dit om gebruik te maken van de voordelen van HTML-representatie. Nog niet alle browsers verstaan CSS.

c) XHTML 1.0 Frameset

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/frameset.dtd">

 

 

Gebruik dit als je frames wil gebruiken.

IV. XHTML Validatie

Een XHTML-document wordt gevalideerd met een Document Type Definition (DTD)
Daarom moet een correcte DTD toegevoegd worden als eerste lijn in een pagina, zoals hiervoor reeds werd aangegeven.

 

De volledige XHMTL 1.0 referentie vind je op het volgende URL

http://www.w3schools.com/xhtml/xhtml_reference.asp