🎨 HTML’de Metin Biçimlendirme Etiketleri

Web Sayfalarına Stil Katmanın Anahtarı (Ama CSS’e Küsmüyoruz)

Bir web sayfası düşün…
Kodlar düzgün, her şey çalışıyor ama metinler ruhsuz.
İşte burada HTML metin biçimlendirme etiketleri sahneye çıkar ve der ki:

“Ben sadece yazı değilim, anlamım da var.”

Bu yazıda:

• “Hangisi ne işe yarar?” sorusuna net cevaplar
• “Gerçek hayatta bunu nerede kullanırım?” örnekleri
• “Bunu yapma, sonra pişman olursun” uyarıları
  bulacaksın.

🅱️ <b> vs <strong>

Kalın Yazı Savaşı: Görünüş mü, Anlam mı?

İlk bakışta aynı gibi duran ama arka planda çok farklı çalışan iki etiketle başlıyoruz.

🔹 <b> – Görsel Güç Gösterisi

<p>Bu ürün <b>çok dayanıklıdır</b>.</p>

• Sadece kalın gösterir
• Anlamsal bir önemi yoktur
• “Gözünüze çarpması için” kullanılır

📌 Menü isimleri, arayüz metinleri, dikkat çekici ama kritik olmayan yerler için idealdir.

🔹 <strong> – “Buraya Dikkat!” Etiketi

<p><strong>Bu işlem geri alınamaz.</strong></p>

• Kalın + anlam
• Ekran okuyucular bu kısmı vurgulu okur
• SEO açısından daha değerlidir

🧠 Pratik ipucu:

Uyarı, önemli bilgi, kritik mesaj → strong

✨ <i> vs <em>

Eğik Yazı Ama Felsefesi Var

🔹 <i> – Stil Ama Mesaj Yok

<p>Bu kelime <i>Latincedir</i>.</p>

• Görsel eğiklik
• Yabancı kelimeler
• Kitap, film isimleri

📖 Akademik ve içerik sitelerinde çok kullanılır.

🔹 <em> – Duygusal Vurgu

<p>Bu işi <em>gerçekten</em> bitirmeliyiz.</p>

• Anlam vurgusu yapar
• Sesli okuyucular ton değiştirir
• İçeriğe duygu katar

🎭 HTML’in drama queen’i diyebiliriz.

✏️ <u> – Altı Çizili Ama Dikkatli Ol

<p>Bu kelime <u>özellikle</u> vurgulandı.</p>

⚠️ Tehlike bölgesi:
Altı çizili yazılar genelde link sanılır.

👉 Tavsiye:

• Gerçekten özel durumlar dışında kullanma
• CSS ile farklı bir vurgu tercih et

🖍️ <mark> – Fosforlu Kalem Etkisi

<p>Bu bilgi <mark>sınavda çıkar</mark>.</p>

• Arka planı sarı yapar
• Kullanıcı gözü direkt buraya gider

📌 Nerede kullanılır?

• Arama sonuçlarında eşleşen kelimeler
• Önemli notlar
• Eğitim içerikleri

🎓 “Buraya bak!” demenin HTML’ce yolu.

🔍 <small> – Küçük Yazı, Büyük İş

<p>Üyelik ücreti 99₺ <small>(aylık)</small></p>

• Yardımcı bilgiler
• Dipnotlar
• Footer metinleri

🧠 İpucu:
Small = Önemsiz değil, ikincil bilgi

❌ <del> ve ✅ <ins>

Geçmişi Sil, Yeniyi Yaz

<p>
  <del>Eski sürüm</del>
  <ins>Yeni sürüm</ins>
</p>

• <del> → Silinen içerik
• <ins> → Eklenen içerik

🛒 E-ticaret, changelog, güncelleme notları için birebir.

💡 CSS ile renklendirince etkisi ikiye katlanır.

🧪 <sub> ve <sup>

Bilim, Matematik ve Minik Simgeler

<p>CO<sub>2</sub> gazı</p>
<p>2<sup>3</sup> = 8</p>

• <sub> → Alt simge
• <sup> → Üst simge

📐 Matematik formülleri
🧬 Kimya denklemleri
📊 İstatistik açıklamaları

🧱 Gerçek Hayat Senaryosu (Mini Proje)

<article>
  <h2><strong>HTML Metin Biçimlendirme</strong></h2>

  <p>
    Bu ders <em>özellikle</em>
    <mark>yeni başlayanlar</mark> için hazırlandı.
    <small>(Kaçırma)</small>
  </p>

  <p>
    <del>Ezberle</del>
    <ins>Anla</ins>
  </p>
</article>

🎉 Bu kod:

• Anlamlı
• Okunabilir
• SEO dostu

🚫 En Sık Yapılan Hatalar

❌ Her şeyi <b> ile kalın yapmak
❌ Anlam varken görsel etiket kullanmak
❌ <mark>’ı her cümlede kullanmak
❌ HTML ile stil yapmaya çalışıp CSS’i unutmak

🧠 Altın Kurallar (Bunu Kaydet)

• HTML → Ne anlama geliyor?
• CSS → Nasıl görünüyor?
• Anlam varsa → semantic etiket
• Gösteriş varsa → stil etiketi

🎯 Kısa Ama Net Özet