Studieanker

# Elementen

# HTML-Elementen

HTML-code is opgebouwd uit elementen. Elementen zijn meestal samengesteld uit twee tags: een openingstag en een sluitingstag. Een tag bestaat uit een kleiner dan-teken <, gevolgd door de naam van de tag en afgesloten door een groter dan-teken (>). Vooraan in een sluitingstag hoort een schuine streep /.

<element>Inhoud</element>

De elementen beschrijven wat de inhoud tussen de openings- en sluitingstags is of hoe ze moet gestructureerd worden.

Enkele voorbeelden van elementen:

  • Alinea-element: <p>
  • Kop-element: <h1>
  • Blokcitaat-element: <blockquote>

Het gebruik van de elementen ziet er in zijn volledigheid als volgt uit:

<h1>Kop van hoogste niveau</h1>
<p>Tekst in een alinea</p>
<blockquote>Een frappant citaat</blockquote>

Sommige tags hebben geen sluitingstag. Deze tags noemen we lege elementen. Een leeg element heeft enkel een openingstag omdat de tag zelf de informatie aan de browser verschaft en niet de inhoud tussen twee tags.

Enkele voorbeelden van lege elementen:

  • Regeleinde-element: <br>
  • Afbeelding-element: <img>
  • Horizontale lijn-element: <hr>

# Witruimte

De browser negeert spaties na de eerste. Dit betekent dat, zowel in de inhoud als de elementen, het gebruik van witruimte weinig tot geen impact heeft op de werking van de webpagina. De volgende twee codeblokken zullen hetzelfde worden gelezen:

<p>Je mag vrij omspringen met witruimte</p>

<p>
    Je mag
    vrij
    omspringen
    met witruimte
</p>

In beide gevallen zal de browser één lijn tekst tonen, waarbij de nieuwe lijnen worden vervangen met slechts één spatie.

# Commentaar

Je kan commentaar toevoegen aan HTML-code door gebruik te maken van een speciaal commentaarelement. Dit element wijkt af van andere elementen door de toevoeging van !-- in de openingstag en -- in de sluitingstag.

<!-- Deze lijn wordt gezien als commentaar -->

Dit is zeer handig om je eigen code te commentariëren, bv. om uitleg te geven over de structuur (aan jezelf of anderen) of aan te duiden waar er nog iets ontbreekt. Ook commentaar kan over meerdere regels worden gespreid:

<!-- Auteur: Steven Schoovaerts
     Datum van publicatie: 12/10/2019 -->

Commentaarelementen worden genegeerd door de browser, maar zijn nog wel terug te vinden in de broncode van de webpagina!

# Blok- en inline elementen

Elk element kan gecatagoriseerd worden in één van twee categorieën: blokelementen en inline-elementen. Het onderscheid is zeer belangrijk en heeft verregaande gevolgen voor de opmaak van een webpagina. De categorie wordt bij elk besproken element in latere hoofdstukken vermeld.

# Blokelementen

Een blokelement is een element dat een zeer sterke présence heeft in de structuur van de webpagina. Denk hierbij aan een titel, alinea of blokcitaat. Ze staan op zich en zeggen iets over de indeling en betekenis van de inhoud. Het voornaamste kenmerk is dat ze steeds witruimte toevoegen onderaan het element. Ze kunnen dus niet naast elkaar gebruikt worden.

<p>Alinea met tekst.</p>
<p>Nieuwe alinea, met witruimte tussen de vorige.</p>
<blockquote>Citaat, met opnieuw witruimte toegevoegd.</blockquote>

# Nesten

Het is mogelijk blokelementen te nesten. Dit betekent dat een element behoort tot de structuur van het andere element. We praten dan over een ouderelement en kindelement.

In het volgende voorbeeld worden de kop en alinea toegevoegd aan het structurele element <article>.

<article>
    <h1>Titel van artikel</h1>
    <p>Tekst in artikel</p>
</article>

<article> is hier het ouderelement en zowel <h1> als <p> zijn hier kindelementen van <article>. Het beschrijft een duidelijke relatie tussen de elementen. In de praktijk kunnen elementen zeer diep genest worden, met meerdere niveau's van ouder- en kindelementen. Meestal zal deze relatie zeer natuurlijk aanvoelen, omdat het slechts beschrijft wat je in gedachten hebt voor de structuur van de pagina.

# Inline-elementen

Een inline-element onderscheidt zich van een blokelement door geen witruimte toe te voegen bij het gebruik ervan. Het kan dus letterlijk in de lijn van de tekst gebruikt worden. Dit is handig wanneer je een woord of stukje tekst extra betekenis wil geven, zoals een woord bestempelen als sleutelwoord in de tekst of een afbeelding toe te voegen in het midden van een alinea.

In het volgende voorbeeld wordt het inline-element <strong> gebruikt om de nadruk te leggen op een stuk van de zin:

<p>Deze film bevat geweldadige scènes en is <strong>niet geschikt voor kinderen</strong>!</p>

Als je dit in de browser test zal de lijn tekst niet onderbroken worden bij het element <strong>. Het geeft enkel betekenis aan de woorden tussen de openings- en sluitingstag. Inline-element kunnen ook andere elementen bevatten, maar dit is eerder zeldzaam.

# Attributen

Het is mogelijk om elementen te voorzien van extra informatie via attributen. Denk hierbij aan informatie zoals de bron van een afbeelding, de url van een link of de verzendwijze van een formulier. Een attribuut wordt opgenomen in de openingstag. Het bestaat uit de naam van het attribuut, gevolgd door een = (gelijkheidsteken), gevolgd door de waarde van het attribuut tussen " (aanhalingstekens).

<element attribuutnaam="waarde">

Een voorbeeld met een afbeelding en link:

<img src="foto.jpg">
<a href="contactpagina.html">

Je kan ook meerdere attributen aan één element geven, zoals in het geval van een formulier:

<form action="registratie.php" method="post"></form>

Trek je nog niets aan van de betekenis van deze attributen; uitleg komt in latere hoofdstukken aan bod.

Sommige attributen wijken lichtjes af van de algemene schrijfwijze en hebben geen waarde nodig. Het opnemen van de attribuutnaam is dan voldoende informatie.

In het volgende voorbeeld wordt een checkbox automatisch aangevinkt door het opnemen van het attribuut checked.

<input type="checkbox" checked>Getrouwd?</input>

← Opbouw van een webpagina →