# HTML-elementen en tags

# Elementen

Een HTML-document bestaat uit een reeks van HTML elementen. Ze dicteren aan de browser de structuur en inhoud van een webpagina. Voorbeelden van elementen zijn:

• Een header-element <h1> duidt een kop aan van het hoogste niveau.
• Een paragraaf-element <p> bevat tekst die bij elkaar hoort, zoals een paragraaf in een normaal document.
• Een adres-element <address> duidt op informatie over een adres of telefoonnummer.

Er bestaan een groot aantal elementen, maar je hoeft ze zeker niet allemaal vanbuiten te leren.

# Tags

Een element wordt neergeschreven via tags. Een element bestaat in de meeste gevallen uit een openings- en sluitingstag, waarbinnen de inhoud van het element geschreven wordt. Een tag ziet er als volgt uit:

<elementnaam>Inhoud van element</elementnaam>

Om dus een kop van niveau 1 (titel-kop) als geldige HTML-code in het document op te nemen verpakken we het element in een openings- en sluitingstag met daartussen de koptekst:

<h1>Hallo Wereld</h1>

Om vervolgens nog een paragraaf met tekst toe voegen:

<h1>Hallo Wereld</h1>
<p>Welkom in de wondere wereld van webontwikkeling!</p>

Probeer dit uit door de inhoud van het bestand hallowereld.html uit het vorige onderdeel te vervangen met bovenstaande code!

# Witruimte

Je merkt op dat de browser zelf kiest waar en wanneer er een nieuwe lijn wordt toegevoegd tussen de elementen. Men noemt dit witruimte. Tussen de kop, paragraaf- en adres-elementen wordt automatisch witruimte voorzien.

Voeg als laatste onderdeel je adresgegevens toe aan het document:

<h1>Hallo Wereld</h1>
<p>Welkom in de wondere wereld van webontwikkeling!</p>
<address>
    Steven Schoovaerts
    HTML-straat 55
    2235 Hulshout
</address>

Je zal merken dat je adresgegevens binnen het <address> element in één regel doorlopen. De browser houdt nooit rekening met regeleindes in een HTML-document en zal ze dus negeren. Eigenlijk is dit zeer handig, omdat je de code dus zelf kan formatteren door middel van regeleindes en tabs zonder dat de weergave van de pagina hiervan last ondervindt.

Om toch zelf te kiezen wanneer een regel moet afbreken kan je het <br> (break rule) element gebruiken. Dit element is een leeg element, wat betekent dat het enkel een openingstag vereist (het element heeft immers geen inhoud nodig).

<h1>Hallo Wereld</h1>
<p>Welkom in de wondere wereld van webontwikkeling!</p>
<address>
    Steven Schoovaerts<br>
    HTML-straat 55<br>
    2235 Hulshout
</address>

Het resultaat zou er goed moeten uitzien!

# Commentaar

Je kan commentaar toevoegen eender waar in je code door gebruik te maken van een speciale notatie. Commentaar wordt door de browser genegeerd en dient alleen om je code te voorzien van extra informatie. Commentaar is geen element.

<!-- Alles dat je hier schrijft is commentaar -->

Zo zou je jezelf in het voorbeeld er kunnen aan herinneren later nog een telefoonnummer aan je adresgegevens toe te voegen:

<h1>Hallo Wereld</h1>
<p>Welkom in de wondere wereld van webontwikkeling!</p>
<address>
    <!-- TODO: Telefoonnummer toevoegen -->
    Steven Schoovaerts<br>
    HTML-straat 55<br>
    2235 Hulshout
</address>