Taak

Bekijk de meegeleverde HTML-code en voorspel hoe de pagina eruit zal zien in de browser. Er zijn drie <div>-elementen, elk met een combinatie van een inline- en een blokniveau-element.

<div>
  <span>This is an inline element</span>
  This is a block-level element.
</div>

<div>
  This is a block-level element.
  <span>This is an inline element</span>
</div>

<div>
  This is a block-level element.
  <span>This is an inline element</span>
  This is another block-level element.
</div>

Vragen om te overwegen:

1. Hoe zullen de inline- en blokniveau-elementen binnen elke <div> op elkaar reageren?
2. Hoe beïnvloedt de volgorde van de elementen de lay-out?
3. Wat is de visuele hiërarchie van inline- en blokniveau-elementen binnen elke <div>?

1. Hoe zullen de inline- en blokniveau-elementen binnen elke <div> op elkaar reageren?
   • In de eerste en tweede <div> verschijnt het <span>-element (inline) vóór de tekst (blokniveau);
   • In de derde <div> staat het <span>-element tussen de tekst (blokniveau).
2. Hoe beïnvloedt de volgorde van de elementen de lay-out?
   • In de eerste <div> zal de tekst "This is a block-level element." waarschijnlijk onder het inline-element verschijnen vanwege het standaard blokniveau-gedrag van de <div>-container;
   • In de tweede <div> is de volgorde van de elementen omgekeerd, dus de tekst zal waarschijnlijk boven het inline-element verschijnen;
   • In de derde <div> zijn de tekst en het inline-element afgewisseld, dus de lay-out zal de tekst en het inline-element in volgorde tonen.
3. Wat is de visuele hiërarchie van inline- en blokniveau-elementen binnen elke <div>?
   • Het inline-element (<span>) zal waarschijnlijk inline met de tekst verschijnen in alle gevallen, maar de positie kan variëren afhankelijk van de volgorde van de elementen binnen de <div>.