Web sayfaları oluştururken içeriklerimizin sadece düz metinlerden ibaret olması, okuyucunun dikkatini dağıtır ve içeriğin anlaşılmasını zorlaştırır. İşte bu noktada devreye HTML Metin Biçimlendirme (Text Formatting) etiketleri girer. HTML, metin içindeki kelimelere veya cümlelere başlık, paragraf, vurgu, alıntı gibi yapısal anlamlar kazandırmak için belirli etiketler sunar.
Bu rehberde, HTML’de metinleri nasıl biçimlendireceğinizi, hangi etiketin hangi amaca hizmet ettiğini ve modern web dünyasında bu etiketlerin SEO (Arama Motoru Optimizasyonu) ile Erişilebilirlik (Accessibility) açısından neden kritik bir role sahip olduğunu bol örneklerle, sıfırdan öğreneceksiniz.
1. Fiziksel ve Mantıksal (Semantik) Biçimlendirme Arasındaki Fark
Metin biçimlendirme etiketlerine geçmeden önce, web geliştirme dünyasındaki en önemli ayrımlardan birini anlamamız gerekir: Fiziksel Biçimlendirme (Physical Markup) ve Mantıksal/Semantik Biçimlendirme (Logical/Semantic Markup).
- Fiziksel Biçimlendirme: Sadece metnin ekranda nasıl görüneceğini belirtir. Örneğin,
<b>(bold) etiketi metni kalın yapar,<i>(italic) etiketi eğik yazar. Ancak bu etiketler, o metnin neden kalın veya eğik olduğuna dair tarayıcıya veya arama motoruna hiçbir anlam (semantik bilgi) sunmaz. - Mantıksal (Semantik) Biçimlendirme: Metnin sadece görünümünü değil, asıl olarak taşıdığı anlamı ve önem derecesini belirtir. Örneğin,
<strong>etiketi metnin çok önemli olduğunu,<em>etiketi ise metnin vurgulanarak okunması gerektiğini belirtir,.
Günümüz modern web standartlarında (HTML5), sadece görsel bir etki yaratmak için HTML etiketleri kullanmak yerine, anlamsal HTML etiketlerini kullanmak ve görsel tasarımı CSS (Cascading Style Sheets) ile yapmak en doğru yaklaşımdır,,.
2. Temel HTML Metin Biçimlendirme Etiketleri
Aşağıda, web sitenizde metinleri biçimlendirirken en sık kullanacağınız HTML etiketleri, görevleri ve kullanım örnekleri yer almaktadır:
<b> (Bold – Kalın Metin)
Metni kalın yazı tipinde göstermek için kullanılır. Ancak metne özel bir önem veya aciliyet katmaz,. Sadece görsel olarak dikkat çekmesi istenen kelimeler (örneğin bir ürün adı veya anahtar kelime) için kullanılır. Örnek: <p>Bu cümlenin içinde <b>kalın yazılmış</b> bir kelime var.</p>
<strong> (Güçlü Vurgu ve Önem)
İçeriğin güçlü bir öneme, ciddiyete veya aciliyete sahip olduğunu belirtir,. Tarayıcılar varsayılan olarak bu metni kalın (bold) olarak gösterir. Ancak <b> etiketinden farklı olarak, görme engelliler için kullanılan ekran okuyucular (screen readers), <strong> etiketi içindeki metni okurken ses tonunu daha sert veya vurgulu hale getirebilir,. Örnek: <p><strong>Uyarı:</strong> Lütfen formu göndermeden önce bilgilerinizi kontrol edin.</p>
<i> (İtalik Metin)
Metni normal metin akışından ayırmak için kullanılır (örneğin teknik terimler, yabancı kelimeler veya deyimler),. Görsel olarak metni sağa yatık (eğik) olarak işler. Örnek: <p>Web geliştirme dünyasında <i>Semantic HTML</i> kavramı çok önemlidir.</p>
<em> (Emphasis – Vurgulanan Metin)
Kelimenin veya cümlenin vurgulanarak (stresli bir şekilde) okunması gerektiğini belirtir,. Tıpkı <i> gibi görsel olarak italik yazar ancak arama motorlarına ve ekran okuyuculara kelimenin önemini bildirir. İç içe <em> kullanımı, vurgunun derecesini artırır. Örnek: <p>Bu projeyi yarına kadar bitirmemiz <em>gerçekten</em> şart.</p>
<mark> (İşaretli / Vurgulanmış Metin)
HTML5 ile hayatımıza giren bu etiket, metin içinde referans amacıyla işaretlenmiş veya aydınlatılmış kısımları temsil eder,. Tıpkı ders çalışırken önemli yerlerin üzerini fosforlu kalemle çizmek gibidir,. Tarayıcılar varsayılan olarak bu metnin arka planını sarı renge boyar. Örnek: <p>Sınavda özellikle <mark>HTML5 etiketleri</mark> konusuna dikkat edin.</p>
<small> (Küçük Metin)
Yan yorumları, telif hakkı uyarılarını veya yasal ince yazıları (fine print) temsil etmek için kullanılır,,. Metni, etrafındaki normal metinden bir boyut daha küçük yazar,. Örnek: <p>Kampanyamız tüm ürünlerde geçerlidir. <small>*Stoklarla sınırlıdır.</small></p>
<del> (Silinmiş Metin) ve <ins> (Eklenmiş Metin)
Bu iki etiket genellikle bir belgedeki değişiklikleri (“track changes” veya “versiyon geçmişi”) göstermek için birlikte kullanılır.
<del>(Deleted): Belgeden silinmiş bir metni temsil eder. Tarayıcılar bu metnin üzerini çizerek (strikethrough) gösterir,.<ins>(Inserted): Belgeye sonradan eklenmiş metni temsil eder. Tarayıcılar bu metnin altını çizerek gösterir,.
Bu etiketler cite (değişikliğin sebebini açıklayan bir adres) ve datetime (değişikliğin yapıldığı ISO 8601 formatında zaman) niteliklerini (attribute) alabilirler,. Örnek: <p>Toplantı saati <del datetime="2026-04-03T10:00">10:00</del> <ins datetime="2026-04-03T15:00">15:00</ins> olarak güncellenmiştir.</p>
<sub> (Alt Simge) ve <sup> (Üst Simge)
Tipografik olarak normal metin satırının altına veya üstüne yazılması gereken metinler için kullanılır.
<sub>(Subscript): Kimyasal formüller gibi alt simgeler için kullanılır. Metnin taban çizgisini aşağı çeker ve küçültür,. Örnek:<p>Suyun kimyasal formülü H<sub>2</sub>O şeklindedir.</p><sup>(Superscript): Matematiksel üslü sayılar veya tarih ekleri (1st) için kullanılır,. Örnek:<p>E=mc<sup>2</sup> Einstein'ın ünlü formülüdür.</p>
3. Kaçınılması Gereken Eski (Deprecated) Etiketler Neden Kullanılmamalı?
HTML öğrenirken internetteki eski kaynaklarda <u> (altı çizili), <strike> (üstü çizili), <center> (ortalama) veya <font> (yazı tipi, rengi ve boyutu ayarlama) gibi etiketlere denk gelebilirsiniz. Ancak HTML4 ve HTML5 standartlarıyla birlikte bu salt sunumsal (presentational) etiketler kullanımdan kaldırılmış (deprecated/obsolete) olarak işaretlenmiştir,,,,.
Bunun temel nedeni, HTML’in amacının web sayfasının yapısını kurmak olmasıdır. Bir metnin altını çizmek, rengini değiştirmek veya ortalamak yapıyla değil, tasarımla ilgilidir. Tasarımsal işlemlerin tamamı günümüzde CSS ile yapılmaktadır,,. Örneğin <u> etiketi kullanmak yerine, CSS’te text-decoration: underline kuralı kullanılmalıdır,. Ayrıca, bağlantı (link) olmayan sıradan metinlerin altının çizilmesi, web sitelerinde kullanıcıların onları tıklanabilir bir bağlantı sanmasına yol açarak kötü bir kullanıcı deneyimi (UX) yaratır.
4. SEO ve Erişilebilirlik (Accessibility) Açısından Metin Biçimlendirmenin Önemi
Semantik metin biçimlendirme etiketlerini doğru kullanmanın sadece temiz kod yazmaktan öte, sitenizin başarısına doğrudan iki devasa katkısı vardır:
1. Arama Motoru Optimizasyonu (SEO): Google veya Bing gibi arama motorlarının botları sitenizi ziyaret ettiğinde sayfayı sizin gibi görsel olarak görmezler; kodlarınızı okurlar. Arama motorları bir kelimenin önem derecesini anlamak için HTML etiketlerini referans alır. Anahtar kelimenizin sıradan bir <div> veya <span> içinde geçmesiyle, bir <strong> veya <em> etiketi içinde geçmesi botlar için aynı anlama gelmez. Semantik etiketler botlara “Bu kelime bu sayfanın konusu için çok önemli” mesajını verir ve bu da arama sonuçlarında (SERP) daha üst sıralarda çıkmanıza yardımcı olabilir,,.
2. Erişilebilirlik (Accessibility – WCAG Standartları): Web’in herkes için erişilebilir olması gerektiği unutulmamalıdır. Görme engelli bireyler, web sitelerini gezerken onlara sayfayı sesli okuyan ekran okuyucu (screen reader) programlar kullanırlar. Eğer içeriğinizdeki önemli kısımları sadece CSS kullanarak kırmızı ve büyük fontlu yaparsanız, ekran okuyucu bu görsel değişikliği göremeyeceği için o metni sıradan bir metinmiş gibi düz bir ses tonuyla okur. Ancak metni <strong> veya <em> gibi semantik etiketler içine alırsanız, cihaz bu HTML kodunu tanır ve sese dönüştürürken vurgu yaparak, tonlamasını değiştirerek engelli kullanıcıya mükemmel bir deneyim sunar,,. Bu, “WCAG (Web Content Accessibility Guidelines)” yönergelerine tam uyum sağlamanız ve kapsayıcı bir web sitesi oluşturmanız için zorunludur,.
Sonuç olarak; HTML metin biçimlendirme etiketlerini öğrenmek, profesyonel web geliştirmenin ilk ve en önemli adımlarından biridir. Etiketleri seçerken kendinize “Bu metni sadece güzel görünsün diye mi kalın yapıyorum, yoksa gerçekten bir önem mi taşıyor?” sorusunu sormayı alışkanlık haline getirin. Görsellik için CSS’e, anlam ve yapı için HTML’e güvenin!
