Anlamsal HTML (Semantic HTML) Nedir?
Kısa tanım
Anlamsal HTML, içeriği görünüşüne göre değil anlamına göre işaretlemektir: gezinme için nav, ana içerik için main, başlıklar için h1–h6, eylemler için button, bağlantılar için href değeri olan a öğesi kullanmak gibi. Bu sayede tarayıcılar, ekran okuyucular, arama motoru tarayıcıları ve yapay zekâ sistemleri sayfanın yapısını ve her parçanın işlevini koddan doğrudan anlayabilir.
Diğer adları: semantic HTML, semantik HTML, anlamsal işaretleme, semantic markup
Aynı görünüm, farklı anlam
CSS ile bir <div> butona, bir <span> başlığa benzetilebilir. Ekranda fark görünmez; fark, sayfayı gözüyle değil kodundan okuyan her şey için ortaya çıkar. Aşağıdaki iki parça tarayıcıda aynı görünebilir:
<!-- Anlamı olmayan yapı -->
<div class="ust">
<div class="menu"><span onclick="git('/seo/')">SEO</span></div>
</div>
<div class="icerik"><div class="baslik">Teknik SEO</div>…</div>
<!-- Anlamsal yapı -->
<header>
<nav aria-label="Ana menü"><a href="/seo/">SEO</a></nav>
</header>
<main><h1>Teknik SEO</h1>…</main>İkinci sürümde ekran okuyucu kullanıcısı tek tuşla menüye ya da ana içeriğe atlayabilir, başlıklar arasında gezinebilir. Arama motoru tarayıcısı bağlantıyı takip edebilir. Üstelik ikinci sürüm daha kısadır.
Landmark öğeleri ve örtük roller
HTML öğelerinin çoğunun örtük bir erişilebilirlik rolü vardır; bu yüzden aynı bilgiyi ARIA ile tekrar yazmaya gerek kalmaz. Sayfa iskeletini oluşturan landmark öğeleri şunlardır:
| Öğe | Örtük rol | Not |
|---|---|---|
<header> | banner | Yalnızca sayfa düzeyindeyken. article, section, main gibi öğelerin içinde landmark değildir. |
<nav> | navigation | Birden fazla menü varsa aria-label ile ayırt edilir. |
<main> | main | Sayfada görünür tek bir tane olmalıdır. |
<aside> | complementary | Ana içerikle ilgili ama ondan bağımsız bölüm. |
<footer> | contentinfo | Header gibi, yalnızca sayfa düzeyindeyken. |
<section> | region | Yalnızca erişilebilir bir adı varsa; yoksa generic. Salt stil kapsayıcısı için div yeterlidir. |
Buton mu, bağlantı mı?
Kural basittir: başka bir adrese götüren şey <a href>, sayfada bir eylem başlatan şey <button> olmalıdır. Tıklanabilir bir div klavyeyle odaklanamaz ve ekran okuyucuya hiçbir şey ifade etmez. SEO tarafında da somut bir sonucu vardır: Google, bir bağlantıyı genellikle yalnızca href niteliği olan bir <a> öğesiyse tarayabildiğini belirtir. JavaScript ile yönlendirme yapan bir span, menüdeki sayfaların keşfedilmesini zorlaştırır.
Diğer anlamsal öğeler de benzer iş görür: veri tabloları için <table> ve <th>, adım listeleri için <ol>, tarih için <time datetime>, form alanları için <label>.
Başlıklar ve belge düzeni
Ekran okuyucu kullanıcılarının önemli bir bölümü sayfayı başlıklar arasında atlayarak tarar. Bu yüzden her sayfada içeriği anlatan bir <h1> ve onu izleyen mantıklı bir düzey sırası önerilir; ayrıntılar başlık yapısı maddesinde. Başlık düzeyini section iç içeliğinin otomatik ayarlayacağına güvenmeyin; düzeyler açıkça yazılmalıdır. Google'ın SEO başlangıç rehberi, başlıkların sırasız kullanılmasının Google Arama açısından sorun olmadığını söyler; doğru sıra yine de erişilebilirlik ve okunabilirlik için önemlidir.
Arama motorları ve yapay zekâ için anlamı
Anlamsal HTML kendi başına bir sıralama garantisi değildir; Google, web'in büyük kısmının geçerli HTML olmadığını kabul eder ve onu yine de işler. Değeri dolaylıdır ama gerçektir: taranabilir bağlantılar, ana içeriğin menü ve alt bilgiden ayırt edilebilmesi, sorulara karşılık gelen başlıklar, liste ve tablo olarak işaretlenmiş veriler. Bu özellikler, içeriği parçalara bölüp işleyen sistemlerin işini kolaylaştırır ve makine tarafından okunabilir içerik hedefinin temelidir. Anlamsal HTML içeriğin yapısını anlatır; varlıkları ve ilişkilerini açıkça bildirmek için ise yapılandırılmış veri ayrıca gerekir.