SEO için Anlamsal HTML
Anlamsal HTML öğelerinin (article, section, nav, header, main, aside) arama motorlarının bir sayfanın ana içeriğini belirlemesine nasıl yardımcı olduğu — neden bir sıralama faktörü olmadığı ve her öğenin doğru kullanımı.
Diller
Anlamsal HTML; içeriğin yalnızca nasıl göründüğünü değil, ne olduğunu açıklamak için <main>, <article>, <section>, <nav>, <header> ve <aside> gibi öğeleri kullanır. Bir sıralama faktörü değildir — John Mueller buna 'not a magical multiplier' der ve <article> öğesinin Arama'da 'no particular effect'i olduğunu söyler. Yaptığı şey, Google'ın ana içeriği şablon metninden daha güvenilir biçimde ayırmasına yardımcı olmak (Google'ın merkezî açıklaması bunu işaretlemenizden bağımsız olarak NLP ile yapar, ancak temiz anlambilim tahmini azaltır), yardımcı teknolojilere ve JavaScript çalıştırmayan AI tarayıcılarına yardımcı olmaktır. Bing'den Fabrice Canel bunu daha güçlü biçimde 'an advantage in SEO' olarak ifade eder. Aynı fikir yer işaretlerinin ötesine uzanır: gezinme için <a href>, eylemler için <button>, tablo verileri için gerçek <table> öğeleri, görsellerde amaca dayalı alt metni ve yerel açılır bileşenler için <details>/<summary> kullanın — ayrıca eski ve hiçbir zaman uygulanmamış 'belge anahattı algoritması'na, <section> iç içeliğiyle başlık seviyeleri çıkarsaması için güvenmeyin. Doğru kullanım, varlıktan önemlidir: sayfa başına bir <main>, kendi içinde tamamlanmış içerik için <article>, başlıklı temalı grup için <section> — <div> yerine değil. Bunu Anlamsal SEO (konu/varlık stratejisi) ile karıştırmayın.
Evidence for this claim Semantic HTML uses elements according to their defined purpose and structural meaning. Scope: HTML element semantics. Confidence: high · Verified: WHATWG HTML: Semantics Evidence for this claim Native semantic HTML exposes built-in roles and supports accessible structure when elements are used correctly. Scope: W3C guidance on semantic HTML and accessibility. Confidence: high · Verified: W3C WAI: HTML and accessibilityTL;DR — Anlamsal HTML, her şeyi düz
<article>’lerle sarmalamak yerine içeriğin ne olduğunu anlatan etiketleri —<nav>,<main>,<header>,<div>— kullanmak demektir. Arama motorlarının ve ekran okuyucularının sayfanızı anlamasına yardımcı olur, ancak bir sıralama faktörü değildir.<article>kullanmak sizi daha üst sıralara çıkarmaz. Aynı kural landmark’ların ötesinde de geçerlidir: bağlantılar için<a href>, eylemler için<button>, tablo verileri için<table>ve görsellerde gerçek alt metni kullanın. İşe uygun etiketi seçtiğinizde işin çoğunu halletmiş olursunuz.
Anlamsal HTML nedir
Bir web sayfasının her parçası HTML öğelerinden oluşur. Anlamsal HTML, her şey için genel bir sarmalayıcı kullanmak yerine içeriğin gerçekte ne olduğuna uyan öğeyi seçmek demektir.
Aynı sayfa yapısının şu iki sürümünü karşılaştırın:
<!-- Non-semantic: "div soup" -->
<div class="top"> ... </div>
<div class="menu"> ... </div>
<div class="content"> ... </div>
<div class="sidebar"> ... </div>
<div class="bottom"> ... </div><!-- Semantic: the tags describe the roles -->
<header> ... </header>
<nav> ... </nav>
<main> ... </main>
<aside> ... </aside>
<footer> ... </footer>Her ikisi de ekranda birebir aynı görünebilir; stillendirmeyi CSS yapar. Fark, ikinci sürümün bir makineye (arama motoru, ekran okuyucu veya AI tarayıcısı) hangi kısmın navigasyon, hangisinin ana içerik ve hangisinin kenar çubuğu olduğunu söylemesidir. İlk sürüm herkesi tahmin yürütmeye bırakır.
Gerçekte kullanacağınız öğeler
<header>— sayfanın (veya bir bölümün) üstündeki tanıtıcı içerik.<nav>— bir navigasyon bağlantıları grubu.<main>— sayfanın birincil, benzersiz içeriği. Sayfa başına bir tane.<article>— kendi başına durabilecek bağımsız parça (blog yazısı, ürün kartı, yorum).<section>— kendi başlığı olan tematik içerik grubu.<aside>— ana içerikle teğet ilişkili içerik (kenar çubuğu, ek bilgi kutusu).<footer>— kapanış içeriği (telif hakkı, ikincil bağlantılar).
Aynı “işe uygun etiketi kullan” fikri sayfa düzeni düzeyinin altında da geçerlidir: bağlantılar için <a href>, sayfa içi eylemler için <button>, gerçek tablo verileri için <table> ve görsellerde amaca dayalı alt metni kullanın. Stilli <div>’lerden oluşturulan sahte bağlantılar, erişilebilirlikteki en yaygın hatadır; listenin tamamı için Advanced sekmesine bakın.
Çoğu kişinin yanlış yaptığı konu
İçeriğinizi <article> içine sarmalamak sıralamanızı artırmaz. Google’dan John Mueller, <article> öğesinin Google Search’te “no particular effect” (Türkçe çeviri) “özel bir etkisi” olmadığını ve anlamsal HTML’nin “not a magical multiplier” (Türkçe çeviri) “sihirli bir çarpan olmadığını” söyledi. Anlamsal HTML, arama motorlarının sayfanızı anlamasına yardımcı olur; sadece daha üst sıralara çıkmak için çektiğiniz bir kaldıraç değildir.
Değer gerçektir; sadece “sıralama puanı” değildir. Temiz anlamsal işaretleme, arama motorlarının ana içeriğinizi kalıp içerikten (menüler, alt bilgiler, reklamlar) ayırmasını kolaylaştırır, ekran okuyucusu kullanan kişiler için sayfanızın doğru çalışmasını sağlar ve AI araçlarının sayfayı okumasını kolaylaştırır. Bunların tümü bunu yapmak için iyi nedenlerdir; hiçbiri “sıralama faktörüdür” değildir.
Bir tuzak daha: Anlamsal HTML, “Anlamsal SEO” ile aynı değildir. Anlamsal HTML işaretleme yapısıyla ilgilidir. Anlamsal SEO ise içeriğinizdeki konular ve varlıklarla ilgilidir. Aynı kelime, tamamen farklı şey.
Tam resmi — her öğenin ne sinyal verdiğini, Google ve Bing’in gerçekte ne söylediğini, ana içerik çıkarımına nasıl oturduğunu ve bir retrofit kontrol listesini — görmek için Advanced sekmesine geçin.
Evidence for this claim Semantic HTML uses elements according to their defined purpose and structural meaning. Scope: HTML element semantics. Confidence: high · Verified: WHATWG HTML: Semantics Evidence for this claim Native semantic HTML exposes built-in roles and supports accessible structure when elements are used correctly. Scope: W3C guidance on semantic HTML and accessibility. Confidence: high · Verified: W3C WAI: HTML and accessibilityTL;DR — Anlamsal HTML, işaretlemenin nasıl göründüğünü değil içeriğin ne olduğunu anlatması için öğeleri amaçlanan yapısal anlamlarıyla (
<main>,<article>,<section>,<nav>,<header>,<aside>) kullanır. Bir sıralama faktörü değildir — Mueller: “not a magical multiplier” (Türkçe çeviri) “sihirli bir çarpan değil” ve<article>“no particular effect” (Türkçe çeviri) “özel bir etkiye sahip değil.” Yaptığı şey belirsizliği azaltmaktır: Google’ın centerpiece annotation’ı işaretlemeniz anlamsal olsun ya da olmasın NLP ile ana içeriği kalıp içerikten ayırır, ancak temiz anlambilim bu işi daha güvenilir kılar. Bing’den Fabrice Canel bunu daha güçlü çerçeveler (“an advantage in SEO” (Türkçe çeviri) “SEO’da bir avantaj”); bu farkı dürüstçe not ediyor, ortadan kaldırmaya çalışmıyorum. Google’ın kendi Starter Guide’ı web’in çoğunun geçerli HTML olmadığını, dolayısıyla spesifikasyon anlambilimine nadiren dayandığını söyler. Doğru kullanım varlıktan önemlidir: tek bir<main>, bağımsız içerik için<article>, başlığı olan tematik grup için<section>—<div>yerine değil. Aynı test, navigasyon için<a href>ile eylem için<button>ayrımına, tablo verileri için gerçek<table>’lara, amaca dayalı görsel alt metnine ve açılır bileşenler için<details>/<summary>öğelerine uzanır;<section>iç içeliğinin bir başlık seviyesi ima edeceğine güvenmeyin: bu “document outline algorithm” (Türkçe çeviri) “belge anahat algoritması” hiçbir zaman uygulanmadı ve spesifikasyon artık anahatları bu şekilde tanımlamıyor. Anlamsal HTML’yi Anlamsal SEO ile karıştırmayın.
Anlamsal HTML gerçekte ne demektir
Anlamsal HTML, her şey için <div> ve <span> kullanmak yerine HTML öğelerini taşıyacakları yapısal anlama göre seçme pratiğidir. <article>, <section>, <nav>, <header>, <main>, <aside> ve <footer> öğelerinin her biri bir rol bildirir. İşaretleme, sayfanın bir parçasının ne olduğunu anlatır; nasıl görüneceğine CSS karar verir. Google’ın geliştirici stil rehberi kuralı en basit hâliyle şöyle koyar: “Use HTML elements for the purposes that they were designed for.” (Türkçe çeviri) “HTML öğelerini tasarlandıkları amaçlar için kullanın.”
İnsanların takıldığı noktalardan biri şudur: sınıf adı anlambilim oluşturmaz. Bir <div> öğesine class="article" veya class="main-nav" adını vermek ona <article> öğesinin içerik modelini ya da <nav> öğesinin örtük navigasyon rolünü kazandırmaz; tarayıcı, ekran okuyucu veya tarayıcı açısından hâlâ genel bir <div>’dir. Anlambilim, onu nasıl stillendirdiğinizde veya etiketlediğinizde değil, seçtiğiniz öğede yaşar.
Bu makale özellikle anlamsal öğeler hakkındadır. Google’ın HTML’nizi nasıl ayrıştırdığı, başlık hiyerarşisi ve geçerlilik hakkındaki daha geniş resim, bu sayfanın altında yer aldığı HTML SEO merkezine aittir; burada aynı şeyleri yeniden tartışmak yerine oraya çapraz bağlantı vereceğim.
Anlamsal HTML SEO’ya gerçekten yardımcı olur mu?
Kısa yanıt: anlamaya yardımcı olur, bir sıralama faktörü değildir ve iki motor bunu biraz farklı çerçeveler. Dürüst sürüm şöyle.
Google ne diyor
Google’s line, repeated by John Mueller, is that semantic HTML is worth doing but isn’t a ranking lever. As Search Engine Journal reported, Mueller said “Semantic HTML does help to understand a page. However, it’s not a magical multiplier for making a website rank higher,” and separately: “Please use semantic HTML. It’s not a ranking factor, but it can help our systems to understand your content better.”
On the <article> element specifically — the one everyone asks about — Mueller was
blunt in an Office Hours session: the <article> element “does not have any
particular effect in Google Search,”
and he added the reason to use it anyway: “Sometimes there are accessibility or
semantic reasons to use a specific kind of markup, so don’t only focus on SEO.”
Google also explicitly says it doesn’t depend on perfect semantics. Its SEO Starter Guide notes that “Having your headings in semantic order is fantastic for screen readers, but from Google Search perspective, it doesn’t matter if you’re using them out of order. The web in general is not valid HTML, so Google Search can rarely depend on semantic meanings hidden in the HTML specification.” That’s an important nuance, not a contradiction: semantic HTML helps at the margins, it doesn’t require perfection, and it isn’t a scored signal.
Google’ın ana içeriğinizi bulmasına nasıl yardımcı olur
Here’s the mechanism that makes semantic HTML useful even though it isn’t a ranking factor. Google has to separate the main content of a page from the boilerplate (nav, header, footer, sidebars, ads) before it can decide what a page is about. Martin Splitt has described the machinery: “We have a thing called the Centerpiece Annotation, for instance, and there’s a few other annotations that we have where we look at the semantic content.” The way Google figures out the topic is natural language processing over the content, not the tag names: “This looks like from all the natural language processing that we did on this entire text content here that we got, it looks like this is primarily about topic A, dog food.” And it down-weights the rest: “We figure out what looks like boilerplate and then, that gets weighted differently as well.”
The key point: that extraction works whether or not your markup is semantic.
Google can untangle a page built entirely from <div>s. But asked directly whether
semantic HTML5 helps, Splitt’s answer was “It does help us, but it’s not the only
thing that we look for. Yes.”
So semantic HTML doesn’t score you higher — it reduces the guesswork in a step Google
already does, which is exactly why it’s a confidence and efficiency signal rather
than a ranking one. To be precise about what it doesn’t do: correct semantic markup
does not guarantee any specific search presentation either — it’s a separate layer
from the eligibility rules that govern rich results (more on that below).
Bing ne diyor (ve neden farklı)
Bing frames this more strongly than Google, and I’m going to leave that difference intact rather than paper over it. Microsoft’s Fabrice Canel has said that pages with correctly implemented semantic HTML5 have “an advantage in SEO” over those that don’t. That’s a stronger claim than Google’s “helps us understand” — Bing ties semantic HTML5 directly to an SEO advantage. Both engines converge on “it helps mechanically,” but they don’t use the same words, and you should know that when you read competing guidance. Neither, to be clear, describes it as a scored ranking factor the way links or relevance are.
Temel anlamsal öğeler ve doğru kullanım biçimleri
Önemli olan varlık değil, doğru kullanımdır. En yaygın hata, anlamsal etiketleri dekorasyon gibi serpiştirmek veya her öğenin ne anlama geldiğini düşünmeden <div> yerine <section> kullanmaktır.
<header> ve <footer>
<header> tanıtıcı içeriği, <footer> ise kapanış içeriğini tutar; ikisi de bağlama bağlıdır. Belge düzeyinde <header> site banner’ınız, <footer> site alt bilginizdir. Ancak bir bloğun kendi girişini ve çıkışını işaretlemek için <article> veya <section> içine de yerleşebilirler (bir makalenin başlığı/yazarı <header>’da, etiketleri <footer>’da). Birden çoğuna sahip olabilirsiniz; her birinin rastgele kutular değil, kendi bağlamındaki tanıtıcı veya kapanış içeriğini sardığından emin olun.
<nav>
<nav> büyük navigasyon bağlantıları blokları içindir — ana menünüz, breadcrumb yolu veya sayfa içi içerik tablosu. Sayfadaki her bağlantı grubu için değildir (gövde içindeki ilgili yazılar listesi <nav> olmak zorunda değildir). Her bağlantı kümesini <nav> içine sarmalamak sinyali sulandırır; onu gerçek navigasyon için ayırın.
<main>
<main>, sitede tekrarlanmayan birincil, benzersiz sayfa içeriğini sarar. İnsanların takıldığı kural şudur: sayfa başına tam olarak bir <main> olmalı ve <article>, <aside>, <header>, <footer> veya <nav> içine yerleştirilmemelidir. “Burada önemli olan içerik budur” diyebileceğiniz en açık tek sinyaldir.
<article> ile <section> (herkesin yanlış yaptığı konu)
Doğru anlaşılması gereken ayrım şudur:
<article>, kendi kendine yeten ve bağımsız dağıtılabilir içerik içindir — sayfadan çıkarılıp bir akışa bırakıldığında da anlamlı kalacak bir şey. Blog yazısı, haber, ürün kartı, forum yazısı, tek bir kullanıcı yorumu. Kendi başına sendikasyona girebiliyorsa<article>’dır.<section>, kendi başlığı olması gereken tematik içerik grubudur. “Yorumlar” bölümü, “Özellikler” bölümü veya bölüm başlığı gibi. Test şudur: içerik bir başlıkla anlam kazanmıyorsa muhtemelen<section>değildir; yalnızca CSS bağlamak için kullanıyorsanız<div>olmalıdır.
<section> genel bir sarmalayıcı değildir. Anlamsal anlamı olmayan bir stil kancasına ihtiyaç duyduğunuzda <div> kullanın; amacı tam olarak budur. “Daha modern hissettiriyor” diye <section>’a yönelmek, öğenin en yaygın yanlış kullanımıdır.
<aside>
<aside> çevresindeki içerikle teğet ilişkili içeriği işaretler — kenar çubuğu, alıntı kutusu, ilgili bağlantılar kutusu, reklam kümesi. “Bu ilişkili ama ana akış değil” sinyali verir; Google’ın zaten çizmeye çalıştığı kalıp içerik ile ana içerik ayrımı tam olarak budur. Bir şeyi yalnızca görsel olarak kenarda duruyor diye kullanmayın; içerik gerçekten ikincil olduğunda kullanın.
Landmark rollerini doğru eşleme (ve anahat efsanesi)
Her landmark öğesi, yardımcı teknolojinin doğrudan okuduğu belirli bir örtük ARIA rolüne eşlenir — görsel olmayan kullanıcının gezindiği hesaplanmış yapı aynıdır; varsaymak yerine gerçek eşlemeyi bilmek değerlidir:
| Öğe | Örtük rol | Not |
|---|---|---|
<header> (belge düzeyi) | banner | Yalnızca üst düzeyde — <article>/<aside>/<main>/<nav>/<section> içine yerleştirildiğinde landmark rolü yoktur. |
<footer> (belge düzeyi) | contentinfo | Aynı uyarı — iç içeyse landmark değildir. |
<nav> | navigation | |
<main> | main | |
<aside> | complementary | |
<article> | article (landmark değil) | Belge yapısı rolüdür; gezinilebilir landmark’lardan biri değildir. |
<section> | region — yalnızca erişilebilir bir adı varsa (ör. başlık aracılığıyla) | Adsız bir <section>’ın hiçbir örtük rolü yoktur; onu <div> yerine kullanmamak için başka bir neden daha. |
Artık bırakmaya değer bir inanış: <section> iç içeliği, başlıklarına örtük olarak daha düşük bir seviye vermez. İlk HTML5, bir başlığın etkin seviyesini sectioning öğelerinin ne kadar derinine yerleştirildiğine göre hesaplayan bir document outline algorithm tanımlıyordu; yani iç içe <h1> teorik olarak <h2> gibi davranabilirdi. Hiçbir tarayıcı veya ekran okuyucu bu algoritmayı uygulamadı; WHATWG spesifikasyonu de o zamandan beri daha basit bir tanım lehine bunu kaldırdı: anahat, belgede ağaç sırasındaki tüm başlıklardan ibarettir. <h1>–<h6> seviyelerinizi açıkça ve okunmasını istediğiniz sırada yazın; iç içelik derinliği bu işi sizin için yapmaz.
Bağlantılar ile düğmeler — eylem ve navigasyon testi
Bu bir landmark öğesi değildir, ancak web’deki en yaygın anlamsal hatadır: <div> yerine stilli bir <span> veya <button> (ya da <a href>) kullanmak veya tersi. WHATWG spesifikasyonu açık: <a> öğesinin href özniteliği yerel hyperlink mekanizmasıdır; <button> öğesi bir eylemi tetikleyen etiketli etkileşimli kontroldür. Test basit: kullanıcıyı bir yere götürüyor mu (yeni URL, yeni sayfa, parça)? <a href> kullanın. Mevcut sayfada bir şey yapıyor mu (form gönderme, modal açma, ayar değiştirme)? <button> kullanın. Birini diğerine benzetmek, doğal olarak ne olduğunu değiştirmez; tıklama işleyicili bir <div>, role, tabindex ve tuş işleyicileriyle bunların tümünü kendiniz yeniden kurmadıkça ne yerel klavye etkinleştirmesine ne de doğru erişilebilir role sahip olur. Doğru öğeyi kullanın.
Tablolar düzen için değil, tablo verileri içindir
İçerik gerçekten satır ve sütunlardan oluşuyorsa — karşılaştırma tablosu, fiyatlandırma ızgarası, veri kümesi — stilli <table>’lerden oluşan bir ızgara yerine gerçek bir <div> kullanın. WHATWG tablolar spesifikasyonu gerçek bir veri modeli tanımlar: <caption> tabloya ad verir, <th> içeren scope başlık hücreleri yardımcı teknolojinin “price, $49” (Türkçe çeviri) “fiyat, $49” yerine satır/sütun ilişkilerini duyurmasını sağlar. <div>’lerden oluşturulan görsel olarak tabloya benzeyen ızgara bu ilişki verilerinin hiçbirini taşımaz; doğru görünür ama doğru okunmaz. <table> öğesini sayfa düzeni için de kullanmayın; bu uygulamanın değiştirdiği eski yanlış kullanımdır.
Alt text görselin amacına bağlıdır
<img> öğesinin bir alt niteliğine ihtiyacı vardır; ancak WHATWG spesifikasyonunun gereklilikleri tek tip değil, amaca bağlıdır: bir ürün fotoğrafı ne gösterildiğini açıklamalıdır; tamamen dekoratif bir görselde, yardımcı teknolojilerin bir dosya adını duyurmak yerine görseli atlaması için alt="" (eksik değil, boş) kullanılmalıdır; aynı zamanda bağlantı olan bir görselde yalnızca resmi değil, bağlantının hedefini veya eylemini açıklayan alt metni bulunmalıdır. Her görselde “SEO için” varsayılan olarak anahtar kelime doldurulmuş alt metin kullanmayın — doğru test bu değildir. Doğru test şudur: bir ekran okuyucu kullanıcısının, aksi hâlde kaçıracağı neyi bilmesi gerekir?
Yerel açılır bileşenler: <details> ve <summary>
“Tıklayarak genişlet” içeriği — SSS’ler, teknik özellik tabloları, spoiler metni — için <details>/<summary> çifti yerel bir açılır bileşendir: <summary> her zaman görünür etikettir ve <details> içindeki içerik, JavaScript olmadan öğenin open durumuna göre gösterilir veya gizlenir. Bu yapı yerleşik klavye desteği ve doğru erişilebilirlik anlamlarını ücretsiz sunar — özel bir <div> artı JavaScript akordeonuna yönelmek, tarayıcının zaten sağladığı davranışı yeniden uygulamak demektir. Yine de yayına almadan önce bunu gerçek hedef tarayıcılarınızda ve ekran okuyucularınızda test edin — <details>/<summary> için oluşturma ve erişilebilirlik ağacına sunulma, tarihsel olarak tarayıcı ve yardımcı teknoloji birleşimine göre değişmiştir; kontrol etmediğiniz bir eşdeğerliği varsaymayın.
Anlamsal HTML ve SEO hakkında yaygın mitler
- “Wrapping content in
<article>boosts rankings.” No — Mueller: the<article>element “does not have any particular effect in Google Search.” - “Semantic HTML is a ranking factor.” No — “not a magical multiplier” and “It’s not a ranking factor, but it can help our systems to understand your content better.”
- “Google requires valid/strict semantic HTML.” No — per the Starter Guide, most of the web isn’t valid HTML and Google “can rarely depend on semantic meanings hidden in the HTML specification.”
- “Heading order has to be perfect for SEO.” Screen readers care; Google ranking doesn’t (same Starter Guide line). The deeper heading-hierarchy treatment belongs to the HTML SEO hub — this is just the brief version.
- “Semantic HTML and Semantic SEO are the same thing.” No — one is markup structure, the other is topical/entity content strategy. Conflating them is why so many search results for “semantic” queries are about the wrong topic.
- “Structured data makes semantic HTML unnecessary.” No — they’re complementary. Semantic HTML gives your structured data a more trustworthy foundation; it doesn’t replace it, and JSON-LD doesn’t fix div soup. And neither one guarantees an outcome: Google’s own structured-data intro is explicit that using supported markup doesn’t guarantee a rich result — eligibility for a specific search feature is a separate set of rules from whether your markup (semantic HTML or JSON-LD) is technically valid.
- “Nesting a
<section>gives its headings an implicit lower rank — you don’t need to drop from<h1>to<h2>inside a nested section.” No — this is a leftover from HTML5’s old document outline algorithm, which would have computed an implicit heading rank from sectioning-element nesting. No browser or screen reader ever implemented it, and the WHATWG HTML spec no longer defines outline computation that way — the outline today is just “all headings in the document, in tree order.” Use explicit, correctly-ordered<h1>–<h6>regardless of how deep your<section>/<article>nesting goes; don’t rely on nesting to do heading-level work for you.
Anlamsal HTML ile Anlamsal SEO’yu karıştırmayın
Aynı kelimeyi paylaştıkları için bunlar sürekli karıştırılıyor ve bu durum her iki konu için de arama sonuçlarını kirletiyor:
- Anlamsal HTML = işaretleme — bir sayfayı yapılandırmak için hangi öğeleri kullandığınız.
- Anlamsal SEO = bir içerik stratejisi — varlıklar ve ilişkili kavramlar etrafında konu otoritesi oluşturmak (burada değil, AI Arama ve içerik sütunları altında yer alan türden bir çalışma).
“Anlamsal SEO” sorgusundan konu modellemesi bekleyerek buraya geldiyseniz bu başka bir makaledir. Bu makale kesinlikle öğeler hakkındadır.
Anlamsal HTML ve AI/LLM tarayıcıları
This is where semantic HTML is quietly getting more relevant, and I’ll flag it as
industry opinion rather than an engine statement. Many LLM crawlers and AI answer
engines don’t render JavaScript — they parse the HTML they’re served. Clean semantic
markup is far easier for them to work with than deeply nested <div> soup. As Barry
Adams puts it, “It’s much simpler for ChatGPT to parse a few dozen semantic HTML
tags rather than several hundred (or even thousand) nested <div> tags,”
and more broadly, “Semantic HTML markup on your webpages can help machine systems
better understand your content and its value.”
Jono Alderson makes the same forward-looking case — that a site is “an interface. An
API. A dataset,”
not just a visual experience — and his one-liner is the whole argument for correct
usage: “If everything is a <div> or a <span>, then nothing is meaningful.”
Treat all of this as a good directional reason to keep your markup clean, not as a
promise from Google or Bing.
Mevcut sayfalar nasıl denetlenir ve dönüştürülür
Gerçek sitelerin çoğu zaten div çorbasıdır ve onları bir gecede yeniden kuramazsınız. Pratik bir dönüşüm sırası:
- Önce yer işaretlerini oluşturun. Tam olarak bir
<main>, bir belge<header>,<footer>ve birincil menü için bir<nav>olduğundan emin olun. Bu yer işareti öğeleri hem ana içerik çıkarımı hem de erişilebilirlik için en fazla işi yapar. - Kendi başına durabilen blokları
<article>öğesine dönüştürün. Blog yazıları, ürün kartları, yorumlar — bir akışta tek başına durabilecek her şey. - Gerçek temalı grupları
<section>öğesine dönüştürün — ancak yalnızca gerçek bir başlık varsa. Başlık yoksa bunu<div>olarak bırakın. - Kenar çubuklarını ve ilgili içerik kutularını
<aside>içine taşıyın. - Sahte bağlantıları ve sahte düğmeleri düzeltin. Tıklama işleyicisi olan biçimlendirilmiş bir
<div>, gezinme yapıyorsa bir<a href>, sayfada işlem yapıyorsa bir<button>olmalıdır — bu genellikle klavye ve ekran okuyucu kullanıcıları için en yüksek değerli tek düzeltmedir. <div>öğelerinden oluşan tablo benzeri ızgaraları gerçek<table>öğelerine dönüştürün; içerik gerçekten tablo biçimindeyse başlık hücreleri için<caption>ve<th>kullanın.- Aşırı dönüştürmeyin. Yalnızca stil/düzen kancası olarak kullanılan bir
<div>doğrudur. Her şeyin anlamsal bir öğeye ihtiyacı yoktur; zorla bir öğe kullanmak kendi başına bir hatadır. - Varsaymayın, doğrulayın. Tarayıcınızın DevTools’unda erişilebilirlik ağacını kontrol edin — işaretlemenizin ürettiği yer işareti rollerini gösterir; makinelerin okuduğu yapı da aynıdır.
Bu, HTML SEO merkezine nasıl bağlanır?
Bu makale, arama motorlarının HTML’nizi nasıl ayrıştırdığı ve kullandığına ilişkin daha geniş soruyu ele alan üst HTML SEO merkezinin altındaki ayrıntılı incelemelerden biridir — başlık hiyerarşisi, HTML geçerliliği ve hoşgörülü ayrıştırıcıların dağınık işaretlemeyi nasıl ele aldığı. Bu sayfanın kapsamını kasıtlı olarak anlamsal öğelerin kendileriyle sınırladım ve bu konuları merkeze ve kardeş makalelerine bıraktım. Anlamsal HTML ayrıca yapılandırılmış veri ile doğrudan eşleşir: işaretleme şemanız için güvenilir bir temel sağlar ve ikisi tamamlayıcı işler yapar.
SSS
Anlamsal HTML SEO’ya yardımcı olur mu, yoksa yalnızca erişilebilirlik için mi? Her ikisi de — arama motorlarının ana içeriğinizi belirlemesine yardımcı olur ve erişilebilirlik için gereklidir. Ancak bir sıralama faktörü değildir.
Does using the <article> tag improve rankings? No. Mueller: it “does not have any
particular effect in Google Search.”
<article> ile <section> arasındaki fark nedir? <article> bir akışta tek başına durabilecek, kendi içinde tamamlanmış içeriktir; <section> kendi başlığı olan temalı bir gruplamadır. İkisinin de amacı <div> yerine geçmek değildir.
Bir sayfada birden fazla <main> öğesi olabilir mi? Hayır — sayfa başına bir <main>.
Google bir sayfanın sıralanması için geçerli HTML gerektirir mi? Hayır — web’in çoğu geçerli HTML değildir ve Google “can rarely depend on semantic meanings hidden in the HTML specification.” (Türkçe: “HTML spesifikasyonunda gizli anlamsal anlamlara nadiren güvenebilir.”)
Anlamsal HTML ile anlamsal SEO aynı şey midir? Hayır — biri işaretleme, diğeri konu/varlık içerik stratejisidir.
Tıklanabilir bir öğe için <a> mı yoksa <button> mı kullanmalıyım? Ne yaptığına bağlıdır. Bir URL’ye veya parçaya gidiyorsa <a href> kullanın. Geçerli sayfada bir işlem gerçekleştiriyorsa (gönderme, geçiş, modal açma) <button> kullanın. Biçimlendirilmiş bir <div> ve tıklama işleyicisiyle bunlardan birinin sahtesini oluşturmayın.
<section> içine yerleştirmek kullanmam gereken başlık seviyesini değiştirir mi? Hayır. Bölümleme iç içeliğinden örtük bir başlık sırası hesaplayacak olan HTML5’in eski belge anahattı algoritması hiçbir tarayıcı veya ekran okuyucu tarafından uygulanmadı ve güncel spesifikasyon anahatları bu şekilde tanımlamıyor. İç içeliğin derinliği ne olursa olsun açıkça ve doğru sıralanmış <h1>–<h6> seviyelerini kullanın.
Doğru anlamsal HTML veya yapılandırılmış veri zengin sonucu garanti eder mi? Hayır. Google’ın kendi yapılandırılmış veri belgeleri, desteklenen işaretlemenin belirli bir arama görünümünü garanti etmediğini söyler — bir özellik için uygunluk, işaretlemenizin teknik olarak geçerli olup olmamasından ayrıdır.
Evidence for this claim Semantic HTML and search structured data are distinct layers: native elements describe document content and controls, while supported structured-data markup supplies feature-specific machine-readable properties; valid markup does not guarantee a rich result or ranking gain. Scope: supported structured-data features Confidence: high · Verified: Introduction to structured data markup in Google SearchAI özeti
Gelişmiş sürümün kısa özeti:
- Anlamsal HTML = öğeleri amaçlanan anlamları için kullanmak (
<main>,<article>,<section>,<nav>,<header>,<aside>,<footer>); böylece işaretleme içeriğin ne olduğunu söyler. Görünümü CSS yönetir. - Bir sıralama faktörü değildir. Mueller: “not a magical multiplier”;
<article>öğesinin Google Arama’da “no particular effect”i vardır. Onu sıralama puanları için değil, erişilebilirlik/açıklık için kullanın. - Ana içerik çıkarımına yardımcı olur. Google’ın merkezî açıklaması, işaretlemeden bağımsız olarak NLP yoluyla ana içeriği şablon metninden ayırır (Splitt); bu yüzden div çorbasında da çalışır — ancak anlamsal işaretleme tahmini azaltır. Splitt: “It does help us, but it’s not the only thing that we look for.”
- Google geçerli HTML gerektirmez. Starter Guide: web’in çoğu geçerli değildir, bu nedenle Google “can rarely depend on semantic meanings hidden in the HTML specification.”
- Bing bunu daha güçlü ifade eder. Fabrice Canel: anlamsal HTML5 SEO’da “an advantage” sağlar. Aradaki farkı dürüstçe not edin — Bing’in ifadesi Google’ınkinden daha güçlüdür; ikisi de buna puanlanan bir sıralama faktörü demez.
- Varlık değil, doğru kullanım önemlidir: bir
<main>;<article>= kendi içinde tamamlanmış;<section>= başlıklı temalı grup,<div>yerine geçmez;<nav>= yalnızca büyük gezinme;<aside>= teğet içerik. - Yer işareti öğeleri belirli örtük ARIA rollerine eşlenir (
<header>→banner,<nav>→navigation,<main>→main,<aside>→complementary,<footer>→contentinfo— yalnızca belge seviyesinde; bir bölümün içine iç içe yerleştirildiklerinde yer işareti değildirler).<section>yalnızca erişilebilir bir adı varsa bir yer işaretidir (region);<article>hiç yer işareti değildir. - Belge anahattı algoritması miti:
<section>içine yerleştirmek başlıklarına örtük olarak daha düşük bir sıra vermez. Bu algoritma hiçbir tarayıcı veya ekran okuyucu tarafından uygulanmadı ve WHATWG spesifikasyonu artık anahatları bu şekilde tanımlamıyor — açık<h1>–<h6>seviyeleri yazın. - Yer işaretlerinin ötesinde: gezinme için
<a href>, sayfa içi eylemler için<button>; tablo biçimindeki veriler için (<caption>/<th>içeren) gerçek<table>,<div>ızgaraları değil; görsellerde amaca dayalıaltmetni (dekoratif görseller içinalt=""); yerel açılır bileşenler için<details>/<summary>kullanın — yayına almadan önce tarayıcı/AT oluşturmasını test edin. - Bunu Anlamsal SEO ile karıştırmayın (varlık/konu stratejisi) — aynı kelime, farklı şey. Yapılandırılmış veri anlamsal HTML’yi tamamlar, onun yerini almaz; ikisi de zengin sonucu veya sıralama artışını garanti etmez.
Resmî belgeler
Arama motorlarından ve standart kuruluşlarından birincil kaynak belgeleri ve stil rehberleri.
- SEO Başlangıç Rehberi — başlık sırası/anlamsal anlamlar uyarısını da içeren “odaklanmamanız gereken şeyler” bölümü.
- Google Geliştirici Belgeleri Stil Rehberi — HTML ve anlamsal etiketleme — “HTML öğelerini tasarlanma amaçları için kullanın.”
- web.dev — HTML öğrenin: Anlamsal HTML — yer işareti öğeleri ve erişilebilirlik rolleri hakkında Google’ın kendi öğrenme modülü.
Standartlar / referans
- MDN — Anlambilim (sözlük) — anlamsal öğeler ile anlamsal olmayan sarmalayıcıların kanonik tanımı.
- WHATWG HTML Living Standard — Sections —
<article>,<section>,<nav>,<aside>,<header>,<footer>tanımları, içerik modelleri ve bir belgenin anahatının güncel (algoritmik olmayan) tanımı. - WHATWG HTML Living Standard — Links —
<a>öğesi ve köprü anlambilimi. - WHATWG HTML Living Standard — The button element — yerel etkileşimli kontrol anlambilimi.
- WHATWG HTML Living Standard — Tabular data —
<table>,<caption>, başlık hücresi ve veri-ilişki anlambilimi. - WHATWG HTML Living Standard — Images — amaca/bağlama göre
<img>alternatif metni gereklilikleri. - WHATWG HTML Living Standard — The details and summary elements — yerel açılır bileşen.
- MDN — ARIA rolleri referansı — bölümleme öğeleri için örtük yer işareti rolü eşlemeleri.
- W3C WAI — Sayfa Yapısı Eğitimi — yerel bölgelerin ve başlıkların yardımcı teknoloji gezinmesini nasıl desteklediği.
Bing / Microsoft
- Kalicube — HTML5 Anlamsal Etiketleri (Fabrice Canel) — Canel’in anlamsal HTML5’in “SEO’da avantaj” sağladığı görüşünün kaynağı.
Kaynaktan alıntılar
Google ve Bing’den kayda geçmiş ifadeler. Kaynak sayfa desteklediğinde her bağlantı, alıntılanan bölüme atlayan bir derin bağlantıdır.
Google — bir sıralama faktörü değil (John Mueller)
- “Semantic HTML does help to understand a page. However, it’s not a magical multiplier for making a website rank higher.” — John Mueller, Google, Search Engine Journal aracılığıyla. Kapsamı okuyun
- “Please use semantic HTML. It’s not a ranking factor, but it can help our systems to understand your content better.” — John Mueller, Google, aynı kaynak. Kapsamı okuyun (Türkçe açıklama: “Anlamsal HTML bir sayfayı anlamaya yardımcı olur. Ancak bir web sitesinin daha üst sıralanmasını sağlayan sihirli bir çarpan değildir.” / “Lütfen anlamsal HTML kullanın. Bu bir sıralama faktörü değildir, ancak sistemlerimizin içeriğinizi daha iyi anlamasına yardımcı olabilir.”)
Google — özellikle <article> öğesi (John Mueller)
- “The
<article>HTML element does not have any particular effect in Google Search.” — John Mueller, Google SEO Office Hours, Search Engine Journal aracılığıyla. Kapsamı okuyun - “Sometimes there are accessibility or semantic reasons to use a specific kind of markup, so don’t only focus on SEO.”
— John Mueller, Google SEO Office Hours, aynı kaynak.
Kapsamı okuyun
(Türkçe açıklama: “
<article>HTML öğesinin Google Arama’da herhangi bir özel etkisi yoktur.” / “Bazen belirli bir işaretleme türünü kullanmak için erişilebilirlik veya anlambilim nedenleri vardır; bu yüzden yalnızca SEO’ya odaklanmayın.”)
Google — ana içerik çıkarımı (Martin Splitt)
- “We have a thing called the Centerpiece Annotation, for instance, and there’s a few other annotations that we have where we look at the semantic content.” — Martin Splitt, Google, Search Engine Journal aracılığıyla. Kapsamı okuyun
- “We figure out what looks like boilerplate and then, that gets weighted differently as well.” — Martin Splitt, aynı kaynak. Kapsamı okuyun
- “It does help us, but it’s not the only thing that we look for. Yes.” — Martin Splitt, anlamsal HTML5’in Google’a yardımcı olup olmadığı sorusuna doğrudan yanıt. Alıntıya git (Türkçe açıklama: “Örneğin Centerpiece Annotation adında bir şeyimiz var ve anlamsal içeriğe baktığımız birkaç başka açıklamamız da var.” / “Şablon gibi görünen şeyi belirliyoruz ve bu da farklı şekilde ağırlıklandırılıyor.” / “Bize yardımcı oluyor, ancak baktığımız tek şey bu değil. Evet.”)
Google — geçerli/spesifikasyon anlambilimine bağlı değil (SEO Başlangıç Rehberi)
- “Having your headings in semantic order is fantastic for screen readers, but from Google Search perspective, it doesn’t matter if you’re using them out of order. The web in general is not valid HTML, so Google Search can rarely depend on semantic meanings hidden in the HTML specification.” — Google SEO Başlangıç Rehberi. Alıntıya git (Türkçe açıklama: “Başlıklarınızı anlamsal sırada tutmak ekran okuyucular için harikadır, ancak Google Arama açısından onları sıra dışı kullanmanız önemli değildir. Web genel olarak geçerli HTML değildir; bu nedenle Google Arama HTML spesifikasyonunda gizli anlamsal anlamlara nadiren güvenebilir.”)
Google — öğeleri amaçları için kullanın (Stil Rehberi)
- “Use HTML elements for the purposes that they were designed for.” — Google Geliştirici Belgeleri Stil Rehberi. Kaynağı okuyun (Türkçe açıklama: “HTML öğelerini tasarlanma amaçları için kullanın.”)
Bing / Microsoft (Fabrice Canel)
Microsoft Bing’den Fabrice Canel, doğru uygulanmış anlamsal HTML5’e sahip sayfaların SEO’da sahip olmayanlara göre avantajlı olduğunu söyledi — Bing’in çerçevesi Google’ın “anlamaya yardımcı olur” ifadesinden daha güçlü olsa da bu hâlâ puanlanan bir sıralama faktörü olarak tanımlanmıyor. Kelimesi kelimesine alıntı değil, özetlenmiştir: bu ifade ikincil bir atıfla (Kalicube) bulunmuştur; doğrudan alıntı olarak ele almadan önce tam ifadeyi özgün kaynakla doğrulayın. Kaynağı okuyun
Not: Mueller ve Splitt satırları, Google’ın videoları/Office Hours ve centerpiece-annotation raporlamasına ilişkin Search Engine Journal’ın aynı dönemdeki kapsamı üzerinden aktarılmıştır — özgün kaynaklarla doğrulanmadan kesin kabul edilmemesi gereken ikincil kaynaklı aktarımlardır. Splitt’in “It does help us…” satırı ve Başlangıç Rehberi satırı#:~:text= derin bağlantıları taşır; diğerleri kaynak makaleye bağlanır. Bu blok hangi öğeye ihtiyaç duyuyor?
Makale-bölüm-div sorusu (ve diğer yer işareti seçimleri) bir stil tercihi değil, gerçek bir dallanmadır. Her adımda dürüstçe yanıtlayın — test her zaman “bu içerik gerçekte ne yapıyor?” olmalıdır; “daha modern görünen ne?” değil.
Choosing the right semantic element
Ne yapılmamalı
Bunlar yukarıdaki mitlerin işaret ettiği gerçek hatalardır — her birinde neden yanlış olduğu ve bunun yerine ne yapılacağı açıklanır.
-
Sıralama artışı bekleyerek içeriği
<article>içine almak. Bunun yanlış olmasının nedeni: Mueller bu öğenin “does not have any particular effect in Google Search.” olduğunu söyledi. Bunun yerine: içeriğin gerçekten kendi içinde tamamlanmış olduğu (bir akışta tek başına durabileceği) durumlarda, erişilebilirlik ve açıklık için<article>kullanın — SEO kolu olarak değil. -
Anlamsal HTML’yi genel olarak puanlanan bir sıralama faktörü saymak. Bunun yanlış olmasının nedeni: bu bir “not a magical multiplier” ve peşinden gidilecek puanlanan bir sinyal yok. Bunun yerine: işi, beklenen bir sıralama artışı olan bir sıralama projesi olarak değil, gerçek (sıralama olarak ölçülemese de) getirisi bulunan bir anlama/erişilebilirlik yatırımı olarak bütçelendirin.
-
Obsessing over perfect heading order or strict validity for Google’s sake. Why it’s wrong: Google’s own Starter Guide says “the web in general is not valid HTML, so Google Search can rarely depend on semantic meanings hidden in the HTML specification.” What to do instead: fix heading order and validity for screen readers and users — that’s where it actually matters — not because Google is scoring it.
-
“Daha modern hissettirdiği” için
<section>öğesini<div>yerine kullanmak. Bunun yanlış olmasının nedeni: başlığı olmayan<section>temalı bir gruplama değil, dekorasyondur — bu, öğenin en yaygın yanlış kullanımıdır. Bunun yerine: bloğun kendi başlığıyla anlamı yoksa<div>kullanın. -
Anlamsal HTML ile Anlamsal SEO’yu karıştırmak. Bunun yanlış olmasının nedeni: biri işaretleme yapısı, diğeri konu/varlık içerik stratejisidir — bunları karıştırmak, sahip olduğunuz hedef için yanlış şeyi optimize etmek demektir. Bunun yerine: ikisini ayrı tutun; bu makale yalnızca öğeler hakkındadır.
-
Yapılandırılmış veri zaten mevcut olduğu için anlamsal HTML’yi atlamak. Bunun yanlış olmasının nedeni: JSON-LD div çorbasını düzeltmez ve yapılandırılmış veri işaretleme yapısının yerini tutmaz. Bunun yerine: ikisini de kullanın — yapılandırılmış veri anlamsal bir temelin üzerinde durur, onun yerini almaz. İkisi de zengin sonucu garanti etmez — bu, işaretleme geçerliliğinden ayrı bir uygunluk sorusudur.
-
Başlıkları “daha düşük seviyedeymiş gibi” göstermek için
<section>öğelerini iç içe yerleştirmek. Bunun yanlış olmasının nedeni: bu, hiçbir tarayıcı veya ekran okuyucunun uygulamadığı ve güncel WHATWG spesifikasyonunun artık bu şekilde tanımlamadığı HTML5’in eski belge anahattı algoritmasına dayanır. Bunun yerine: açıkça ve doğru sıralanmış<h1>–<h6>seviyeleri yazın — iç içelik derinliğinin gerçekten kastettiğiniz başlık sırasının yerine geçmesine izin vermeyin. -
<div>veya<a href>yerine tıklama işleyicisi olan bir<button>kullanmak. Bunun yanlış olmasının nedeni:role,tabindexve tuş işleyicileriyle her ikisini de elle yeniden oluşturmadığınız sürece yerel klavye etkinleştirmesini ve doğru erişilebilirlik rolünü kaybedersiniz. Bunun yerine: eylem bir yere yönlendiriyorsa<a href>, geçerli sayfada bir şey yapıyorsa<button>kullanın — yerel davranışı ücretsiz edinin.
Yer işareti öğelerine genel bakış
Bu makalenin ele aldığı yedi öğe, her birinin gerçekte ne için olduğu ve kaçınılması gereken yanlış kullanım biçimi.
| Öğe | Kullanım amacı | Yaygın yanlış kullanım |
|---|---|---|
<header> | Giriş içeriği — site banner’ı veya bir makale/bölümün kendi başlığı/yazarı | Gerçekte giriş niteliği taşımayan içerik için kullanmak |
<nav> | Büyük gezinme — ana menü, ekmek kırıntıları, sayfa içi içindekiler | Her bağlantı kümesini (ör. ilgili yazılar listesini) <nav> içine alarak sinyali seyreltmek |
<main> | Sayfanın tek birincil, benzersiz içeriği | Birden fazla <main> bulundurmak veya onu <article>/<aside>/<header>/<footer>/<nav> içine yerleştirmek |
<article> | Bir akışta tek başına durabilecek, kendi içinde tamamlanmış içerik (yazı, ürün kartı, yorum) | Sıralamayı yükseltmeyi denemek için yalnızca kullanmak — Mueller’e göre “no particular effect” |
<section> | Kendi başlığı olan temalı içerik gruplaması | Başlık ve gerçek tema olmadan genel <div> yerine kullanmak |
<aside> | Teğet içerik — kenar çubuğu, alıntı, ilgili bağlantı kutusu, reklam | Bir şey yalnızca görsel olarak kenarda duruyor diye, gerçekten ikincil olduğu için değil, kullanmak |
<footer> | Kapanış içeriği — site altbilgisi veya bir makale/bölümün kendi etiketleri/üst verileri | Bir bloğun altındaki her şeyi boşaltma alanı gibi ele almak |
Pratik bir kural: bir blok kendi başına sendikasyona gidebiliyorsa <article>’dır; anlamlı olması için başlığa ihtiyaç duyuyorsa <section>’dır; ikisi de değilse <div>’dır.
Yer işaretlerinin ötesinde: etkileşimli ve veri öğeleri
| Öğe | Kullanım amacı | Yaygın yanlış kullanım |
|---|---|---|
<a href> | Bir URL’ye veya parçaya gitmek | URL’yi değiştiren tıklama işleyicisiyle biçimlendirilmiş bir <div>/<span> kullanarak bağlantı taklidi yapmak |
<button> | Geçerli sayfada bir eylem (gönderme, geçiş, açma) | Biçimlendirilmiş bir <div> ile düğme taklidi yapmak — yerel klavye etkinleştirmesini ve rolünü kaybeder |
<table> | <caption>/<th> içeren gerçek tablo verileri | Gerçek veri yerine sayfa düzeni için kullanmak (veya öyleymiş gibi davranan bir <div> ızgarası kullanmak) |
<img alt="..."> | Görselin ne gösterdiğinin, oradaki amacına göre sınırlandırılmış açıklaması | Anahtar kelimelerle doldurulmuş alt metin veya dekoratif görsellerde alt="" niteliğinin eksik olması |
<details>/<summary> | Yerel, JavaScript’siz bir açılır bileşen | Yerel öğeyi kullanmak yerine <div>+JavaScript ile akordeon yeniden oluşturmak |
HTML’yi dönüştürme istemleri
Bu makalenin ele aldığı belirli görev için kopyalamaya hazır istemler: div çorbasını bulmak ve doğru anlamsal işaretlemeye dönüştürmek. Sayfanızın HTML’sini (oluşturulmuş DOM’u değil, kaynak görüntüsünü) bunlardan biriyle bir AI asistanına yapıştırın.
Div çorbasını işaretle ve değişiklikler öner
Here is the HTML for one of my pages. Identify every <div> or <span> that is standing
in for a semantic landmark, and suggest the correct replacement element from this list:
header, nav, main, article, section, aside, footer. For each suggestion, explain which
test it passes (e.g. "this could stand alone in a feed, so it's an <article>" or "this
has its own heading and one theme, so it's a <section>"). Flag any block that should
stay a <div> because it's purely a styling/layout hook.
[paste HTML here]Yer işareti yapısal hatalarını kontrol et
Review this page's HTML for these specific structural mistakes: more than one <main>
element, a <main> nested inside <article>/<aside>/<header>/<footer>/<nav>, a <nav>
wrapping something that isn't major navigation, or a <section> with no heading. List
each problem found with the line/snippet and the fix.
[paste HTML here]Bir dönüşüm sırasına öncelik ver
Given this page's HTML, tell me which landmark to fix first for the biggest
accessibility and main-content-extraction benefit: establishing <main>/<header>/
<footer>/<nav>, converting self-contained blocks to <article>, converting themed
groups to <section>, or moving sidebars to <aside>. Order the fixes and say what
"done" looks like for each.
[paste HTML here] Yer işaretleri amaçlanan yapınızla eşleşiyor
Çalıştırılacak test: Dönüştürülmüş sayfada tarayıcınızın DevTools erişilebilirlik ağacını açın (Chrome/Edge: DevTools → Elements → Accessibility bölmesi).
Beklenen sonuç: Listelenen yer işareti rolleri (banner, navigation, main, complementary, contentinfo), gerçekten yazdığınız anlamsal öğelerle eşleşir — bir main/“main” rolü, bir banner vb.
Başarısızlık yorumu: Eksik veya yinelenmiş bir yer işareti rolü, işaretlemenin amaçladığınız yapıyı üretmediği anlamına gelir (ör. ikinci bir <main> veya dönüştürülmesi gereken bir <div>).
İzleme penceresi: Hemen — dönüşümü dağıttıktan sonra kontrol edin.
Geri alma tetikleyicisi: Birden fazla main/“main” yer işareti veya olması gereken yerde iç içe olmayan bir yer işareti (ör. main içinde article), geri alıp işaretlemeyi yeniden kontrol etmeniz gerektiği anlamına gelir.
Sayfa başına tam olarak bir <main>
Çalıştırılacak test: Oluşturulmuş HTML’de (veya kaynak görüntüsünde) grep -o "<main" page.html | wc -l çalıştırın ya da DevTools’un Elements panelinde <main arayın.
Beklenen sonuç: Tam olarak bir eşleşme.
Başarısızlık yorumu: Sıfır eşleşme birincil içerik yer işaretinin ayarlanmadığı, birden fazla eşleşme ise ana içerik hakkındaki “en açık tek sinyalin” artık belirsiz olduğu anlamına gelir.
İzleme penceresi: Hemen, dağıtım sırasında.
Geri alma tetikleyicisi: Tam olarak bir olmayan her sayı.
Oluşturulmayan tarayıcılar da yapıyı görür
Çalıştırılacak test: Sayfayı düz bir HTTP istemcisiyle (oluşturulmuş DOM değil, curl veya “view page source”) getirin ve anlamsal öğelerin daha sonra eklenen istemci tarafı JavaScript ile değil, ham yanıtta bulunduğunu doğrulayın.
Beklenen sonuç: <header>, <nav>, <main>, <article>/<section>, <aside> ve <footer> öğelerinin tümü ilk HTML yükünde görünür.
Başarısızlık yorumu: Anlamsal etiketler yalnızca JS yürütüldükten sonra görünüyorsa, yukarıdaki AI/LLM tarayıcısı noktasına göre JavaScript çalıştırmayan tarayıcılar yapıyı hiç göremez.
İzleme penceresi: Hemen — şablonlama veya bir JS çerçevesi sayfanın oluşturulma biçimini her değiştirdiğinde yeniden kontrol edin.
Geri alma tetikleyicisi: Anlamsal yer işaretleri oluşturulmuş DOM’da bulunup ham HTML yanıtında bulunmuyorsa.
Başlık seviyeleri iç içelikten miras alınmaz
Çalıştırılacak test: Tarayıcınızın DevTools erişilebilirlik ağacında (veya anahat kontrolü yapan bir uzantıda) başlık seviyelerini belge sırasıyla listeleyin ve her birini, başlığın iç içe <h1>/<h6> öğelerinin ne kadar derininde olduğuna bakmadan kaynak koddaki gerçek <section>–<article> etiketleriyle karşılaştırın.
Beklenen sonuç: Her başlık için bildirilen seviye gerçek etiketiyle eşleşir (bir <h2>, kaç bölümün içine iç içe olursa olsun seviye 2 olarak bildirilir) — iç içelikten kaynaklanan örtük bir düşürme yoktur.
Başarısızlık yorumu: Şablonunuz veya bileşen kütüphaneniz <section> iç içeliğinin başlığın sırasını “otomatik olarak” düşürdüğüne güveniyorsa bu varsayım geçerli değildir — eski belge anahattı algoritması hiçbir zaman uygulanmadı ve güncel spesifikasyon anahatları bu şekilde hesaplamıyor. Gerçek başlık etiketlerini düzeltin.
İzleme penceresi: Hemen ve yeni bir şablon veya bileşen deseni iç içe bölümler eklediğinde.
Geri alma tetikleyicisi: Oluşturulan/duyurulan başlık seviyesi gerçek <h1>–<h6> etiketiyle eşleşmiyorsa.
Sahte bağlantılar ve sahte düğmeler klavyeyle erişilebilir
Çalıştırılacak test: Yalnızca klavyeyi kullanarak sayfada Tab tuşuyla ilerleyin ve tıklanabilir her öğeyi Enter/Space ile etkinleştirmeyi deneyin; ayrıca erişilebilirlik ağacında her tıklanabilir öğenin bildirdiği rolü kontrol edin.
Beklenen sonuç: Gezinme yapan öğeler link (yerel <a href>), sayfada işlem yapan öğeler button (yerel <button>) olarak bildirilir ve her ikisine de ek role/tabindex/tuş işleyicisi kodu olmadan klavyeyle erişilebilir ve etkinleştirilebilir.
Başarısızlık yorumu: Klavye ile erişilemeyen veya <div>/<span> yerine genel bir rol bildiren tıklama işleyicili bir link veya button, ARIA ile yamalanmak yerine yerel öğeye dönüştürülmesi gerektiği anlamına gelir.
İzleme penceresi: Hemen — bileşen kütüphanesi veya tasarım sistemi etkileşimli öğelerde değişiklik yaptığında yeniden kontrol edin.
Geri alma tetikleyicisi: Yalnızca klavyeyle erişilemeyen veya etkinleştirilemeyen herhangi bir tıklanabilir kontrol.
Kendinizi test edin: Anlamsal HTML
Anlamsal HTML’nin ne yaptığı ve (SEO için) ne yapmadığı hakkında beş kısa soru. Her biri için bir yanıt seçin, ardından kontrol edin.
Değişiklik günlüğü
8 Ağu 2026 tarihinde güncellendi.
Editoryal özet ve kaydedilen değişiklik ayrıntıları.Değişiklik ayrıntıları
-
Ayrıntılı değişiklik notları şu anda İngilizce olarak mevcut.
Tam karşılaştırma kullanılamıyor — bu sürüm için önceki anlık görüntü arşivlenmemiş.
8 Ağu 2026 tarihinde güncellendi.
Editoryal özet ve kaydedilen değişiklik ayrıntıları.Değişiklik ayrıntıları
-
Ayrıntılı değişiklik notları şu anda İngilizce olarak mevcut.
Tam karşılaştırma kullanılamıyor — bu sürüm için önceki anlık görüntü arşivlenmemiş.
18 Tem 2026 tarihinde güncellendi.
Editoryal özet ve kaydedilen değişiklik ayrıntıları.Değişiklik ayrıntıları
-
Ayrıntılı değişiklik notları şu anda İngilizce olarak mevcut.
-
Ayrıntılı değişiklik notları şu anda İngilizce olarak mevcut.
-
Ayrıntılı değişiklik notları şu anda İngilizce olarak mevcut.
Tam karşılaştırma kullanılamıyor — bu sürüm için önceki anlık görüntü arşivlenmemiş.