Opisati razmake u HTML-u i njihovu upotrebu.

Razmaci u HTML-u, takođe nazvani "whitespace", su simboli koje pretraživač ne prikazuje (razmaci, tabovi, karakteri novog reda). Pretraživači ih obično sažimaju u jedan razmak tokom renderovanja, osim u određenim elementima i CSS svojstvima.

Upotreba:

Poboljšanje čitljivosti koda: Programeri koriste razmake za vizuelno razdvajanje elemenata u HTML izvornom kodu, čineći ga razumljivijim i strukturiranijim. To ne utiče na prikaz stranice u pretraživaču.
Razdvajanje inline elemenata: Pretraživači automatski ubacuju razmak između inline elemenata postavljenih jedan pored drugog u HTML kodu. Ovo ponašanje može biti izmenjeno pomoću CSS.
Elementi koji čuvaju razmake:
- <pre>: Čuva sve razmake i prelome linija, formatira tekst tačno onako kako je u izvornom kodu.
- <code>: Obično se koristi unutar <pre> za očuvanje formatiranja koda.
- <textarea>: Unutar polja za unos teksta, razmaci i prelomi linija se čuvaju.
CSS svojstvo white-space: Omogućava kontrolu kako pretraživač obrađuje razmake unutar elementa:
- normal (podrazumevano): Sažima razmake, prelomi linija se ignorišu (osim <br>).
- nowrap: Sažima razmake, ali sprečava prelome linija.
- pre: Ekvivalentno korišćenju <pre> taga.
- pre-wrap: Čuva razmake i prelome linija, i omogućava automatsko prelamanje teksta prema širini kontejnera.
- pre-line: Sažima razmake, ali čuva prelome linija.

Primer sažimanja razmaka:

HTML:

<p>
    Mnogo        razmaka

    i
    preloma
    linija
</p>

Rezultat u pretraživaču:

Mnogo razmaka i preloma linija

Primer sa <pre>:

HTML:

<pre>
    Čuvaju se
        svi
            razmaci
    i
    prelomi
</pre>

Rezultat u pretraživaču:

    Čuvaju se
        svi
            razmaci
    i
    prelomi

Primer sa CSS white-space:

HTML:

<div class="pre-wrap">
    Ovaj tekst će sačuvati
        svoje razmake
            i prelome

    linija,
    i automatski će se prilagođavati širini.
</div>

CSS:

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