Biçimlendirme ve Vurgulama Etiketleri

Bugün HTML'nin birçok temel etiketini ele alacağız. Bu etiketler, web sayfalarınızda metin düzenleme, vurgulama ve farklı görseller oluşturmanıza yardımcı olur. br, hr, b, strong, em, mark, sup, sub, i gibi etiketleri nasıl kullanacağınızı öğrenmek, içeriklerinizi zenginleştirecektir.

1. br: Satır Sonu (Line Break)

Nedir?

• br, içeriğin bir sonraki satıra geçmesini sağlar.
• Kapanış etiketi yoktur, şu şekilde kullanılır: <br>.

Kullanım Örneği:

<p>
  Göklerde kartallar süzülür<br>
  Denizler dalgalanır durur<br>
  Ufuklar sonsuz bir yol<br>
</p>

Sonuç:

• Her bir br etiketi metni bir alt satıra taşır.

2. hr: Yatay Çizgi (Horizontal Rule)

Nedir?

• hr, içerik arasında bir yatay çizgi oluşturur ve görsel bir ayrım sağlar.
• Kapanış etiketi yoktur, şu şekilde kullanılır: <hr>.

Kullanım Örneği:

<h1>Başlık</h1>
<hr>
<p>Bu bir paragraftır.</p>

Sonuç:

• Başlık ile paragraf arasında bir yatay çizgi görünür.

3. b: Kalın Metin (Bold)

Nedir?

• b, metni kalın yapar, ancak semantik bir vurgu taşımaz.
• Görsel olarak önemli göstermek istediğiniz metinler için kullanılır.

Kullanım Örneği:

<p>Bu bir <b>kalın</b> metindir.</p>

Sonuç:

• "kalın" kelimesi kalın görünür.

4. strong: Güçlü Vurgu (Strong Emphasis)

Nedir?

• strong, metni kalın yapar ve önemli bir vurgu ifade eder.
• Ekran okuyucular tarafından genellikle daha güçlü okunur.

Kullanım Örneği:

<p>Bu bir <strong>önemli</strong> kelimedir.</p>

Sonuç:

• "önemli" kelimesi kalın görünür ve anlamlı bir vurgu taşır.

5. em: Vurgu (Emphasis)

Nedir?

• em, metni italik yapar ve anlamlı bir vurgu ifade eder.
• Ekran okuyucular bu metni vurgulu bir tonda okuyabilir.

Kullanım Örneği:

<p>Bu metnin <em>vurgulu</em> bir kısmı var.</p>

Sonuç:

• "vurgulu" kelimesi italik görünür ve semantik vurgu taşır.

6. mark: Vurgulanmış Metin (Highlight)

Nedir?

• mark, metni vurgulamak için kullanılır ve genellikle sarı bir arka plan rengi ekler.

Kullanım Örneği:

<p>Bu metnin <mark>vurgulanmış</mark> bir kısmı var.</p>

Sonuç:

• "vurgulanmış" kelimesi sarı arka planla öne çıkar.

7. sup: Üst Simge (Superscript)

Nedir?

• sup, metni yükseltilmiş bir şekilde, yani üst simge olarak gösterir.
• Matematiksel ifadeler ve referanslar için kullanılır.

Kullanım Örneği:

<p>E=mc<sup>2</sup></p>

Sonuç:

• "mc²" formülü, "2" üst simge olarak görünür.

8. sub: Alt Simge (Subscript)

Nedir?

• sub, metni alçaltılmış bir şekilde, yani alt simge olarak gösterir.
• Kimyasal formüller için idealdir.

Kullanım Örneği:

<p>H<sub>2</sub>O, sudur.</p>

Sonuç:

• "H₂O", "2" alt simge olarak görünür.

9. i: İtalik Metin (Italic)

Nedir?

• i, metni italik yapar.
• Semantik bir vurgu taşımaz; genellikle yabancı kelimeler, terimler veya teknik ifadeler için kullanılır.

Kullanım Örneği:

<p>Bu bir <i>italik</i> kelimedir.</p>

Sonuç:

• "italik" kelimesi italik görünür.

Kapsamlı Örnek

<h2>Çeşitli HTML Etiketleri</h2>
<p>
  Göklerde kartallar süzülür<br>
  Denizler dalgalanır durur<br>
  <hr>
  <b>Bu bir kalın metindir</b>, ancak <strong>bu çok önemli bir metindir</strong>.
  <br>
  <em>Bu italik bir vurgu</em>, <i>bu ise normal bir italik kelime</i>, 
  <mark>bu da vurgulanmış bir metin</mark>.<br>
  Einstein'ın formülü: E=mc<sup>2</sup><br>
  Su formülü: H<sub>2</sub>O
</p>

Sonuç:

• Metinler farklı görsel ve semantik özelliklerle düzenlenir.
• Her etiket, kendine has bir stil veya anlam katar.

Özet

Sonuç

En çok kullanılan HTML etiketleri genellikle biçimlendirme (ör. br, hr, b, i) ve vurgulama (ör. strong, em, mark, sup, sub) için tercih edilen etiketlerdir. Projelerin amacına bağlı olarak bu etiketler esnek bir şekilde kullanılabilir, ancak erişilebilirlik ve okunabilirlik ilkelerine de dikkat etmek önemlidir.