In de computerwereld wordt het Engelse woord syntax vaak gebruikt als de term voor de grammatica van de programmeertaal. In HTML bestaat de syntax uit vier onderdelen:

1. elementen;
2. attributen;
3. karakterreferenties;
4. en commentaar.

Om deze onderdelen goed te begrijpen gebruiken we de onderstaande tekst als voorbeeld. De tekst bestaat, zoals je ziet, uit alleen tekst zonder enige opmaak of computer code. In dit hoofdstuk laten we zien waarvoor we de bovenstaande onderdelen van de HTML syntax gebruikt kunnen worden in deze tekst en welk voordeel we hieruit halen.

Wereldkampioenschap voetbal

Het wereldkampioenschap voetbal, kortweg WK voetbal genoemd, is een vierjaarlijks
toernooi tussen wereldwijd door voorrondes geselecteerde landenteams. Het kampioenschap,
inclusief voorrondes, valt onder auspiciën van de wereldvoetbalbond FIFA.

Geschiedenis
Op het einde van de jaren '20 kwam Jules Rimet met het idee om de sterkste nationale
voetbalploegen om de titel wereldkampioen (World Champion) te laten spelen. De eerste
trofee droeg dan ook zijn naam: de Jules Rimet-beker.

Trofee
De trofee die het winnende team ontvangt is een achttienkaraats gouden, bijna vijf
kilo wegende, 36 centimeter hoog ontwerp van de Italiaanse kunstenaar Silvio Gazzaniga.
Deze trofee blijft eigendom van de FIFA, en moet zodoende ingeleverd worden na vier jaar.

Bron: Wikipedia.

Elementen

Als je de bovenstaande tekst zou opslaan als een HTML bestand, dan zou je wellicht verwachten dat het eindresultaat eruit ziet als op deze afbeelding:

De werkelijkheid is echter anders. Als de tekst wordt opgeslagen als HTML en bekeken wordt in een browser, dan zal alle tekst achter elkaar en op dezelfde regel op het scherm verschijnen. Meerdere spaties achter elkaar of witregels worden namelijk altijd opgevat als 1 spatie. Tekst in een HTML bestand moet namelijk worden opgemaakt d.m.v. HTML code zodat de browser de tekst kan begrijpen en kan laten zien aan de gebruiker zodat die het op zijn beurt makkelijker kan lezen. Dit kan dus niet worden gedaan zoals in tekstverwerkers zoals Microsoft Word of OpenOffice Writer waar je d.m.v. een paar keer op de Enter drukken een leeg stuk in het document produceert.

Als een mens de bovenstaande tekst bekijkt, dan begrijpt dat persoon dat "Wereldkampioenschap voetbal", "Geschiedenis" en "Trofee", die elk op een eigen regel staan, als kop of tussenkop gezien moeten worden. Voor een computer zijn deze drie kopjes niets meer dan woorden net zoals de rest van het stukje tekst. Om de computer duidelijk te maken dat deze kopjes anders opgevat moet worden, "markeren" we deze termen als volgt met HTML code.

<h1>Wereldkampioenschap voetbal</h1>

Het wereldkampioenschap voetbal, kortweg WK voetbal genoemd, is een vierjaarlijks
toernooi tussen wereldwijd door voorrondes geselecteerde landenteams. Het kampioenschap,
inclusief voorrondes, valt onder auspiciën van de wereldvoetbalbond FIFA.

<h2>Geschiedenis</h2>
Op het einde van de jaren '20 kwam Jules Rimet met het idee om de sterkste nationale
voetbalploegen om de titel wereldkampioen (World Champion) te laten spelen. De eerste
trofee droeg dan ook zijn naam: de Jules Rimet-beker.

<h2>Trofee</h2>
De trofee die het winnende team ontvangt is een achttienkaraats gouden, bijna vijf
kilo wegende, 36 centimeter hoog ontwerp van de Italiaanse kunstenaar Silvio Gazzaniga.
Deze trofee blijft eigendom van de FIFA, en moet zodoende ingeleverd worden na vier jaar.

Zoals je ziet staat de kop "Wereldkampioenschap voetbal" tussen de codes <h1> en </h1> waardoor het geheel <h1>Wereldkampioenschap voetbal</h1> wordt gevormd. Dit wordt een element genoemd. Met elementen maken we dus een tekst op zodat een computer deze tekst kan begrijpen.

