Descrivi gli spazi in HTML e il loro utilizzo…

Gli spazi in HTML, chiamati anche "whitespace", sono caratteri che il browser non visualizza (spazi, tabulazioni, caratteri di nuova linea). I browser di solito li comprimono in un singolo spazio durante il rendering, tranne in alcuni elementi e proprietà CSS.

Utilizzo:

Migliorare la leggibilità del codice: Gli sviluppatori usano gli spazi per separare visivamente gli elementi nel codice sorgente HTML, rendendolo più comprensibile e strutturato. Questo non influisce sulla visualizzazione della pagina nel browser.
Separazione di elementi inline: I browser inseriscono automaticamente uno spazio tra gli elementi inline posizionati uno accanto all'altro nel codice HTML. Questo comportamento può essere modificato con CSS.
Elementi che conservano gli spazi:
- <pre>: Conserva tutti gli spazi e i ritorni a capo, formattando il testo esattamente come scritto nel codice sorgente.
- <code>: Di solito usato all'interno di <pre> per mantenere la formattazione del codice.
- <textarea>: All'interno di un campo di testo, gli spazi e i ritorni a capo vengono conservati.
Proprietà CSS white-space: Permette di controllare come il browser gestisce gli spazi all'interno di un elemento:
- normal (predefinito): Comprime gli spazi, i ritorni a capo vengono ignorati (eccetto <br>).
- nowrap: Comprime gli spazi ma impedisce i ritorni a capo.
- pre: Equivale all'uso del tag <pre>.
- pre-wrap: Conserva gli spazi e i ritorni a capo, e permette anche l'interruzione automatica di riga.
- pre-line: Comprime gli spazi, ma conserva i ritorni a capo.

Esempio di compressione degli spazi:

HTML:

<p>
    Molti        spazi

    e
    ritorni
    a capo
</p>

Risultato nel browser:

Molti spazi e ritorni a capo

Esempio con <pre>:

HTML:

<pre>
    Gli spazi sono
        tutti
            conservati
    e
    i ritorni a capo
</pre>

Risultato nel browser:

    Gli spazi sono
        tutti
            conservati
    e
    i ritorni a capo

Esempio con CSS white-space:

HTML:

<div class="pre-wrap">
    Questo testo manterrà
        i suoi spazi
            e i ritorni a capo

    e si adatterà automaticamente alla larghezza.
</div>

CSS:

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

Descrivi gli spazi in HTML e il loro utilizzo.