HTML Alıntı ve Kod Etiketleri: blockquote, q, cite, code, pre, kbd, samp, var

blockquote: Blok halinde uzun alıntı

<blockquote> içindeki metnin genişletilmiş, uzun bir alıntı olduğunu belirtir. Tarayıcılar onu genellikle girintili gösterir; girintiyi değiştirmek isterseniz CSS kenar boşluğu özellikleriyle oynarsınız. Öğenin kendine ait tek özniteliği cite'tır: Alıntının kaynağını gösteren bir URL alır. Bu URL, alıntının bağlamını ya da referansını açıklayan bir sayfaya işaret etmek için düşünülmüştür ve sayfada görünmez.

MDN'in kullanım notlarında önemli bir kural vardır: Spesifikasyona göre alıntıyı kime ait olduğunu belirten atıf metni, eğer varsa, <blockquote> öğesinin dışında yer almalıdır. Yani "Ahmet Yılmaz, Kitabın Adı" satırını alıntının içine bir paragraf olarak eklemezsiniz. MDN'in örneklerinden biri bunu <figure> ve <figcaption> ile çözer: Alıntı <figure> içinde, atıf ise <figcaption> içindedir.

<figure>
  <blockquote cite="https://ornek.com/roman/ilk-bolum">
    <p>Sabahın ilk ışıkları kasabanın taş sokaklarına düştüğünde
    kimse olacakları tahmin edemezdi.</p>
  </blockquote>
  <figcaption>
    İlk cümle, <cite>Taş Sokaklar</cite> romanından (Bölüm 1).
  </figcaption>
</figure>

<blockquote> akış içeriği alır; yani içine paragraflar, listeler ya da başka bloklar koyabilirsiniz. Teknik özette "sectioning root" kategorisinde de listelenir ve varsayılan ARIA rolü blockquote'tur. Akış içeriği kabul eden her öğenin içinde durabilir; ancak bir <p> yalnızca cümle içi içerik (phrasing content) aldığı için <blockquote>'u bir paragrafın içine yerleştiremezsiniz.

q: Cümle içinde kısa alıntı

<q>, paragraf sonu gerektirmeyen kısa ve satır içi alıntılar içindir. MDN, modern tarayıcıların çoğunun bu öğenin içeriğini tırnak işaretleriyle çevrelediğini belirtir. Bu yüzden <q> kullanırken metne ayrıca tırnak işareti yazmazsınız; yazarsanız tırnaklar çift görünebilir. <blockquote> gibi o da kaynağın URL'sini vermek için cite özniteliğini kabul eder. İçerik modeli cümle içi içeriktir ve varsayılan rolü generic'tir.

<p>
  Destek ekibi yanıtında
  <q cite="https://ornek.com/destek/yanit-123">sorun DNS kaydındaki küçük bir yazım hatasından kaynaklanıyor</q>
  dedi.
</p>

cite: Bir eserin adı

<cite> öğesi yaratıcı bir eserin başlığını işaretler. MDN'in verdiği liste oldukça geniştir: kitap, araştırma makalesi, deneme, şiir, müzik notası, şarkı, oyun ya da film senaryosu, film, televizyon programı, oyun, heykel, resim, tiyatro yapımı, opera, müzikal, sergi, hukuki dava raporu, bilgisayar programı, web sitesi, web sayfası, blog yazısı veya yorumu, forum gönderisi, sosyal medya paylaşımı ve yazılı ya da sözlü bir açıklama. Atıf, bağlama uygun kısaltılmış bir biçimde de olabilir; MDN örneğinde bir standart kodu köşeli parantez içinde <cite> ile verilir.

İki şey sık karıştırılır. Birincisi, <cite> öğesi ile cite özniteliği farklıdır: Öğe sayfada görünen eser adını işaretler, öznitelik ise <blockquote> ve <q> üzerinde görünmeyen bir kaynak URL'si taşır. MDN, alıntının kaynağına bir referans eklemek için özniteliğin kullanılmasını söyler. İkincisi, <cite> kişinin adı için değil eserin adı içindir; yukarıdaki örnekte yazarın adı düz metindir, yalnızca roman adı <cite> içindedir. Tarayıcılar <cite> içeriğini varsayılan olarak eğik yazar; bunu istemezseniz CSS ile değiştirebilirsiniz.

