Opisz przerwy w HTML i ich zastosowanie.

Spacje w HTML, nazywane również "whitespace", to znaki, które przeglądarka nie wyświetla (spacje, tabulatory, znaki nowej linii). Przeglądarki zazwyczaj łączą je w jedną spację podczas renderowania, z wyjątkiem niektórych elementów i właściwości CSS.

Zastosowanie:

1. Poprawa czytelności kodu: Programiści używają spacji do wizualnego oddzielenia elementów w kodzie źródłowym HTML, co czyni go bardziej zrozumiałym i uporządkowanym. Nie wpływa to na wyświetlanie strony w przeglądarce.

2. Oddzielenie elementów inline: Przeglądarki automatycznie wstawiają spację między elementami inline umieszczonymi obok siebie w kodzie HTML. To zachowanie można zmienić za pomocą CSS.

3. Elementy zachowujące spacje:

   • <pre>: Zachowuje wszystkie spacje i łamania linii, formatując tekst dokładnie tak, jak jest w kodzie źródłowym.
   • <code>: Zazwyczaj używany wewnątrz <pre> do zachowania formatowania kodu.
   • <textarea>: Wewnątrz pola tekstowego spacje i łamania linii są zachowywane.

4. Właściwość CSS white-space: Pozwala kontrolować, jak przeglądarka obsługuje spacje wewnątrz elementu:

   • normal (domyślnie): Łączy spacje, łamania linii są ignorowane (z wyjątkiem <br>).
   • nowrap: Łączy spacje, ale zapobiega łamaniu linii.
   • pre: Równoważne z użyciem tagu <pre>.
   • pre-wrap: Zachowuje spacje i łamania linii, a także pozwala na automatyczne zawijanie tekstu.
   • pre-line: Łączy spacje, ale zachowuje łamania linii.

Przykład łączenia spacji:

HTML:

<p>
    Dużo        spacji

    i
    łamania
    linii
</p>

Wynik w przeglądarce:

Dużo spacji i łamania linii

Przykład z użyciem <pre>:

HTML:

<pre>
    Spacje
        są
            zachowane
    i
    łamania
</pre>

Wynik w przeglądarce:

    Spacje
        są
            zachowane
    i
    łamania

Przykład z użyciem CSS white-space:

HTML:

<div class="pre-wrap">
    Ten tekst będzie zachowywał
        swoje spacje
            i łamania

    linii,
    a także będzie się automatycznie zawijał.
</div>

CSS:

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