HTML'in ifadeleri biçimlendirmek yani onlara yeni stiller katmak için belli başlı etiketleri vardır. Bunların listesi;

  • <b> - Kalın yazı
  • <strong> - Önemli yazı
  • <i> - Eğik yazı
  • <em> - Vurgulanmış yazı
  • <mark> - İşaretli yazı (Kitap okurken önemli bir yerin üstünü sarı kalemle çizerdik, tam olarak bu ^^)
  • <small> - Küçük yazı (Büyük harfle bile yazılsa normal yazıdan daha küçük görünür)
  • <del> - Silinmiş yazı (Silinmiş yazının ne işi var demeyin, örneğin ürünün fiyatı değiştiğinde üstünü çizip yeni fiyatını yazarlar, buda o mantıkta)
  • <ins> - Eklenmiş yazı
  • <sub> - Alt simge yazı
  • <sup> - Üst simge yazı

Gelin tüm bu etiketleri tek bir sayfada tanımlayıp kullanalım ve nasıl gözüktüklerine bir bakalım.

<p>
    Bu bir <b>kalın</b> yazıdır bu ise <strong>önemli bir kalın yazıdır.</strong> <br>
    Bu bir <i>eğik yazıdır</i> bu ise <em>vurgulanan bir yazıdır.</em> <br>
    Bu <mark>işaretlenmiş yazı</mark>, burası <small>KÜÇÜK GÖRÜNEN</small> YAZIDIR. <br>
    Bu artık <del>silinmiş</del> bu ise <ins>yeni eklenmiş</ins> yazı örneği :) <br>
    Ve son olarak alt simge H<sub>2</sub>O ve m<sup>2</sup> örnekleri verilebilir.
</p>
 
 
HTML'de Metin Biçimlendirme Etiketleri Örneği
 

HTML <b> ve <strong> Etiketleri

Her iki etikette görünürde yazıyı kalınlaştırır. Birbirlerinden farkı ise, <b> etiket yazıyı sadece kalınlaştırır, <strong> etiketi yazıyı hem kalınlaştırır hemde tarayıcılar tarafından yorumlanırken o yazının önemli bir yazı olduğunu belirtir. Şimdi her ikisinede birer örnek verecek olursak;

<b>Merhaba Dünya</b>
<strong>Ne mutlu Türk'üm diyene!</strong>
 

HTML <i> ve <em> Etiketleri

Her iki etikette yazının eğik görünmesi için kullanılır. Birbirlerinden farkı ise, <i> etiketi yazıyı sadece eğik gösterir, <em> etiketi yazıyı hem eğik gösterir hemde tarayıcılar tarafından yorumlanırken o yazının vurgulandığını belirtir. Şimdi her ikisinede birer örnek verceek olursak;

<i>Eğik Yazı</i>
<em>Türk, Öğün, Çalış, Güven</em>
 

HTML <small> Etiketi

<small> etiketi bir yazıyı görünenden daha küçük yazmak için kullanılır. Hatta yazı büyük harfle bile yazılmış olsa bu etiket içerisindeki yazılar diğer harflerden daha küçük görünür. Böyle bir şeyi kim neden ister bilinmez ama bunu yapan etiket var yani bilginiz olsun :)

Bu yazılar normalken <small>bu yazı daha küçük</small> gözüküyor olabilir mi?
 

HTML <mark> Etiketi

Bir şeyleri okurken üstünü sarı kalemle çizerdik ya, işte bunu HTML'de <mark> etiketi ile yapıyoruz. Örnek vermek gerekirse;

yazının bu kısmı <mark>farklı şekilde</mark> gözüksün.
 

HTML <del> Etiketi

Silinmiş yazıları <del> etiketi ile işaretliyoruz. Gerçek hayattan örnek vermek gerekirse, etiket fiyatı değişen ürünlerde fiyatın üstünü çizip yanına yeni fiyatını yazardık. Silme işlemini bu etiketle yapıyoruz.

Boyum şuan <del>180cm</del> 195cm
 

HTML <ins> Etiketi

<del> ile silinen yazıların yenisini eklerken <ins> etiketi kullanılır. Yukarıdaki örnek, bu etiketle birlikte şöyle daha anlamlı olacaktır;

Boyum şuan <del>180cm</del> <ins>195cm</ins>
 

HTML <sub> Etiketi

Yazıyı alt simge olarak belirlemek için bu etiket kullanılır. Örneğin H2O derken 2 değerini alt simge olarak belirlersek doğru bir kullanım olur. Hemen deneyelim;

H<sub>2</sub>O
 

HTML <sup> Etiketi

Yazıyı üst simge olarak belirlemek için bu etiket kullanılır. Örneğin m2 derken 2 değerini üst simge olarak belirlersek doğru bir kullanım olur. Hemen deneyelim;

m<sup>2</sup>