pre

pre Nedir?

pre etiketi, HTML’de metnin boşlukları, satır sonları ve girintileri korunarak görüntülenmesini sağlayan bir etikettir. Tarayıcı, pre etiketi içindeki içeriği olduğu gibi render eder ve otomatik boşluk sıkıştırması yapmaz.

Bu özellik sayesinde özellikle kod örnekleri, terminal çıktıları ve formatın bozulmaması gereken metinler güvenli şekilde gösterilebilir.

Ne İşe Yarar?

Boşluk ve satır düzenini aynen korur
Kod örneklerinin okunabilirliğini artırır
Formatlı metinlerin bozulmasını engeller
Sabit genişlikli (monospace) yazı tipi kullanır
Dokümantasyon ve teknik içerikler için uygundur

En Basit Kullanımı

pre etiketi tek başına kullanılarak metnin formatı korunabilir:


<pre>
Bu   metin
  olduğu gibi
    görüntülenir
</pre>

Örnek Kullanımlar

Kod Bloklarını Gösterme


<pre>
<?php
echo "Merhaba Dünya";
?>
</pre>

code Etiketi ile Birlikte Kullanımı

pre etiketi genellikle code etiketiyle birlikte kullanılır. Bu kullanım, kod örneklerinin hem formatını hem de anlamsal yapısını korur.


<pre><code>
<h1>Başlık</h1>
<p>Paragraf</p>
</code></pre>

ASCII ve Formatlı Metinler


<pre>
*****
*   *
*****
</pre>

Ne Zaman Kullanılır?

Kod örnekleri paylaşılırken
Terminal veya log çıktıları gösterilirken
Boşluk ve satır düzeninin korunması gerektiğinde
Teknik dokümantasyon içeriklerinde

Küçük İpuçları

Uzun satırlar için CSS ile overflow kontrolü yapın
Mobil cihazlarda taşma ihtimalini test edin
Daha iyi okunabilirlik için pre ile birlikte code kullanın
Gereksiz büyük metinlerde kullanmaktan kaçının

1 ay önce

pre