HTML'deki boşlukları ve kullanımını açıklayın…

HTML'deki boşluklar, diğer adıyla "whitespace", tarayıcı tarafından gösterilmeyen karakterlerdir (boşluklar, sekmeler, yeni satır karakterleri). Tarayıcılar genellikle bunları işlerken tek bir boşluk haline getirir, belirli elementler ve CSS özellikleri hariç.

Kullanım:

Kod okunabilirliğini artırmak: Geliştiriciler, HTML kaynak kodunda görsel olarak ayırmak için boşluklar kullanır, böylece kod daha anlaşılır ve yapılandırılmış olur. Bu, sayfanın tarayıcıda görüntülenmesini etkilemez.
Satır içi elementleri ayırmak: Tarayıcılar, yan yana yerleştirilmiş satır içi elementler arasında otomatik olarak boşluk ekler. Bu davranış CSS ile değiştirilebilir.
Boşlukları koruyan elementler:
- <pre>: Tüm boşlukları ve satır sonlarını korur, metni tam olarak kaynak kodundaki gibi biçimlendirir.
- <code>: Genellikle <pre> içinde kullanılır, kod biçimlendirmesini korur.
- <textarea>: Metin giriş alanında boşluklar ve satır sonları korunur.
CSS white-space özelliği: Bir element içindeki boşlukların nasıl işleneceğini kontrol etmeye olanak tanır:
- normal (varsayılan): Boşlukları birleştirir, satır sonları göz ardı edilir ( <br> hariç ).
- nowrap: Boşlukları birleştirir, ancak satır sonlarını engeller.
- pre: <pre> etiketi kullanımıyla aynıdır.
- pre-wrap: Boşlukları ve satır sonlarını korur, aynı zamanda otomatik satır kırma yapar.
- pre-line: Boşlukları birleştirir, satır sonlarını korur.

Boşlukların birleştirilmesine örnek:

HTML:

<p>
    Çok fazla boşluk

    ve
    satır sonları
</p>

Tarayıcıda sonuç:

Çok fazla boşluk ve satır sonları

<pre> kullanımıyla örnek:

HTML:

<pre>
    Boşluklar
        korunur
            tam
    ve
    satır sonları
</pre>

Tarayıcıda sonuç:

    Boşluklar
        korunur
            tam
    ve
    satır sonları

CSS white-space kullanımıyla örnek:

HTML:

<div class="pre-wrap">
    Bu metin boşluklarını
        koruyacak
            ve satır sonlarını

    da içerecek
    ve genişliğe göre otomatik kırılacak.
</div>

CSS:

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

HTML'deki boşlukları ve kullanımını açıklayın.