HTML’de Kod Gösterim Etiketleri ile Kod Yapısı Oluşturma

HTML, web sayfalarında kod veya komutları anlaşılır bir şekilde göstermek için çeşitli etiketler sunar. Kod parçalarını, klavye komutlarını veya terminal çıktısı gibi bilgileri göstermek için kullanılan bu etiketler, kodun okunabilirliğini ve anlaşılabilirliğini artırır. Bu içerikte HTML’de kod gösteriminde kullanılan en yaygın etiketleri ve işlevlerini keşfedeceksiniz.

Kod Satırlarını Belirtmek için <code> Etiketi

<code> etiketi, kısa kod parçalarını ve komutları belirtmek için kullanılır. Bu etiket ile gösterilen metin, yazı tipi olarak monospace (tek aralıklı) yazı tipiyle görüntülenir. Ancak biçimlendirme için satır başlarını veya boşlukları korumaz; bu yüzden daha kısa kod satırları için uygundur.

<p>Python'da bir değişken tanımlamak için <code>x = 5</code> ifadesini kullanabilirsiniz.</p>

Biçimlendirilmiş Kod Blokları için <pre> Etiketi

Kodun satır başlarını, boşluklarını ve satır sonlarını koruyarak biçimlendirilmiş bir şekilde göstermek için <pre> etiketi kullanılır. Bu etiket ile yazılan kod, satır boşluklarıyla birlikte olduğu gibi görüntülenir ve genellikle <code> etiketi ile birlikte kullanılır. Örneğin, bir fonksiyon veya uzun kod parçaları için ideal bir seçimdir.

<pre><code>
function greet(name) {
    console.log("Hello, " + name + "!");
}
</code></pre>

Klavye Girişleri için <kbd> Etiketi

Bir klavye girişini belirtmek için <kbd> etiketi kullanılır. Özellikle bir komut ya da tuş kombinasyonunu belirtmek amacıyla kullanıldığında, kullanıcıların hangi tuşlara basması gerektiğini açıkça ifade eder.

<p>Sayfayı yenilemek için <kbd>Ctrl</kbd> + <kbd>R</kbd> tuşlarına basın.</p>

Çıktıları Göstermek için <samp> Etiketi

Bir komut veya program çıktısını belirtmek için <samp> etiketi tercih edilir. Bu etiket, bir programın veya kod parçasının kullanıcıya verdiği çıktıyı göstermek için idealdir.

<p>Programın çıktısı aşağıdaki gibidir:</p>
<samp>Merhaba, dünya!</samp>

Değişken İsimleri için <var> Etiketi

Matematiksel veya programlama ile ilgili ifadelerde değişkenleri göstermek için <var> etiketi kullanılır. Özellikle formüllerde veya kod parçalarında değişkenleri belirtmek için idealdir.

<p>Karenin alanı <var>a</var> x <var>a</var> olarak hesaplanır.</p>

Etiketlerin Birlikte Kullanımı

HTML’de kodları daha okunaklı hale getirmek için bu etiketleri bir arada kullanabilirsiniz. Örneğin, <pre> ile biçimlendirme yaparken <code> etiketi ile kod olduğuna vurgu yapabilir veya <kbd> ile klavye girişlerini gösterebilirsiniz.

Sonuç

HTML kod gösterim etiketleri, bir web sayfasında kodu doğru ve anlaşılır bir şekilde sunmak için çok faydalıdır. <code>, <pre>, <kbd>, <samp>, ve <var> etiketlerini doğru bir şekilde kullanarak, kod ve komutları okuyucularınıza net ve düzenli bir biçimde gösterebilirsiniz.