Het element <h1>Wereldkampioenschap voetbal</h1> bestaat uit 3 onderdelen:

1. een start tag: <h1>
2. de inhoud: Wereldkampioenschap voetbal
3. en een eind tag: </h1>

Zoals je ziet bestaat het element uit twee "tags": de start tag en de eind tag. Dit geldt voor (bijna) alle HTML elementen (de uitzonderingen komen we vanzelf tegen). Een tag begint altijd met het < karakter en eindigt altijd met >. Een eind tag begint echter altijd met </. Vervolgens komt de naam van het element (dit geldt voor de start én eind tag). In dit geval is dat dus h1. Daarom noemen we dit element een H1 element.

Even voor de duidelijkheid: het H2 element (wat we 2 keer zien met daarin de koppen "Geschiedenis" en "Trofee") geeft ook aan dat de inhoud een kop is, maar het verschil tussen H1 en H2 is in dit voorbeeld niet van belang. We hebben deze elementen alleen uitgekozen om de syntax van HTML duidelijk te maken. Verdere uitleg over de H1 en H2 elementen wordt gegeven in het hoofdstuk Tekststructuur. Het is echter niet aan te raden om gelijk naar dat hoofdstuk te springen om meer te weten te komen over deze elementen. We komen ze namelijk vanzelf tegen.

Nu we de koppen hebben aangegeven d.m.v. de H1 en H2 elementen houden we nog de drie alinea's tekst onder elke kop over. Deze moeten natuurlijk ook opgemaakt worden omdat het, net zoals bij de koppen, niet duidelijk is wat voor deze stukjes tekst hebben. Als mens kunnen wij zien dat dat alinea's zijn die betrekking hebben op de kopjes die erboven staan. Een computer kan dit niet, dus moeten we ook deze tekst d.m.v. HTML aangeven wat het zijn. Alinea's geven we aan d.m.v. het P element. Dit element wordt samen met de H1 en H2 uitvoerig besproken in het hoofdstuk Tekststructuur. Hieronder volgt het voorbeeld met de toegevoegde P elementen:

<h1>Wereldkampioenschap voetbal</h1>

<p>Het wereldkampioenschap voetbal, kortweg WK voetbal genoemd, is een vierjaarlijks
toernooi tussen wereldwijd door voorrondes geselecteerde landenteams. Het kampioenschap,
inclusief voorrondes, valt onder auspiciën van de wereldvoetbalbond FIFA.</p>

<h2>Geschiedenis</h2>
<p>Op het einde van de jaren '20 kwam Jules Rimet met het idee om de sterkste nationale
voetbalploegen om de titel wereldkampioen (World Champion) te laten spelen. De eerste
trofee droeg dan ook zijn naam: de Jules Rimet-beker.</p>

<h2>Trofee</h2>
<p>De trofee die het winnende team ontvangt is een achttienkaraats gouden, bijna vijf
kilo wegende, 36 centimeter hoog ontwerp van de Italiaanse kunstenaar Silvio Gazzaniga.
Deze trofee blijft eigendom van de FIFA, en moet zodoende ingeleverd worden na vier jaar.</p>

Ook in dit voorbeeld zien we dat het P element bestaat uit dezelfde drie onderdelen die we ook bij het H1 element hebben gezien. Als je het fenomeen "elementen" hebt begrepen, dan gaan we nu kijken hoe we elementen kunnen uitbreiden d.m.v. "attributen".

Attributen

Soms kan het zo zijn dat je meer informatie wilt geven over de inhoud van het element. Dat kan d.m.v. attributen. Attributen zeggen iets extra's over een element. Zo kan je bijv. een korte omschrijving van de inhoud van een element geven, of een IRI (of URL) die iets met de inhoud van het element te maken heeft.

Een attribuut ziet er als volgt uit. Deze gaan altijd in de start tag van een element.

attribuut="waarde"

Als we het bovenstaande voorbeeld samenvoegen met het H1 element wat we in de tekst over het WK voetbal hebben gezien, dan ziet dat er als volgt uit:

<h1 attribuut="waarde">Wereldkampioenschap voetbal</h1>

Een voorbeeld van een attribuut is het lang attribuut. Deze zegt iets over de taal van het element. Als we attribuut="waarde" in het vorige voorbeeld vervangen door lang="nl" zou dat betekenen dat de inhoud van het H1 element in het Nederlands is (nl is namelijk de taalcode voor het Nederlands).