code ve pre: Kod parçası ve biçimi korunan metin

<code>, içeriğinin kısa bir bilgisayar kodu parçası olduğunu belirtir ve tarayıcının varsayılan eş aralıklı yazı tipiyle gösterilir. MDN'e göre tek başına yalnızca bir ifadeyi ya da tek bir kod satırını temsil eder. Birden fazla satırlık kod göstermek istediğinizde <code> öğesini bir <pre> içine sararsınız. <code> cümle içi içeriktir ve varsayılan ARIA rolü code'dur.

<pre> ise HTML dosyasında yazıldığı gibi gösterilecek, önceden biçimlendirilmiş metni temsil eder. İçindeki boşluklar ve satır sonları aynen korunur, tek bir istisnayla: Açılış etiketinin hemen ardından bir veya daha fazla satır sonu varsa, HTML ayrıştırıcısı ilk satır sonunu atar. Bu dönüşüm XHTML'de uygulanmaz. <pre> varsayılan olarak blok düzeyinde bir öğedir, akış içeriğidir ve içine cümle içi içerik alır; bu yüzden <code>, <samp> ve <kbd> öğelerini içerebilir. MDN bu üçünün <pre> içinde sıkça bulunduğunu, sırasıyla bilgisayar kodunu, bilgisayar çıktısını ve kullanıcı girdisini temsil ettiğini belirtir.

<pre> üzerinde eski width ve wrap öznitelikleri de vardır. MDN'e göre width teknik olarak hâlâ uygulansa da görsel bir etkisi yoktur, wrap ise modern tarayıcılarda yok sayılır. Genişlik ve satır kaydırma için CSS kullanılır.

pre içinde HTML göstermek: Kaçış kuralı

<pre> içeriği yine HTML olarak ayrıştırılır. Bu yüzden bir HTML örneğini olduğu gibi yazarsanız etiketler metin olarak görünmez, gerçek etiket gibi işlenir. MDN burada basit bir kural önerir: Önce içeriği görünmesini istediğiniz gibi yazın, sonra tüm & karakterlerini & ile, ardından tüm < karakterlerini < ile değiştirin. Sıra önemlidir: Önce ve işaretlerini dönüştürürseniz ikinci adımda üretilen yeni & karakterleri tekrar kaçışlanmaz. > ve tırnak gibi diğer karakterleri dönüştürmek isteğe bağlıdır ama zarar vermez. Karakter referanslarının tamamı için HTML entity yazısına bakabilirsiniz.

<pre><code>&lt;nav&gt;
  &lt;a href="/"&gt;Ana sayfa&lt;/a&gt;
&lt;/nav&gt;
if (a &lt; 10 &amp;&amp; b &gt; 0) { }
</code></pre>

Bu örnekte tarayıcı ekranda gerçek bir menü değil, <nav> ve <a> etiketlerinin kendisini metin olarak gösterir. Son satırdaki karşılaştırma ve mantıksal "ve" işleci de karakter referanslarıyla yazıldığı için doğru görünür.

<figure>
  <pre role="img" aria-label="Sunucu ile istemci arasındaki bağlantı şeması">
[ İstemci ] ----&gt; [ Sunucu ]
  </pre>
  <figcaption>İstemcinin sunucuya istek göndermesini gösteren metin çizimi.</figcaption>
</figure>

kbd: Kullanıcı girdisi

