--- title: "Semantik HTML nedir?" author: Androverse author_url: https://androverse.com.tr/yazar/androverse publisher: Androverse updated_at: 2026-10-15 url: https://androverse.com.tr/sozluk/semantik-html language: tr --- # Semantik HTML nedir? Semantik HTML, içeriğin yapısını ve işlevini uygun HTML öğeleriyle ifade etmektir. Diğer adlar: Semantic HTML. ## Nerede işine yarar? Başlık, ana içerik, gezinme, liste ve düğme için anlamına uygun öğeler kullanılır. Böylece tarayıcı ve yardımcı teknoloji yapı hakkında bilgi alır. Görsel yerleşim tek başına bu ilişkileri anlatmaz; DOM sırası ve etiketler de aynı anlamı taşımalıdır. ## Bir cümlede uygulaması Tıklanan bir div yerine button, sayfanın ana içeriğinde main kullanmak. ## Neyle karıştırılmamalı? Bir öğenin büyük yazılması onu başlık yapmaz; görsel stil ile belge yapısı ayrı kararlardır. ## Bir başlık sadece büyük yazı değildir Bir yazı sayfasında ana başlık, bölüm başlıkları, paragraf ve ilgili bağlantılar bulunuyor. Görsel tasarım bunları boyut ve boşlukla ayırabilir, fakat HTML yapısı da ilişkilerini anlatmalıdır. Semantik HTML, öğeleri taşıdıkları anlama göre seçmektir. Bir metni büyük göstermek onu otomatik olarak başlık yapmaz; bir kapsayıcıya tıklama olayı eklemek de onu gerçek bir düğmeye dönüştürmez. Örnek bir sözlük sayfasında terim adı ana başlık, kullanım açıklaması ayrı bölüm, karşılaştırma ise kendi alt başlığıyla sunulabilir. Bu yapı içerik sırasını görünür kılar ve yardımcı teknolojilerin belgeyi yorumlamasına destek olur. Ekran değiştiğinde veya stiller farklı işlendiğinde anlamın tamamen kaybolmaması gerekir. Tasarımın altında yalnız rastgele kapsayıcılar değil, gerçek içerik ilişkileri bulunmalıdır. MDN semantik açıklaması, HTML öğesinin içeriğin anlamını ifade etmesini vurgular. Buradan çıkan pratik karar, etiketi yalnız görünüm elde etmek için seçmemektir. Daha küçük başlık gerekiyorsa doğru başlık seviyesini değiştirip hiyerarşiyi bozmak yerine stil düzenlenebilir. Aynı şekilde yalnız kenar boşluğu almak için konu bölümü etiketi eklemek yerine sıradan bir kapsayıcı kullanılabilir. Her etikete anlam yüklemek, gereksiz yere anlam icat etmek değildir. Semantik yapı içerik üretimiyle de ilişkilidir. Editör yeni bir bölüm eklerken başlığın seviyesini yalnız font boyutuna göre seçiyorsa belge zamanla dağılabilir. Yayın aracındaki seçenekler ve kısa kullanım kuralları bu hatayı azaltabilir. Tasarım sistemi başlıkların görünümünü, içerik modeli ise ilişkisini açıkça taşımalıdır. Böylece aynı yapıyı farklı sayfa türlerinde korurken kompozisyonun amaca göre değişmesine alan açılır. İçerik modelinde anlamlı alanlar tanımlamak semantik yapının korunmasına yardım eder. Editörün bütün sayfayı tek bir serbest metin alanında düzenlemesi yerine başlık, açıklama, görsel ve kaynak gibi alanlar uygun bağlamda ayrılabilir. Ancak aşırı katı bir model, farklı içeriklerin hepsini aynı şablona sıkıştırabilir. Ortak yapıyı korurken gerçek bölüm ihtiyacına yer açmak gerekir. Bir sözlükte tanım ve karşılaştırma, bir projede kapsam ve uygulama, bir yazıda bölüm ve örnek farklı ilişkiler taşır. HTML bu ilişkileri doğru ifade ettiğinde görsel kompozisyon da sağlam bir zemine oturur. Model, tasarım ve yayın dili birbirini desteklemelidir. ### Belge yapısı Ana içerik, gezinme ve bağımsız içerik bölümlerinin rolünü düşün. Her alanın anlamlı bir sınırı olup olmadığını sor. Yalnız yerleşim için kullanılan kapsayıcı ile gerçek konu bölümü aynı şey değildir. Yapı, sayfadaki bilgi ilişkisini açıklamalı; etiket sayısını artırmak hedef olmamalı. ### Başlık ilişkisi Başlık seviyelerini görsel büyüklüğe değil içerik hiyerarşisine göre seç. Bir ana başlığın altında alt konular tutarlı biçimde ilerlesin. Sayfayı yalnız başlıklardan okuyunca düşünce sırası anlaşılmalı. Büyük bir slogan ile gerçek bölüm başlığı aynı anlamsal görevi taşımayabilir. ### Eylemin türü Başka bir adrese gitmek ile sayfa içinde işlem yapmak farklı davranışlardır. Bağlantı ve düğme bu farkı ifade eder. Kontrolü yalnız CSS görünümüne göre seçmek tarayıcı beklentilerini bozabilir. Ortak tasarım bileşeni doğru yerel öğeyi üretirken aynı görsel karakteri koruyabilir. ## Görsel stil ile anlamsal yapı ### CSS’nin işi Renk, ölçü, boşluk ve yerleşim içeriklerin görsel ifadesini düzenler. Aynı başlık farklı ekranlarda farklı ölçülerde görünebilir. Bir bağlantı düğme benzeri yüzeye sahip olabilir. Bu görsel tercihler içerik rolünü otomatik değiştirmez. Tasarımı yalnız varsayılan HTML görünümüne hapsetmeden, anlamı koruyan stiller üretilebilir. ### HTML’nin işi Öğenin ne olduğunu ve diğer içeriklerle ilişkisini açıklar. Başlık, paragraf, liste ve kontrol doğru amaçla seçildiğinde belge daha anlaşılır bir yapı kazanır. Bu temel, tarayıcı ve yardımcı teknolojilerin içerikle çalışmasına destek olur. Güzel bir görsel düzenin altında yanlış anlam kullanmak, yalnız görünüşle fark edilmeyen sorunlar yaratabilir. ## Yapıyı etiketin anlamıyla kurmak Semantik HTML, tarayıcı ve yardımcı teknolojilere içeriğin rolünü anlatır. Sayfa başlığı, gezinme alanı ve ana içerik yalnız farklı CSS sınıflarıyla ayrılmaz. Görsel düzen değiştiğinde belge sırasının hâlâ anlaşılır olması için yapı, gerçek içerik ilişkilerine göre kurulur. - Başlıkları görünüm boyutuna değil hiyerarşiye göre seç. - Gezinme için bağlantı, işlem için düğme kullan. - Form kontrollerine açık etiket ver. ## Her alanı section yapmak gerekir mi? Hayır. Anlamlı bir konu bölümü ile yalnız yerleşim amacı taşıyan kapsayıcı farklıdır. Gerekli yerde basit bir div kullanmak sorun değildir. Semantik öğeler belgenin yapısını açıklamak için seçilir, sayıyı artırmak için değil. ## Bu karar, işinin neresinde? Semantik HTML kavramının bir projede nasıl ele alındığını; yaklaşım, süreç ve teslimler üzerinden incele. [Web tasarım & yazılım](https://androverse.com.tr/hizmetler/web-tasarim-yazilim) ## Karar masası ### Her kapsayıcı section olmalı mı? Hayır. Gerçek bir konu bölümü ile yalnız düzen kurmak için kullanılan kapsayıcı farklıdır. İçeriğin anlamlı bir başlığı ve bütünlüğü varsa bölüm öğesi uygun olabilir; yalnız sütun hizalamak için basit kapsayıcı yeterli olabilir. Doğru semantik, en çok özel etiketi kullanmak değildir. İçerik ilişkisini gereksiz karmaşa yaratmadan ifade etmek gerekir. Etiket seçimini bir stil kısayolu olarak görmemek bu ayrımı kolaylaştırır. ### Başlık sırasını atlamak yalnız SEO sorunu mu? Başlık düzeni öncelikle belgenin ilişkisini anlatır. Ekran okuyucuyla başlıklar arasında dolaşan kişi de bu yapıdan yararlanır. Görünüşte küçük olmasını istediğin bir metin için rastgele daha alt başlık seçmek anlamı bozabilir. Görsel ölçüyü CSS ile değiştir, seviyeyi içerik hiyerarşisine göre belirle. Arama sistemleri de yapıyı yorumlayabilir; ancak anlamsal düzeni yalnız sıralama hilesi olarak düşünmek amacını daraltır. ### Semantik HTML erişilebilirlik için tek başına yeterli mi? Sağlam bir başlangıçtır, fakat bütün deneyimi tek başına çözmez. Renk kontrastı, odak görünümü, dinamik durumlar, içerik alternatifleri ve anlaşılır metin gibi başka kararlar da gerekir. Doğru düğme kullanılmış olsa bile etiketi belirsiz veya odak işareti görünmez olabilir. Önce yerel anlamı koru, ardından gerçek görev akışını ve gerekli durumları birlikte değerlendir. Bir etiket listesi, yaşayan arayüzün tamamını temsil etmez. ## Sayfanı yalnız yapısıyla oku Bir yazı veya hizmet sayfası seç. Görsel kompozisyonu bir süre kenara koyarak başlıkları, listeleri ve eylemleri sırayla incele. Amaç stilin altındaki içerik mantığını görünür hale getirmek. - [ ] Ana başlığı ve bütün bölüm başlıklarını sırayla çıkar. Yalnız bu listeyi okuyunca konunun ilerleyişi anlaşılıyor mu? Aynı düzeydeki başlıkların gerçekten benzer kapsam taşıdığını kontrol et. Bir başlığın seviyesi yalnız daha küçük görünmesi için seçilmişse yapıyı yeniden düşün. - [ ] Bağlantı ve düğmeleri eylemlerine göre ayır. Hedef adrese giden öğelerde tarayıcının beklenen davranışları korunuyor mu? Sayfa içi işlemler uygun kontrolle mi yapılıyor? Görünümü aynı olan iki eylemin anlamı farklıysa ortak bileşenin bu farkı desteklemesi gerekir. - [ ] Liste biçimindeki içeriği incele. Gerçek sırası olan adımlar ile eşdeğer maddeler farklı ilişkiler taşır. Yalnız boşluk için boş paragraflar veya başlık için kalın metin kullanılmışsa içerik modelini düzeltmeyi düşün. Yapı, metnin ne söylediğini açıklamalıdır. - [ ] Düzeni dar ekranda yeniden düşünürken belge sırasını koru. Görsel yer değiştirmeler okuma mantığını bozuyorsa önce içerik ilişkisini ele al. Kararları editörlerin de anlayacağı kısa kurallara dönüştür. Sonraki içerik güncellemesi anlamlı yapıyı tesadüfen kaybetmesin. Semantik HTML, tasarımın görünmeyen ama anlam taşıyan iskeletidir. Doğru öğeler içeriğin rolünü açıklar; CSS bu yapıya karakter kazandırır. İkisi birbirinin yerine geçmeden birlikte çalışır. ## Bağlantılı kavramlar - [ARIA](https://androverse.com.tr/sozluk/aria) — ARIA, arayüz öğelerinin rolünü, durumunu ve ilişkilerini yardımcı teknolojilere bildirmeye yarayan erişilebilirlik özellikleridir. - [Bilgi mimarisi](https://androverse.com.tr/sozluk/bilgi-mimarisi) — Bilgi mimarisi, içeriklerin nasıl gruplanacağını, adlandırılacağını ve birbirine bağlanacağını belirleyen düzenleme yaklaşımıdır. - [Alt metin](https://androverse.com.tr/sozluk/alt-metin) — Alt metin, bir görselin içerikteki anlamını veya işlevini metinle sunan alternatiftir. ## Konuyu uygulamaya taşı - [Web tasarım & yazılım](https://androverse.com.tr/hizmetler/web-tasarim-yazilim) — Semantik HTML kavramının bir projede nasıl ele alındığını; yaklaşım, süreç ve teslimler üzerinden incele. - [Menüyü bulmak bir yetenek değil.](https://androverse.com.tr/blog/menuyu-bulmak-bir-yetenek-degil) — Semantik HTML ile ilgili tasarım kararını Androverse’nin uygulama örnekleri ve değerlendirme sorularıyla birlikte düşün. ## Kaynaklar - [MDN — HTML semantiği](https://developer.mozilla.org/en-US/docs/Glossary/Semantics) [Androverse profili](https://androverse.com.tr/yazar/androverse) · [Yayın ilkeleri](https://androverse.com.tr/yayin-ilkeleri)