Anlamsal HTML: Hangi Etiketler Kullanılmalı, Erişilebilirlik, Google ve Yapay Zeka İçin Neden Önemli

Bir tarayıcı <div> ile <nav> öğesini aynı şekilde görüntüler. Fark anlamdadır: anlamsal HTML, sayfayı okuyan her programa her bloğun hangi rolü oynadığını söyler. MDN bunu, öğeleri varsayılan görünümlerine göre değil anlamlarına göre kullanmak olarak tanımlar. Arama motorları, yardımcı teknolojiler ve yapay zeka modellerini besleyen tarayıcıların hepsi bu anlamdan yararlanır.

Başlıca anlamsal HTML etiketleri nelerdir?

HTML standardı onlarca öğe tanımlar. Aşağıdakiler, hemen her içerik sayfasını yapılandıranlardır:

Metin düzeyindeki etiketler de anlam taşır: önem için <strong>, vurgu için <em>, alıntılar için <blockquote> ve <cite>, listeler için <ul> ve <ol>, linkler için <a>, eylemler için <button>.

Anlamsal HTML erişilebilirlik için neden önemlidir?

Ekran okuyucular, sayfanın haritasını etiketlerinden çıkarır. <header>, <nav>, <main>, <aside> ve <footer> işaret noktaları, kullanıcının doğrudan menüye ya da içeriğe atlamasını sağlar; başlık listesi ise içindekiler gibi çalışır. W3C'nin sayfa yapısı hakkındaki erişilebilirlik eğitimleri, bu nedenle bu bölgeleri ve mantıklı bir başlık sırasını önerir.

Tıklanabilir bir <div> klavye için görünmezdir ve bir ekran okuyucu için sessizdir; yerel bir <button>'ın size bedavaya verdiğini elle yeniden kurmadıkça. Yerel öğeler kendi rolleri, klavye odağı ve beklenen davranışlarıyla gelir. Birçok ülkede kamu ve ticari web sitelerinin erişilebilirliği aynı zamanda yasal bir zorunluluktur; bu da temiz işaretlemeyi bir uyumluluk meselesi yapar.

Anlamsal HTML SEO'ya yardımcı olur mu?

Google anlamsal etiketleri hiçbir zaman doğrudan bir sıralama faktörü olarak sunmadı ve düz <div> ile yazılmış bir sayfa da sıralanabilir. Değer dolaylıdır ama gerçektir:

• Ana içeriğin tespiti: <main> ve <article>, önemli metni her sayfada tekrar eden menülerden, kenar çubuklarından ve footer'lardan ayırmaya yardımcı olur.
• Konu yapısı: sıralı bir başlık hiyerarşisi, sayfanın neleri kapsadığını ve parçalarının birbiriyle nasıl ilişkili olduğunu gösterir; bu da uzun kuyruklu sorgular için alaka düzeyini destekler.
• Öğelerin zengin biçimde anlaşılması: gerçek tablolar, listeler ve tarihler, stillendirilmiş bloklarla yapılan görsel taklitlerden daha kolay okunur.
• Yapılandırılmış veriyle tutarlılık: anlamsal işaretleme ve JSON-LD aynı sayfayı iki açıdan anlatır. Yapılandırılmış içerik maddemiz, bunların nasıl bir araya geldiğini gösteriyor.

Anlamsal HTML, temiz URL'ler veya hızlı sayfalar gibi teknik SEO'nun bir parçasıdır: içeriğinizin doğru okunmasını sağlayan bir temeldir.

Yapay zeka asistanları sayfa yapısını nasıl kullanır?

ChatGPT, Gemini, Perplexity ve Google AI Overviews sayfaların tamamını değil, pasajları alıntılar. Sayfanızı çeken tarayıcılar genellikle navigasyonu ve standart metinleri ayıklar, ardından metni parçalara böler. Net bir <h2> ile açılan, sorusunu ilk paragrafta yanıtlayan ve tek bir <section> içinde kalan bir bölüm, temiz bir parça üretir. Aynı içerik iç içe <div>'lere yayılmışsa ve başlıklar kalın metinle taklit edilmişse, menü öğeleriyle karışmış parçalar ortaya çıkar. İçerik parçalama rehberimiz, bu kesimden sağ çıkan bölümlerin nasıl yazılacağını anlatıyor.

