Beschrijf de spaties in HTML en hun gebruik.

Spaties in HTML, ook wel "whitespace" genoemd, zijn tekens die de browser niet weergeeft (spaties, tabs, nieuwe regeltekens). Browsers combineren ze meestal tot één spatie tijdens het renderen, behalve in bepaalde elementen en CSS-eigenschappen.

Gebruik:

1. Verbetering van de leesbaarheid van de code: Ontwikkelaars gebruiken spaties om elementen visueel te scheiden in de HTML-broncode, waardoor deze begrijpelijker en gestructureerder wordt. Dit beïnvloedt de weergave van de pagina niet in de browser.

2. Scheiding van inline-elementen: Browsers voegen automatisch een spatie toe tussen inline-elementen die naast elkaar in de HTML-code staan. Dit gedrag kan worden aangepast met CSS.

3. Elementen die spaties behouden:

   • <pre>: Behoudt alle spaties en regelafbrekingen, en formatteert de tekst precies zoals deze in de broncode staat.
   • <code>: Wordt meestal binnen <pre> gebruikt om de code-opmaak te behouden.
   • <textarea>: Binnen een tekstinvoerveld worden spaties en regelafbrekingen behouden.

4. CSS-eigenschap white-space: Hiermee kan worden geregeld hoe de browser omgaat met spaties binnen een element:

   • normal (standaard): Combineert spaties, regelafbrekingen worden genegeerd (behalve <br>).
   • nowrap: Combineert spaties, maar voorkomt regelafbrekingen.
   • pre: Komt overeen met het gebruik van de <pre>-tag.
   • pre-wrap: Behoudt spaties en regelafbrekingen, en staat ook automatische regelafbreking toe afhankelijk van de breedte van de container.
   • pre-line: Combineert spaties, maar behoudt regelafbrekingen.

Voorbeeld van spatie-compressie:

HTML:

<p>
    Veel        spaties

    en
    regelafbrekingen
</p>

Resultaat in de browser:

Veel spaties en regelafbrekingen

Voorbeeld met <pre>:

HTML:

<pre>
    Spaties worden
        allemaal
            behouden
    en
    regelafbrekingen
</pre>

Resultaat in de browser:

    Spaties worden
        allemaal
            behouden
    en
    regelafbrekingen

Voorbeeld met CSS white-space:

HTML:

<div class="pre-wrap">
    Deze tekst behoudt
        zijn spaties
            en regelafbrekingen

    en past zich automatisch aan de breedte aan.
</div>

CSS:

.pre-wrap {
    white-space: pre-wrap;
    border: 1px solid black;
    width: 150px;
}