Kirjeldage HTML-i tühikuid ja nende kasutamist.

HTML tühikud, mida nimetatakse ka "whitespace", on sümbolid, mida brauser ei kuva (tühikud, tabulatsioonid, uue rea märgid). Tavaliselt ühendavad brauserid need renderdamise ajal üheks tühikuks, välja arvatud teatud elemendid ja CSS omadused.

Kasutus:

1. Koodi loetavuse parandamine: Arendajad kasutavad tühikuid visuaalse eraldamise jaoks HTML-koodis, muutes selle arusaadavamaks ja struktureeritumaks. See ei mõjuta lehe kuvamist brauseris.

2. Reaelementide eraldamine: Brauserid lisavad automaatselt tühiku kõrval asuvate reaelementide vahele. Seda käitumist saab CSS-i abil muuta.

3. Elementid, mis säilitavad tühikud:

   • <pre>: Säilitab kõik tühikud ja reavahetused, vormindades teksti täpselt nii, nagu see on lähtekoodis.
   • <code>: Tavaliselt kasutatakse <pre> sees koodi vormindamise säilitamiseks.
   • <textarea>: Tekstiväljal säilivad tühikud ja reavahetused.

4. CSS omadus white-space: võimaldab kontrollida, kuidas brauser töötleb tühikuid:

   • normal (vaikimisi): ühendab tühikud, reavahetused ignoreeritakse (välja arvatud <br>).
   • nowrap: ühendab tühikud, kuid takistab reavahetusi.
   • pre: vastab <pre>-le.
   • pre-wrap: säilitab tühikud ja reavahetused ning võimaldab automaatset reavahetust konteineri laiuse järgi.
   • pre-line: ühendab tühikud, kuid säilitab reavahetused.

Tühikute ühendamise näide:

HTML:

<p>
    Palju        tühikuid

    ja
    reavahetusi
    ridadel
</p>

Tulemus brauseris:

Palju tühikuid ja reavahetusi

Näide <pre> kasutamisest:

HTML:

<pre>
    Säilitatakse
        kõik
            tühikud
    ja
    reavahetused
</pre>

Tulemus brauseris:

    Säilitatakse
        kõik
            tühikud
    ja
    reavahetused

CSS white-space omaduse näide:

HTML:

<div class="pre-wrap">
    See tekst säilitab
        oma tühikud
            ja reavahetused

    read,
    ning jaguneb automaatselt laiuse järgi.
</div>

CSS:

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