HTML Metin Etiketleri: strong, b, i, mark, u, s, small, sub, sup, br

Hızlı karşılaştırma tablosu

Tablodaki 'varsayılan görünüm' sütunu yalnızca tarayıcıların genellikle uyguladığı stili anlatır. MDN bu öğelerin hiçbirinin görünüm için seçilmemesi gerektiğini tekrar tekrar vurgular: bir metni sırf kalın göstermek istiyorsanız CSS'in font-weight, italik için font-style, alt çizgi için text-decoration özelliğini kullanırsınız.

strong ve b: önem mi, yalnızca dikkat mi?

<strong> içeriğin güçlü bir önem, ciddiyet ya da aciliyet taşıdığını belirtir. Bu, bütün sayfa için önemli bir cümle olabileceği gibi, yakınındaki metne göre daha önemli birkaç sözcük de olabilir. MDN'nin kabul ettiği bir başka kullanım, sayfadaki not ya da uyarı paragraflarının etiketini <strong> ile yazmaktır. İç içe kullanılan <strong> öğeleri önem derecesini artırır.

<b> ise içeriğe özel bir önem yüklemeden okuyucunun dikkatini çeker. Eskiden 'Boldface', yani kalın yazı öğesi olarak bilinirdi; MDN, stil bilgisinin HTML4'ten bu yana kullanımdan kaldırıldığını ve öğenin anlamının bu yüzden değiştiğini belirtir. Tipik kullanım alanları bir özetteki anahtar kelimeler, bir incelemedeki ürün adları ya da normalde kalın yazılan ama ek önem taşımayan metinlerdir. MDN, farklı <b> kullanımlarını ayırt etmek için class özniteliği eklemeyi önerir; örneğin bir paragrafın ilk cümlesi için <b class="giris">.

<p>
  <strong>Uyarı:</strong> Cihazı temizlemeden önce fişini çekin.
</p>
<p>
  Bu incelemede <b class="urun">Model A</b> ve <b class="urun">Model B</b>
  kahve makinelerini karşılaştırıyoruz.
</p>

İlk paragrafta 'Uyarı' etiketi gerçekten önemli bir bilgiyi duyurur, bu yüzden <strong> uygundur. İkinci paragrafta ürün adları yalnızca göze çarpsın diye işaretlenmiştir, önem taşımaz; bu yüzden <b> seçilmiştir. MDN, <b> öğesinin başlık işaretlemek için de kullanılmamasını söyler; bölüm adları için h1-h6 başlık etiketleri vardır.

em ve i: vurgu mu, farklı ses tonu mu?

Vurgu öğesi <em>, konuşmada sesle vurgulanan sözcükleri işaretler ve cümlenin anlamını değiştirir. MDN'nin örneğinde olduğu gibi 'Havuçları BEN severim' ile 'Ben HAVUÇLARI severim' (büyük harfli sözcük sesle vurgulanıyor) farklı şeyler söyler; <em> bu farkı işaretlemek içindir. İç içe kullanıldığında her seviye daha güçlü bir vurgu anlamına gelir. <strong> ise önem bildirir, vurgu değil: 'Dikkat! Bu çok tehlikeli.' cümlesindeki önem <strong> işidir. MDN, HTML 4'ün <strong> öğesini daha güçlü vurgu olarak tanımladığını, güncel standardın ise onu içeriğin güçlü önemi olarak tanımladığını not eder.

<i> ise çevresindeki metinden bir nedenle ayrılan metin içindir ve okunurken ek vurgu taşımaz. MDN'nin saydığı kullanım alanları şunlardır:

• Farklı bir ses ya da ruh hali, örneğin bir karakterin iç sesi veya düşüncesi
• Bilimsel sınıflandırma adları (cins ve tür adları gibi)
• Başka bir dilden alınmış deyimler; bunlara lang özniteliği eklenmelidir
• Teknik terimler ve harf çevirileri (transliterasyon)
• Batı yazı sistemlerinde gemi ve deniz taşıtı adları

<p>
  Latince <i lang="la">carpe diem</i> deyimi "anı yaşa" anlamına gelir.
</p>
<p>
  Kahve bitkisinin en yaygın türü <i>Coffea arabica</i> olarak bilinir.
</p>

Kitap, film ya da şarkı adı gibi bir eserin adını yazıyorsanız <i> değil <cite> kullanılır; bir terimin tanımlandığı ilk yer için de <dfn> vardır. Yabancı dildeki ifadelere lang vermek ekran okuyucuların doğru telaffuz kullanmasını sağlar; ayrıntılar HTML lang ve dir özniteliği yazısında.