İyi yapılandırılmış bir makale sayfası nasıl görünür?

İşte bir blog makalesinin iskeleti, etiket etiket anlatılmış olarak:

1. <header> logoyu ve ana menüyü içeren bir <nav> barındırır. Bu blok her sayfada tekrar eder, bu yüzden tarayıcılar onu yok saymayı öğrenir.

2. <main> hemen ardından açılır. İndekslenmesini ve alıntılanmasını istediğiniz içerik olan tek bir <article> içerir.

3. <article> içinde bir <header>, <h1>'i (sayfa konusu), yazar adını ve yayın tarihini makine tarafından okunabilir biçimde taşıyan bir <time datetime="2026-10-18"> öğesini bir araya getirir.

4. Makalenin her bölümü, yanıtladığı soru biçiminde yazılmış bir <h2> ile başlayan bir <section>'dır; ardından <p> paragrafları, <ul> listeleri veya <th> başlıkları olan bir <table> gelir.

5. Bir grafik, açıklayıcı bir alt metni olan bir <img> ve grafiğin neyi gösterdiğini belirten bir <figcaption> içeren bir <figure>'a yerleştirilir.

6. İlgili linkler, makalenin ana akışının dışında, bir <aside> içine konur.

7. Bir <footer> sayfayı yasal ve iletişim linkleriyle kapatır.

Bu iskeletle, bir ekran okuyucu kullanıcısı tek bir tuş vuruşuyla içeriğe atlayabilir, Google net bir ana hatla tek bir ana makale görür ve bir yapay zeka tarayıcısı herhangi bir <section>'ı bağımsız bir yanıt olarak alabilir.

En yaygın anlamsal HTML hataları nelerdir?

• Her yerde div: sayfa oluşturucular çoğu zaman işaret noktası olmayan <div> katmanları üretir. En azından <main> öğesinin var olduğunu ve içeriği sardığını kontrol edin.
• Atlanan veya yanlış kullanılan başlıklar: <h2>'den <h4>'e atlamak, metni büyütmek için başlık kullanmak veya kalın paragrafları sahte başlık olarak kullanmak. Seviyeyi yapıya göre seçin, ardından CSS ile stilini verin.
• Birbiriyle yarışan birkaç <h1>: HTML buna izin verir, ancak sayfa konusunu anlatan tek bir <h1>, kullanıcılar ve arama motorları için en net sinyal olmaya devam eder.
• Tıklanabilir <div> ve <span>: navigasyon için <a>, eylemler için <button> kullanın.
• Yerleşim tabloları ve sahte tablolar: tablolar veri içindir; stillendirilmiş bloklarla gösterilen veri satır ve sütun ilişkilerini kaybeder.
• Metin görselleri: bir görselin içindeki başlık veya fiyat, bir tarayıcı ya da ekran okuyucu tarafından okunamaz.
• Yalnızca düz metin olarak tarihler: tarihin belirsiz olmaması için datetime özniteliğiyle <time> ekleyin.

Bir sayfanın anlamsal yapısı nasıl denetlenir?

Üç hızlı kontrol sorunların çoğunu kapsar. Birincisi, sayfanın başlık ana hatlarını görüntüleyin ve tek başına okuyun: içeriğin hikâyesini anlatmalı. İkincisi, kaynak kodda <main>, <nav> ve <article> arayın. Üçüncüsü, sayfada yalnızca klavyeyle gezinin ve her link ile düğmeye ulaşılıp ulaşılamadığına bakın. Sayfa içi SEO denetimimiz herhangi bir URL için başlık ve işaretleme sorunlarını listeler; ücretsiz Sorank Chrome eklentisi ise görüntülediğiniz sayfanın başlık yapısını gösterir.

Her etiketi anlamına uygun kullanın: tek bir <main>, tek bir <h1>, sıralı bölümler ve gerçek tablolar insanlara, Google'a ve yapay zekaya sayfanızın aynı net haritasını verir. Yapı temizlendikten sonra içeriğin yine de düzenli olarak yazılıp yayınlanması gerekir: Sorank, Google ve yapay zeka için optimize edilmiş makaleleri yazar ve yayınlar, hem de autopilot ile.