<kbd>, kullanıcının girdiği bilgiyi, çoğunlukla klavye girdisini temsil eder ve eş aralıklı yazı tipiyle gösterilir. Tek bir tuş, bir tuş birleşimi ya da yazılması gereken bir komut olabilir. MDN, birden çok tuştan oluşan bir girdiyi göstermek için iç içe <kbd> kullanılabileceğini anlatır: Dıştaki öğe girdinin bütününü, içteki her öğe tek bir tuşu temsil eder. Dıştaki sarmalayıcıyı kullanmak zorunlu değildir; yalnızca tuşları ayrı ayrı işaretlemek de geçerlidir.

<p>Yeni bir sekme açmak için <kbd><kbd>Ctrl</kbd>+<kbd>T</kbd></kbd> tuşlarına basın.</p>
<p>Sunucuya bağlanmak için <kbd>ssh kullanici@sunucu</kbd> komutunu yazın.</p>

<kbd> ile <samp> birlikte kullanıldığında iç içe sıralama anlamı değiştirir. <kbd>, bir <samp> içindeyse sistemin kullanıcıya geri yansıttığı girdiyi temsil eder; örneğin bir aracın hata mesajında yazdığınız komutu tekrar göstermesi. <samp>, bir <kbd> içindeyse ekranda sistemin sunduğu bir metne dayanan girdiyi temsil eder; örneğin tıklamanız gereken bir menü adı ya da düğme etiketi.

<p>Ayarları kaydetmek için <kbd><samp>Kaydet</samp></kbd> düğmesine tıklayın.</p>

samp: Program çıktısı

<samp>, bir bilgisayar programından alınmış örnek ya da alıntılanmış çıktıyı satır içinde işaretler ve genellikle eş aralıklı bir yazı tipiyle gösterilir. MDN önemli bir ayrım yapar: Sitenizin veya uygulamanızın JavaScript kodunun ürettiği çıktı için bir kap arıyorsanız <samp> değil, <output> öğesi kullanılmalıdır. <samp> anlatılan, belgelenen bir çıktıdır; <output> ise sayfanın canlı hesaplama sonucudur. <output> öğesinin ayrıntıları progress, meter ve output yazısında var.

Bir terminal oturumunu belgelerken üç öğe bir arada kullanılır: <pre> boşlukları korur, <samp> oturumun tamamını çıktı olarak işaretler, içindeki <kbd> ise kullanıcının yazdığı komutu ayırır.

<pre><samp>kullanici@sunucu:~$ <kbd>php -v</kbd>
PHP sürüm bilgisi burada görünür
kullanici@sunucu:~$ </samp></pre>

var: Değişken adı

<var>, matematiksel bir ifadedeki ya da programlama bağlamındaki bir değişkenin adını temsil eder. Tarayıcıların çoğu onu eğik yazar, ama MDN bu davranışın tarayıcıya bağlı olduğunu belirtir. <var> yalnızca biçim için kullanılmamalıdır: Bir metni sadece eğik göstermek istiyorsanız MDN, <span> ile CSS kullanmayı ya da anlamına uygun öğeyi seçmeyi önerir; alternatif olarak <em>, <i> ve <q> öğelerini sayar.

<p>Dikdörtgenin alanı <var>a</var> × <var>b</var> ile bulunur.</p>
<p><var>maxBaglanti</var> değeri aynı anda açılabilecek bağlantı sayısını belirler.</p>

Hangi öğe ne anlatır? Özet tablo

Uygulamalı mini örnek: Bir kurulum notu

Aşağıdaki kısa belge parçası, bir yazılımın kurulum talimatını anlatırken öğelerin hepsini doğal bir bağlamda kullanır. Komut <kbd>, ekrandaki çıktı <samp>, yapılandırma dosyası <pre> ve <code>, ayardaki değişken <var>, belgeden alınan kural ise <blockquote> içindedir.

<section>
  <h2>Kurulum</h2>
  <p>Terminalde <kbd>npm install</kbd> komutunu çalıştırın. İşlem bittiğinde
  <samp>added 12 packages</samp> benzeri bir satır görürsünüz.</p>
  <p><code>config.json</code> dosyasında <var>port</var> değerini ayarlayın:</p>
  <pre><code>{
  "port": 8080
}</code></pre>
  <blockquote cite="https://ornek.com/belgeler/kurulum">
    <p>Port numarasını değiştirdikten sonra uygulamayı yeniden başlatın.</p>
  </blockquote>
  <p>Kaynak: <cite>Uygulama Kurulum Kılavuzu</cite></p>
