HTMLboek
De structuur van HTML
HTML is opgebouwd uit elementen. Deze elementen kunnen kunnen attributen hebben, waaraan in de meeste gevallen een waarde wordt toegekend. Om de elementen en platte tekst uit elkaar te houden, worden de elementen met hun bijbehorende attributen in tags geplaatst.
Tags
Een tag in HTML wordt geschreven tussen puntige haken: < en >. Tussen de puntige haken wordt vervolgens eerst de naam van het element geschreven, eventueel gevolgd door een of meerdere attributen. De opbouw hiervan ziet er als volgt uit voor een element zonder attributen: <elementnaam>. We komen later terug op een element met attributen.
Veel elementen hebben ook een inhoud in de HTML-pagina, waardoor het noodzakelijk is om niet alleen het begin van het element aan te geven met een tag, maar ook het einde er van. Hierdoor zijn er begintags en eindtags. De begintag is zoals hiervoor: <elementnaam>. De eindtag lijkt op de begintag; de elementnaam is hetzelfde, maar wordt voorafgegaan door een voorwaartse schuine streep (/): </elementnaam>. Wanneer een (begin)tag attributen bevat, worden deze attributen in de eindtag weggelaten; maar hierover later meer. Tussen de begin- en eindtag kan platte tekst worden geplaatst, maar kunnen ook weer andere tags (elementen) tussen geplaatst worden.
Dit alles is het beste bekeken aan de hand van een voorbeeld:
<p>Dit is de eerste alinea van dit hoofdstuk. Het is een kort hoofdstuk.</p>
Titel van dit hoofdstuk
Dit is de eerste alinea van dit hoofdstuk. Het is een kort hoofdstuk.
In dit voorbeeld zien we de begintag <h1>. h1 is de elementnaam voor Kop 1 (Heading 1). Dit element wordt afgesloten met de eindtag </h1>. Alles wat tussen <h1> en </h1> staat wordt door de browser gezien als de inhoud van het element. En omdat <h1> staat voor een kop van het hoogste niveau, wordt de inhoud van dit element automatisch door de browser in een grotere lettergrootte en vetgedrukt weergegeven.
Daarnaast zien we ook nog de begintag <p> en aan het einde de bijbehorende eindtag </p>. Het element <p> geeft aan dat de inhoud er van een Alinea (Paragraph) betreft.
In een volgend hoofdstuk meer over het structureren van tekst in een HTML-pagina.
Elementen
In het voorbeeld van de vorige paragraaf hebben we twee elementen (<h1> en <p>) gezien die je helpen bij het structureren van teksten op je website. Maar er zijn nog veel meer elementen met ieder hun eigen unieke functie. Zo is er bijvoorbeeld een element <title> om de titel die wordt weergegeven in de tabblad van de pagina op te geven. Er is ook een element <img> om een afbeelding op de pagina in te voegen. Of wat dacht je van <table> voor het weergeven van gegevens in een tabelvorm. Maar er zijn ook elementen die je niet visueel kunt zien, zoals <div>, maar wel enorm waardevol kunnen zijn zodra je met CSS of JavaScript aan de gang wil.
Het voert te ver om alle 106 elementen die je kunt gebruiken in HTML 5 hier te benoemen. Een groot deel hiervan komen we vanzelf tegen in de resterende hoofdstukken van dit boek. Wat voor nu wel belangrijk is om te weten is dat ieder element zijn eigen functie heeft. Dat sommige elementen vaker mogen voorkomen binnen een HTML-pagina en anderen maar één keer. En dat sommige elementen verplicht zijn, maar de meeste niet.
Attributen
Zoals eerder opgemerkt kunnen attributen worden toegevoegd aan een element. Een attribuut geeft extra eigenschappen op aan een element die er bijvoorbeeld voor kunnen zorgen dat het element anders wordt weergegeven, zich anders gedraagt of kan simpelweg aanvullende informatie toevoegen. De attributen worden altijd toegevoegd aan de begintag, en dat ziet er dan als volgt uit: <elementnaam attribuutnaam1="waarde1" attribuutnaam2="waarde2" attribuutnaam3 attribuutnaam4="waarde4">. De elementnaam wordt dus binnen de puntige haken van de tag gevolgd door één of meerdere attribuutnamen. Aan een attribuut kan een waarde worden toegekend door de attribuutnaam te laten volgen door een is-teken en dan de gewenste waarde tussen aanhalingstekens. Soms hoeft geen waarde te worden opgegeven en dan volstaat enkel het opgeven van de attribuutnaam. Voor de attribuutnaam van ieder attribuut komt een spatie, om de attributen onderling en van de elementnaam te scheiden. Voor ieder van de 106 verschillende elementen kunnen andere attributen beschikbaar zijn om te gebruiken. Ook hiervoor geldt dat we de belangrijkste vanzelf tegen komen in de rest van dit boek.
De waarde die je toekent aan een attribuut is hierboven geschreven tussen dubbele aanhalingstekens. Het gebruik van deze aanhalingstekens is niet in alle gevallen verplicht, maar je HTML gaat hopeloos stuk wanneer je ze vergeet als ze wel verplicht zijn. En in plaats van dubbele aanhalingstekens zou je ook enkele aanhalingstekens mogen gebruiken, zolang je ze maar niet door elkaar gebruikt voor dezelfde waarde. Dubbele aanhalingstekens zijn echter het meest gangbaar en veruit het handigst als je bijvoorbeeld een keer met PHP aan de slag wil. Daarom is het handig om je aan te leren om gewoon altijd alle attribuut-waardes tussen dubbele aanhalingstekens te schrijven.
Wellicht goed om nog even een concreet voorbeeld te laten zien:
In dit voorbeeld is het element <img> gebruikt. Hiermee kan een Afbeelding (Image) aan een HTML-document worden toegevoegd. <img> is meteen ook een bijzonder element, omdat het geen inhoud kan hebben (in de formele zin van het woord, een afbeelding is natuurlijk wel "inhoud" voor je website!). Hierdoor is er geen eindtag nodig voor <img>. Daarnaast is het een bijzonder element omdat het attribuut src verplicht is. Het element heeft dus altijd ten minste één attribuut. Het attribuut src geeft de Bron (Source) van de afbeelding op, een URL dus. Daarnaast geven de attributen width en height respectievelijk de breedte en hoogte van de afbeelding op in pixels. Het opgeven van breedte en hoogte is overigens niet verplicht, maar meer hierover in het hoofdstuk over afbeeldingen.
Samengevat
- Een element bestaat uit een begintag en een eindtag. Behalve als een element geen inhoud mag hebben, dan is er alleen een begintag.
- Alles wat tussen de begin- en eindtag noemen we de inhoud van het element.
- De attributen van een element worden toegevoegd in de begintag van het element.
- De waarde van een attribuut wordt geschreven tussen dubbele aanhalingstekens.
HTMLboek ©2018 Jasper Vries.
HTMLboek mag vrij gebruikt worden, zie de pagina Licentie voor meer informatie.
Deze pagina is het laatst bijgewerkt op 07-07-2018.
htmlboek.net