XHTML5.NL

Beginselen van XML

Extensible Markup Language (XML) is een taal om gegevens gestructureerd als tekst op te slaan. In dit eerste hoofdstuk worden hiervan de relevante beginselen uitgelegd, die later nodig zullen blijken voor het bouwen van webpagina’s.

Elementen

In XML draait alles om elementen. Elementen worden genoteerd door twee zogenaamde tags: een openingstag en een sluitingstag. De globale syntaxis van een element genaamd ‘EersteVoorbeeld’ is als volgt:

<EersteVoorbeeld> </EersteVoorbeeld>

Zoals je ziet, worden beide tags begrensd door een kleiner-dan-teken en een groter-dan-teken. In beide tags wordt de naam van het element genoemd. De schuine streep aan het begin van de sluitingstag maakt duidelijk dat het een sluitingstag is.

Inhoud

Alles wat tussen de openingstag en sluitingstag van een element staat, is de inhoud van dat element. Hieronder heeft ons voorbeeldelement een stukje tekst als inhoud gekregen:

<TweedeVoorbeeld>Hallo mensen, ik ben Jeroen.</TweedeVoorbeeld>

In XML worden regelovergangen en meerdere spaties en tabs achter elkaar standaard weergegeven als een enkele spatie. Het tweede voorbeeld kan daarom met hetzelfde resultaat als volgt worden genoteerd:

<TweedeVoorbeeld>
Hallo    mensen,
ik ben   Jeroen.
</TweedeVoorbeeld>

Een element zonder inhoud wordt leeg genoemd. Als een element leeg is, mogen de openingstag en sluitingstag tot één tag worden samengevoegd. Zo ontstaat een kortere notatie. De nieuwe tag is gelijk aan de openingstag met voor het eind een schuine streep toegevoegd:

<EersteVoorbeeld />

Attributen

Het volgende belangrijke onderdeel van XML zijn attributen, die gebruikt worden om extra gegevens aan een element te hangen. Ze staan binnen de openingstag in de vorm van de naam, gevolgd door een is-gelijk-teken, gevolgd door de waarde tussen enkele of dubbele aanhalingstekens. De aanhalingstekens mogen niet gekruld zijn. Hieronder is de globale syntaxis aangegeven van een leeg element met één attribuut:

<Voorbeeldelement voorbeeldattribuut="voorbeeldwaarde" />

Hiërarchie

Nu je het bovenstaande weet, kun je meerdere elementen gaan combineren tot een document. Dit is hetzelfde als één XML-bestand of webpagina. De essentie is dat elementen in hun inhoud ook weer elementen kunnen hebben.

Hieronder wordt het tweede voorbeeld uitgebreid met drie nieuwe elementen en twee nieuwe attributen:

<TweedeVoorbeeld>
 <Aanhef>
  <Groet>Hallo</Groet>
  mensen,
 </Aanhef>
 ik ben
 <Persoon familie="Van der Gun" woonplaats="Delft">
  Jeroen
 </Persoon>.
</TweedeVoorbeeld>

Het element ‘TweedeVoorbeeld’ is nu de ouder van vier kinderen: het element ‘Aanhef’, het stukje tekst ‘ik ben’, het element ‘Persoon’ en de punt aan het eind. Het is tevens de grootouder van het element ‘Groet’ en de tekst ‘mensen,’, die zijn kleinkinderen zijn. Je kunt allerlei familiaire relaties op XML projecteren, zolang je je realiseert dat elk element maar één ouder heeft.

Het element ‘TweedeVoorbeeld’ is tevens het hoofdelement van het document: het omsluit namelijk het gehele document. Zo’n hoofdelement moet verplicht aanwezig zijn en is het enige element zonder ouder.

Hoewel het hier niet gedaan is, is het prima mogelijk om meerdere elementen met dezelfde naam in een document te hebben. Zo zou in dit verhaal nog een persoon kunnen voorkomen die ook een Persoon-element heeft. Ook kunnen aan alle elementen uit dit voorbeeld weer nieuwe kinderen worden toegevoegd.

Escape

Maar wat nu als je ongelijkheidstekens of (rechte) aanhalingstekens letterlijk in de tekst van je document wilt opnemen? Hiervoor zul je deze tekens zogenaamd moeten escapen. Doe je dit niet, dan worden deze tekens herkend als onderdeel van de XML-opmaak in plaats van als onderdeel van tekst.

Een mogelijkheid voor escapen in XML is het gebruik van zogenaamde entiteiten. Voor het kleiner-dan-teken moet je simpelweg ‘&lt;’ typen in XML en voor het groter-dan-teken ‘&gt;’. Indien je geen gekrulde aanhalingstekens wilt typen, moet je binnen attribuutwaarden ‘&quot;’ voor dubbele aanhalingstekens gebruiken en ‘&apos;’ voor enkele. Vanwege dit systeem is ook de ampersand een karakter met speciale betekenis geworden, dat hierdoor als ‘&amp;’ moet worden getypt indien je die speciale betekenis niet wilt.

Naamruimten

Je moet ook nog iets weten over het fenomeen naamruimten. Neem bijvoorbeeld een element met de Engelse naam ‘table’. Soms kan hiermee een meubelstuk worden bedoeld, soms kan een tabel worden bedoeld. Om die betekenissen uit elkaar te houden, zijn naamruimten bedacht.

Iedereen die elementen verzint die anderen gaan gebruiken, stelt ook volgens bepaalde regels een unieke naam op voor zijn verzameling elementen. Als zo’n verzameling gebruikt wordt binnen een document, wordt deze naam in een speciaal attribuut genaamd ‘xmlns’ geplaatst. Voor een element die dat attribuut niet heeft, wordt het attribuut van de dichtstbijzijnde voorouder van dat element geraadpleegd. Met deze naam weet elk programma dat het bestand leest, welke betekenis bedoeld wordt.

In onderstaand voorbeeld wordt in een door mijzelf aangemaakte naamruimte ‘tag:xhtml5.nl,2010:meubels’ een ‘table’ gemaakt:

<table xmlns="tag:xhtml5.nl,2010:meubels">
 <name>Supertafel</name>
 <price>€50</price>
</table>

Commentaar

Tot slot is het nog prettig te weten dat in XML zogenaamd commentaar geplaatst kan worden. Zo kun je voor jezelf aantekeningen maken in het document die niet zichtbaar zijn als je het XML-bestand met een browser bekijkt. Hieronder een voorbeeld:

<!--Dit is een stukje commentaar-->

Praktijkvoorbeeld

Hieronder volgt een simpel praktijkvoorbeeld. Dit is een stukje Mathematical Markup Language (MathML), een XML-toepassing voor wiskundige uitdrukkingen. In dit voorbeeld wordt met behulp van een entiteit uitgedrukt dat een variabele groter is dan 3:

<math xmlns="http://www.w3.org/1998/Math/MathML">
 <mi>x</mi>    <!-- i van identifier -->
 <mo>&gt;</mo> <!-- o van operator -->
 <mn>3</mn>    <!-- n van number -->
</math>

De knop ‘Zelf uitproberen’ brengt je naar het XHTML5.NL-laboratorium waarin je met de code kunt spelen en de vergelijking in je browser kunt bekijken. De browsers Firefox en Opera herkennen de MathML-naamruimte en zullen daarom de variabele schuingedrukt weergeven zoals gebruikelijk in de wiskunde. Uiteraard zullen later nog veel voorbeelden komen die in alle browsers werken.