Beschreiben Sie Leerzeichen in HTML und deren…

HTML-Whitespace, auch "whitespace" genannt, sind Zeichen, die vom Browser nicht angezeigt werden (Leerzeichen, Tabulatoren, Zeilenumbrüche). Browser fassen sie beim Rendern in der Regel zu einem einzigen Leerzeichen zusammen, außer in bestimmten Elementen und CSS-Eigenschaften.

Verwendung:

Verbesserung der Lesbarkeit des Codes: Entwickler verwenden Leerzeichen, um Elemente im HTML-Quellcode visuell zu trennen, was ihn verständlicher und strukturierter macht. Dies beeinflusst nicht die Anzeige der Seite im Browser.
Trennung von Inline-Elementen: Browser fügen automatisch ein Leerzeichen zwischen inline-Elementen ein, die nebeneinander im HTML-Code stehen. Dieses Verhalten kann mit CSS geändert werden.
Elemente, die Leerzeichen bewahren:
- <pre>: Bewahrt alle Leerzeichen und Zeilenumbrüche, formatiert den Text genau so, wie er im Quellcode steht.
- <code>: Wird meist innerhalb von <pre> verwendet, um die Code-Formatierung beizubehalten.
- <textarea>: Innerhalb eines Texteingabefelds werden Leerzeichen und Zeilenumbrüche beibehalten.
CSS-Eigenschaft white-space: Ermöglicht die Steuerung, wie der Browser Leerzeichen innerhalb eines Elements verarbeitet:
- normal (Standard): Faltet Leerzeichen zusammen, Zeilenumbrüche werden ignoriert (außer <br>).
- nowrap: Faltet Leerzeichen zusammen, verhindert aber Zeilenumbrüche.
- pre: Entspricht der Verwendung des <pre>-Tags.
- pre-wrap: Bewahrt Leerzeichen und Zeilenumbrüche, erlaubt aber auch den automatischen Zeilenumbruch bei Bedarf.
- pre-line: Faltet Leerzeichen zusammen, behält aber Zeilenumbrüche bei.

Beispiel für Leerraum-Faltung:

HTML:

<p>
    Viele        Leerzeichen

    und
    Zeilenumbrüche
</p>

Ergebnis im Browser:

Viele Leerzeichen und Zeilenumbrüche

Beispiel mit <pre>:

HTML:

<pre>
    Leerzeichen werden
        alle
            beibehalten
    und
    Zeilenumbrüche
</pre>

Ergebnis im Browser:

    Leerzeichen werden
        alle
            beibehalten
    und
    Zeilenumbrüche

Beispiel mit CSS white-space:

HTML:

<div class="pre-wrap">
    Dieser Text wird seine
        Leerzeichen
            und Zeilenumbrüche

    beibehalten,
    und auch automatisch umbrochen, wenn nötig.
</div>

CSS:

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

Beschreiben Sie Leerzeichen in HTML und deren Verwendung.