HTML'de Kalın ve İtalik Yazı: strong, b, em ve i Et…

Q: HTML'de yazı nasıl kalın yapılır?

Kelimeler önemliyse ile sar ( Warning: ), ek bir önem taşımadan sadece öne çıkmalarını istiyorsan, örneğin bir ürün adı için, ile sar. İkisi de varsayılan olarak kalın görünür.

Q: ile arasındaki fark nedir?

metnin önemli, ciddi ya da acil olduğu anlamına gelir. metne önem yüklemeden dikkat çeker, örneğin bir özetteki anahtar kelimeler. Aynı görünürler; fark anlamdadır ve bu ekran okuyucular, arama motorları ve diğer geliştiriciler için önemlidir.

Q: HTML'de yazı nasıl italik yapılır?

Cümlenin anlamını değiştiren vurgu için kullan ("I did say that" cümlesinde "did" üzerindeki vurgu gibi), farklı bir sesle söylenen metin için de : yabancı kelimeler, teknik terimler, gemi adları, düşünceler. İkisi de italik görünür.

Q: Yazıyı aynı anda nasıl hem kalın hem italik yaparım?

Etiketleri iç içe yaz: text . Açtığın sıranın tersiyle kapat. CSS ile tek bir elemente hem font-weight: bold hem de font-style: italic ver.

Q: Yazıyı CSS ile kalın yapabilir miyim?

Evet: herhangi bir elemente font-weight: bold (ya da 700). Kalınlık tamamen görselse, örneğin bir buton etiketi ya da tablo başlığı stili, CSS kullan; kelimelerin kendisi önemli ya da vurguluysa HTML etiketlerini kullan.

HTML'de Kalın ve İtalik Yazı: strong, b, em ve i Etiketleri

HTML'de metni ya da ile kalın, ya da ile italik yap. Hangi etiketi ne zaman kullanacağını, kalın ve italiği nasıl birleştireceğini ve metni CSS ile nasıl kalın ya da italik yapacağını öğren.

Bu sayfada çalıştırılabilir editörler var - düzenle, çalıştır ve sonucu anında gör.

Yazan Kevin Spektor, Co-founder & CTO

Sep 24, 2026 tarihinde yayınlandı

HTML'de yazı nasıl kalın yapılır

Metni  ya da  ile sar. İkisi de kalın yapar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bold</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p><strong>Warning:</strong> unplug the device before opening it.</p>
  <p>The <b>Pro</b> plan includes offline mode.</p>
</body>
</html>

Aynı görünürler. Fark, metin hakkında ne söyledikleridir.

strong ve b farkı

Etiket	Anlamı	Örnek
`<strong>`	Önemli, ciddi ya da acil içerik	`<strong>Do not</strong> share your password.`
`<b>`	Öne çıkar ama ek bir önem taşımaz	Bir özetteki anahtar kelimeler, bir ürün adı, bir makalenin giriş kelimeleri

Sesini yükselteceğin ya da okurun kaçırmamasını istediğin yerde  seç. Kalınlığın bu tür metinler için görsel bir gelenek olduğu yerde  seç. İkisi de uymuyorsa ve sadece bir stil istiyorsan, class'ı olan bir  ve CSS kullan.

İtalik: em ve i

İtalik ikilisi de aynı mantıkla çalışır:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Italics</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p>I <em>never</em> said she took the money.</p>
  <p>I never said <em>she</em> took the money.</p>
  <p>The word <i lang="fr">déjà vu</i> comes from French, and the ship was the <i>Endurance</i>.</p>
</body>
</html>

Etiket	Anlamı	Örnek
`<em>`	Vurgu: yerini değiştirmek cümlenin anlamını değiştirir	`I <em>never</em> said that.`
`<i>`	Farklı ses: yabancı kelimeler, teknik terimler, gemi adları, düşünceler	`<i lang="la">et cetera</i>`

Yukarıdaki ilk iki cümle aynı kelimeleri kullanır ve  etiketinin nerede durduğuna göre farklı anlamlar taşır.  başka bir dildeki bir ifadeyi işaretlediğinde, ekran okuyucular doğru telaffuz etsin diye bir lang özelliği ekle.

Birkaç etiket daha varsayılan olarak italiktir: <cite> (bir eserin adı), <dfn> (tanımlanan bir terim), <address> ve <var>. Uygun olduklarında bunları kullan ve gerisini varsayılan stilleri halletsin.