mark: arama sonuçları ve alıntıda işaretleme

<mark> bulunduğu bağlamda ilgili olduğu için işaretlenen ya da vurgulayıcı kalemle boyanmış gibi gösterilen metni temsil eder. MDN iki tipik kullanım verir. Birincisi, bir alıntının (<q> veya <blockquote>) içinde, orijinal yazarın önemli saymadığı ama sizin dikkat çekmek istediğiniz bölümü işaretlemektir; tıpkı bir kitapta ilginç bulduğunuz satırın üzerinden kalemle geçmek gibi. İkincisi, kullanıcının o anki işiyle ilgili metni göstermektir; örneğin bir aramada eşleşen sözcükler.

<p>"kahve" için arama sonuçları:</p>
<p>
  Filtre <mark class="eslesme">kahve</mark> için orta incelikte öğütülmüş
  çekirdek kullanılır.
</p>

MDN, <mark> öğesinin kod renklendirme (syntax highlighting) için kullanılmamasını, bunun yerine CSS ile biçimlendirilmiş <span> öğelerinin tercih edilmesini söyler. Ayrıca <mark> ile <strong> karıştırılmamalıdır: biri ilgililik, diğeri önem bildirir.

u ve s: alt çizgi ve üstü çizili metin

<u> eski HTML'de 'Underline', yani alt çizgi öğesiydi; HTML 4'te diğer saf stil öğeleriyle birlikte kullanımdan kaldırılmış, daha sonra yeni ve anlamsal bir görevle geri getirilmiştir: metne metin dışı bir açıklama uygulandığını göstermek. MDN'nin verdiği geçerli kullanımlar yazım hatalarını işaretlemek ve Çince metinde özel adları belirten işareti uygulamaktır. Sadece süs olsun diye alt çizgi çekmek ya da kitap adlarını işaretlemek için <u> kullanılmaz.

MDN ayrıca önemli bir erişilebilirlik uyarısı yapar: bağlantılar da varsayılan olarak altı çizili göründüğü için <u> öğesini varsayılan stiliyle, bağlantıyla karıştırılacak şekilde kullanmaktan kaçının. Metin içi açıklama (örneğin okunuş) eklemek istiyorsanız <ruby> öğesi daha uygundur.

<s> metni üstü çizili gösterir ve artık geçerli ya da doğru olmayan bilgiyi temsil eder. Belgede yapılan düzenlemeleri, yani silinen ve eklenen metni göstermek için ise <del> ve <ins> öğeleri kullanılır. Fark şudur: <s> 'bu bilgi artık geçerli değil' der, <del> 'bu metin belgeden çıkarıldı' der.

<p><s>Bugünkü özel ürün: Etiyopya kahvesi</s> Tükendi</p>
<p>
  Fiyat: <s>450 TL</s> 390 TL
</p>

small: yan notlar ve küçük yazı

<small> yan yorumları ve 'küçük yazı' denilen metni, örneğin telif hakkı ve yasal bilgileri temsil eder; bu anlam, öğenin nasıl biçimlendirildiğinden bağımsızdır. Varsayılan olarak içindeki metni bir boy küçük gösterir. MDN, <small> öğesinin de <b> ve <i> gibi yapı ile sunumu ayırma ilkesini çiğniyormuş gibi algılanabileceğini, ancak üçünün de HTML'de geçerli olduğunu belirtir ve <small> ile CSS arasında seçimi yazarın sağduyusuna bırakır. Sayfa altlığında tipik bir kullanım:

<footer>
  <p><small>© 2026 Örnek Mağaza. Tüm hakları saklıdır.</small></p>
</footer>

sub ve sup: alt ve üst simge

<sub> ve <sup> metni yalnızca tipografik nedenlerle alçaltır ya da yükseltir. MDN'ye göre bunlar bir tipografi kuralına uymak için kullanılmalı, yalnızca görünüm için kullanılmamalıdır; örneğin harfleri farklı hizalarda olan bir marka logosunu taklit etmek CSS'in vertical-align özelliğinin işidir.

• <sub> için uygun kullanımlar: kimyasal formüllerdeki atom sayıları, matematikte aynı değişken ailesinin alt indisleri ve dipnot numaraları.
• <sup> için uygun kullanımlar: üsler, bazı dillerdeki kısaltmalarda kullanılan üst harfler ve sıra sayılarının kısaltmaları (İngilizcedeki 5th gibi).

<p>Su molekülünün formülü H<sub>2</sub>O olarak yazılır.</p>
<p>
  Dairenin alanı <var>π</var><var>r</var><sup>2</sup> formülüyle hesaplanır.