</section>

Burada atıf satırının <blockquote> dışında, ayrı bir paragrafta durduğuna dikkat edin. <pre> içindeki JSON karakter referansı gerektirmez, çünkü içinde < ya da & yoktur.

Sık yapılan hatalar

• Atfı blockquote içine yazmak: MDN, alıntının kime ait olduğunu belirten satırın <blockquote> dışında olması gerektiğini belirtir. <figure> ve <figcaption> ya da hemen ardından gelen bir paragraf kullanın.
• q ile birlikte tırnak yazmak: Tarayıcı tırnakları kendisi eklediği için metne ayrıca tırnak koymak çift tırnak görüntüsüne yol açabilir.
• cite öğesini kişi adı için kullanmak: <cite> eserin başlığı içindir. Kaynak URL'si için cite özniteliğini, kişi için düz metni kullanın.
• pre içinde etiketleri kaçışlamamak: <pre> içeriği HTML olarak ayrıştırıldığı için kaçışlanmamış < karakterleri etiket olarak yorumlanır ve kaybolur.
• pre'den hemen sonra gelen boş satırı unutmak: Açılış etiketinden sonraki ilk satır sonu atılır. İkinci bir boş satır bırakırsanız o satır görünür.
• Uygulama çıktısı için samp kullanmak: JavaScript ile hesaplanıp sayfada gösterilen sonuçlar <output> öğesine aittir.
• var ya da cite'ı sadece eğik yazı için kullanmak: Biçim gerekiyorsa CSS, anlam gerekiyorsa doğru öğe kullanılır.

Sık Sorulan Sorular

blockquote içinde cite özniteliği zorunlu mu?

Hayır. cite isteğe bağlı bir özniteliktir ve kaynağın URL'sini taşır. Kaynağı okuyucuya göstermek istiyorsanız, öznitelik sayfada görünmediği için atfı ayrıca metin olarak da yazmanız gerekir.

Çok satırlı kod için yalnızca pre yeterli mi?

<pre> biçimi korur ama içeriğin kod olduğunu söylemez. MDN, çok satırlı kodu <code> öğesini <pre> içine sararak göstermeyi önerir; böylece hem boşluklar korunur hem de içeriğin kod olduğu belirtilir.

kbd ve code arasındaki fark nedir?

<code> bir kod parçasıdır, <kbd> ise kullanıcının yapması gereken girdidir. "git status komutu çalışma ağacının durumunu gösterir" cümlesinde komut adı koddur; "Terminalde git status yazın" cümlesinde ise kullanıcı girdisidir ve <kbd> daha uygundur.

pre içinde her zaman code mu kullanılır?

Hayır. <pre> yalnızca biçimin korunacağını söyler; içindeki metnin türünü siz belirlersiniz. MDN, <pre> öğesinin sıklıkla <code>, <samp> ve <kbd> içerdiğini, bunların sırasıyla kod, program çıktısı ve kullanıcı girdisi anlamına geldiğini belirtir. Bir terminal dökümü için <samp>, bir yapılandırma dosyası için <code> seçersiniz; ASCII çizimi gibi bu üçüne de uymayan içerikte <pre> tek başına kalabilir.

Bu öğelerin görünümünü değiştirebilir miyim?

Evet. MDN, <code>, <kbd>, <samp> ve <var> için varsayılan yazı tipinin CSS ile değiştirilebileceğini, ancak kullanıcının tarayıcı tercihlerinin sizin CSS'inizin önüne geçebileceğini belirtir.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: HTML öğrenme rehberi · strong, b, i ve mark etiketleri · HTML entity nedir · progress, meter ve output · lang ve dir öznitelikleri · HTML sık yapılan hatalar