Kalın ve italik birlikte

Bir etiketi diğerinin içine yerleştir ve ters sırayla kapat:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bold italic</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p><strong><em>Bold and italic</em></strong></p>
  <p><em>Italic with a <strong>bold</strong> word inside</em></p>
  <p><b><i>b and i together</i></b></p>
</body>
</html>

text (yanlış sırayla kapatmak) yine de görüntülenir, ama tarayıcı ağacı onarmak zorunda kalır ve elementlerini bölebilir; bu onarımın neye benzediğini görmek için etiketler sayfasına bak.

CSS ile kalın ve italik

Stil tamamen görsel olduğunda (bir kart başlığı, bir fiyat, bir etiket), etiket eklemek yerine elementin kendisine CSS uygula. font-weight kalınlığı, font-style italiği kontrol eder:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS bold and italic</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
    .price { font-weight: bold; color: #16a34a; }
    .semi { font-weight: 600; }
    .note { font-style: italic; color: #4b5563; }
    .calm strong { font-weight: normal; color: #dc2626; }
  </style>
</head>
<body>
  <p>Price: <span class="price">$12</span></p>
  <p class="semi">font-weight: 600</p>
  <p class="note">A note set in italics with font-style.</p>
  <p class="calm"><strong>Still strong</strong>, shown in red instead of bold.</p>
</body>
</html>

Son satır anlamın ve görünümün ayrı olduğunu gösterir:  anlamını korurken CSS ona farklı bir stil verir. Kalınlık değerlerinin tamamı (100 ile 900 arası) CSS font-weight sayfasında anlatılıyor.

Erişilebilirlik

Çoğu ekran okuyucu varsayılan ayarlarla  ya da  için sesini değiştirmez, bu yüzden kalın ve italik esas olarak görsel ipuçlarıdır. Kullanıcının kaçırmaması gereken her şey (bir hata, zorunlu bir alan, bir son tarih) yalnızca stilden değil, kelimelerin kendisinden de anlaşılmalı. Uzun italik ya da kalın bölümlerden de kaçın: okunmaları daha zordur, özellikle disleksisi olan okurlar için.

Sık yapılan hatalar

Kalın yazıyı başlık olarak kullanmak. Bir bölümün üstündeki  metni ekran okuyucular için bir başlık değildir. <h2> ya da <h3> kullan ve stil ver.
Stil için  kullanmak. Metinde önemli bir şey yoksa  ya da CSS kullan.
Bütün bir paragrafı kalın yapmak. Vurgu seyrek olduğunda işe yarar. Paragrafı değil, bir ifadeyi kalın yap.
Etiketleri yanlış sırayla kapatmak. x, asla x değil.
Eski etiketler. Eski eğitimlerdeki  etiketi artık kullanılmıyor. Yukarıdaki etiketleri ya da font-weight kullan.

Sıkça Sorulan Sorular

HTML'de yazı nasıl kalın yapılır?

Kelimeler önemliyse  ile sar (Warning:), ek bir önem taşımadan sadece öne çıkmalarını istiyorsan, örneğin bir ürün adı için,  ile sar. İkisi de varsayılan olarak kalın görünür.

ile arasındaki fark nedir?

 metnin önemli, ciddi ya da acil olduğu anlamına gelir.  metne önem yüklemeden dikkat çeker, örneğin bir özetteki anahtar kelimeler. Aynı görünürler; fark anlamdadır ve bu ekran okuyucular, arama motorları ve diğer geliştiriciler için önemlidir.

HTML'de yazı nasıl italik yapılır?

Cümlenin anlamını değiştiren vurgu için  kullan ("I did say that" cümlesinde "did" üzerindeki vurgu gibi), farklı bir sesle söylenen metin için de : yabancı kelimeler, teknik terimler, gemi adları, düşünceler. İkisi de italik görünür.

Yazıyı aynı anda nasıl hem kalın hem italik yaparım?

Etiketleri iç içe yaz: text. Açtığın sıranın tersiyle kapat. CSS ile tek bir elemente hem font-weight: bold hem de font-style: italic ver.

Yazıyı CSS ile kalın yapabilir miyim?

Evet: herhangi bir elemente font-weight: bold (ya da 700). Kalınlık tamamen görselse, örneğin bir buton etiketi ya da tablo başlığı stili, CSS kullan; kelimelerin kendisi önemli ya da vurguluysa HTML etiketlerini kullan.

İlgili kavramlar