HTML’de “<pre>” Etiketi
HTML’de <pre> etiketi, HTML dökümanlarına yazdığınız bir metni olduğu gibi, yani her bir boşluk ve satır sonunu koruyarak ekranda göstermeye yarar. Normalde HTML’de birden fazla boşluk veya satır sonu dikkate alınmaz; tarayıcı bunları tek bir boşluk gibi yorumlar. Ancak <pre> etiketi devreye girdiğinde, her şey tam olarak sizin yazdığınız şekilde görünür.
Bu özellik, özellikle metnin formatının önemli olduğu durumlarda çok kullanışlıdır. Örneğin, kod örnekleri, şiirler ya da boşluklarla düzenlenmiş metinlerde <pre> etiketi hayat kurtarır. Tarayıcı bu etiketi gördüğünde metni sabit genişlikli (monospace) bir yazı tipinde, tıpkı yazıldığı gibi ekrana yansıtır. Yani, hizalamalar bozulmaz, satırlar kaymaz.
Diyelim ki şiir yazıyorsunuz. Bunu <pre> etiketi kullanarak aşağıdaki gibi yazabilirsiniz:
<!DOCTYPE html>
<html>
<body>
<pre>
Korkma! Sönmez bu şafaklarda yüzen al sancak,
Sönmeden yurdumun üstünde tüten en son ocak.
O benim milletimin yıldızıdır, parlayacak;
O benimdir, o benim milletimindir ancak.
</pre>
</body>
</html>Ya da bir JavaScript kod örneği göstermek istiyorsunuz diyelim:
<pre>
function selamVer() {
console.log("Merhaba!");
}
</pre>
Bu örnekte de girintiler, boşluklar ve düzen tamamen korunur. Bu sayede kodunuzu olduğu gibi yazabileceksiniz.
Ancak <pre> etiketini kullanırken dikkat etmeniz gereken bir nokta var: Eğer metniniz çok uzunsa, tarayıcı satır kaydırmaz ve ekranın dışına taşar. Bu durumda yatay bir kaydırma çubuğu oluşur. CSS kullanarak bu duruma müdahale etmeniz gerekecektir.