Om in de komende hoofdstukken goed onderscheid te maken tussen elementen en attributen in de tekst gebruiken we voortaan ook kleuren om het verschil tussen elementen en attributen en attributen aan te geven zodat er geen onduidelijkheden ontstaan:

• elementen worden paars;
• en attributen worden groen.

Karakterreferenties

Als derde onderdeel van de HTML syntax hebben we karakterreferenties. Karakterreferenties zijn codes die een bepaalde karakter voorstellen. Er zijn twee momenten wanneer je een karakterreferentie zou kunnen gebruiken:

1. als je een karakter in jouw tekst wilt gebruiken, maar je weet niet hoe je d.m.v. je toetsenbord de karakter in je tekst kan krijgen;
2. of als je een karakter in jouw tekst wilt gebruiken, maar niet kan omdat je dan in de knoei komt met de HTML syntax. Een voorbeeld hiervan is als je het < karakter wilt gebruiken. Als je deze normaal typt dan denkt de browser dat het karakter het begin is van een nieuw element.

De eerste reden hoeft eigenlijk bijna nooit voor te komen. Als je een speciaal karakter zoals ¶ wilt gebruiken, dan kan je in Windows via naar Start > Uitvoeren… gaan en vervolgens `charmap` (zonder `) intypen waarmee je een klein venster tevoorschijn tovert die je heel gemakkelijk kan gebruiken om het karakter wat je wilt op te zoeken en te kopiëren om vervolgens te plakken in de tekst. Het kan echter voorkomen dat je geen toegang hebt tot dit venster (op bijv. een openbare computer), waardoor het makkelijker is om een karakterreferentie te gebruiken om zo het karakter in jouw tekst te gebruiken.

De tweede reden kan echter niet worden opgelost door via een andere weg aan het karakter te komen. Als je < of > in jouw tekst wilt gebruiken, dan zal je gedwongen zijn om een karakterreferentie te gebruiken omdat je anders in de knoei komt met de syntax van HTML, zoals eerder beschreven.

Er zijn echter nog twee karakters die in enkele gevallen ook alleen te gebruiken zijn d.m.v. een karakterreferentie. Dit zijn & en ". & wordt namelijk gebruikt voor de syntax van karakterreferenties, dus als je die normaal intypt, dan denkt de browser dat je een karakterreferentie begint. Voor het " karakter geldt dat het problemen veroorzaakt in de waarde van een attribuut. Gebruik je namelijk het " karakter in de waarde van een attribuut, dan denkt de browser dat daar het einde is van de waarde.

Nu je weet waarvoor je een karakterreferentie gebruikt gaan we kijken hoe een karakterreferentie eruit ziet. Ze kunnen niet vergeleken worden met elementen of attributen, want ook karakterreferenties hebben hun eigen syntax. Een karakterreferentie kan er als volgt uitzien:

&karakter;

Zoals je ziet begint een karakterreferentie met een & en eindigt het met een ;. Daar tussenin staat een naam of een getal dat een bepaald karakter voorstelt. Elk karakter heeft namelijk een naam en een getal wat in een karakterreferentie gebruikt kan worden om het karakter te gebruiken. Het is echter makkelijker om de naam van het karakter in de referentie te gebruiken omdat die simpelweg meestal makkelijker te onthouden is.

Hieronder staat een lijst met de 4 karakters die problemen veroorzaken met de syntax van HTML. Voor de volledige collectie van alle karakters met de naam en het getal wat in de karakterreferentie gebruikt kan worden, raadpleeg deze lijst.

<

<

>

>

&

&

"

"

Commentaar

Tussen al je elementen door kan je ook commentaar zetten, net als in elke andere computertaal. Het commentaar verschijnt niet in je browser als je de pagina bekijkt, maar is alleen in de HTML code te zien. Je kan dus in je HTML code een stukje tekst zetten wat een deel van je HTML code uitlegt, of iets neerzetten als geheugensteuntje voor iets wat je later nog op de webpagina wilt verwerken. HTML commentaar ziet er als volgt uit:

<!-- Bla bla -->

Zoals je ziet begint commentaar altijd met de tekens <!-- en eindigt het met -->. Daartussen komt de tekst van het commentaar.

Als je de syntax van HTML in z'n geheel onder de knie hebt, dan kunnen we beginnen met de Basisstructuur van elk HTML document.