</p>

Karmaşık matematiksel ifadeler için MDN, MathML kullanmayı değerlendirmenizi önerir. <var> öğesi değişken adlarını işaretler ve code, kbd, samp ve var yazısında anlatılıyor.

br ve wbr: satır sonu ve satır kırma fırsatı

<br> metinde bir satır sonu üretir. Satırların bölünmesinin anlam taşıdığı yerler için uygundur: şiir dizeleri ya da posta adresleri gibi. Boş bir öğedir; kapanış etiketi yazılmaz. MDN iki kötü kullanıma karşı uyarır: paragraflar arasında boşluk oluşturmak için <br> kullanmak ve <br> öğelerine kenar boşluğu vererek satır aralığını açmak. İlki için metni <p> öğelerine bölüp CSS ile boşluk verirsiniz, ikincisi için line-height özelliği vardır.

Erişilebilirlik açısından da sorun vardır: MDN'ye göre <br> ile ayrı paragraflar oluşturmak ekran okuyucu kullanan kişiler için kafa karıştırıcı ve yorucu bir deneyimdir; ekran okuyucular öğenin varlığını duyurabilir. Paragraflar için <p> kullanın, aralarındaki boşluğu CSS ile ayarlayın.

<address>
  Örnek Mağaza<br />
  Atatürk Caddesi No: 1<br />
  34000 İstanbul
</address>

<wbr> ise bir 'sözcük kırma fırsatı' tanımlar: tarayıcının normalde bölmeyeceği bir yerde, gerekirse satırı bölebileceğini söyler. Uzun adreslerde ve bileşik sözcüklerde işe yarar. MDN'ye göre <wbr> bölünme noktasına kısa çizgi eklemez; satır sonunda tire görünmesini istiyorsanız yumuşak tire karakter referansını (­) kullanırsınız. Karakter referansları için HTML entity rehberi yazısına bakın.

<p>
  https://ornek<wbr />.com.tr/kategori<wbr />/kahve<wbr />/filtre<wbr />/urunler
</p>

Sık yapılan hatalar

• Görünüm için öğe seçmek: 'kalın olsun' diye <strong>, 'italik olsun' diye <i> kullanmak anlamı bozar. Görünüm için CSS kullanın.
• Her kalın metni strong yapmak: önem taşımayan anahtar kelimeler için <b> yeterlidir; her yerde <strong> kullanmak, gerçekten önemli olanı ayırt edilemez hale getirir.
• Kitap adını u veya i ile yazmak: eser adları için <cite> vardır.
• Düzenlemeleri s ile göstermek: belgeden silinen metin için <del>, eklenen metin için <ins> kullanılır.
• Kod renklendirmede mark kullanmak: MDN bunun yerine <span> ve CSS önerir.
• Boşluk için art arda br yazmak: paragrafları <p> ile ayırın.
• Logo için sup/sub kullanmak: bu bir tipografi kuralı değil tasarım tercihidir; CSS kullanın.

Sık Sorulan Sorular

strong ve b arasında arama motoru açısından fark var mı?

MDN bu öğeleri arama motoru etkisi açısından değil anlam açısından ayırır: <strong> önem, <b> ise önem taşımadan dikkat çekme anlamına gelir. Seçimi metnin anlamına göre yapın; arama motoru davranışı hakkında MDN bir iddiada bulunmaz.

i öğesi kullanımdan kalktı mı?

Hayır. MDN, <i> öğesinin eskiden yalnızca italik yazı için kullanılan sunumsal bir öğe olduğunu, bugün ise anlam tanımladığını belirtir: çevresindeki metinden ayrılan terimler, yabancı ifadeler, düşünceler ve benzerleri. Tarayıcılar genellikle yine italik gösterir ama bu zorunlu değildir.

Ekran okuyucular strong ve em öğelerini farklı okur mu?

Bu sayfalarda kullandığımız MDN belgeleri, ekran okuyucuların bu öğeleri nasıl seslendirdiğine dair bir garanti vermez. Öğeleri yardımcı teknolojinin davranışına göre değil, metnin anlamına göre seçin.

Satır kırmak için br mi yoksa yeni paragraf mı kullanmalıyım?

Satırların bölünmesi içeriğin parçasıysa (adres, şiir) <br> kullanın. Yeni bir düşünce ya da konu başlıyorsa yeni bir <p> açın.

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 · blockquote, q, cite ve code · HTML başlık etiketleri · lang ve dir özniteliği · HTML entity ve özel karakterler