Hızlı Özet (TL;DR)
Modern web geliştirmede sıkça yapılan en büyük hatalardan biri, sayfadaki her öğeyi anlamsız <div> ve <span> etiketleriyle sarmalamaktır (Div çorbası / Div soup). Arama motoru botları ve ekran okuyucular (Screen Reader), sayfanın ana içeriğini, gezinme menüsünü ve makale detaylarını anlamlandırmak için Semantik HTML5 etiketlerine ihtiyaç duyar. <main>, <article>, <nav>, <section> ve <aside> gibi anlamsal etiketlerin doğru kullanımı, hem Googlebot’un sayfa mimarisini kusursuz dizine eklemesini sağlar hem de WCAG erişilebilirlik (A11y) uyumu kazandırır.
Semantik HTML5 vs Anlamsız Div Mimarisi
| Kullanım Alanı | Anlamsız Eski Kodlama | Doğru Semantik HTML5 | SEO ve Erişilebilirlik Etkisi |
|---|---|---|---|
| Site Navigasyonu | <div class="menu"> | <nav aria-label="Ana Menü"> | Botlar ve ekran okuyucular menüyü anında tespit eder |
| Ana İçerik Alanı | <div id="icerik"> | <main id="anaIcerik"> | Sayfanın çekirdek içeriği doğrudan hedeflenir |
| Bağımsız Makale | <div class="post"> | <article> | İçeriğin tek başına anlamlı bir doküman olduğu bildirilir |
| Yan Bilgi / Kenar Çubuğu | <div class="sidebar"> | <aside> | İkincil içeriğin ana metinden ayrılması sağlanır |
| Sayfa / Bölüm Başlığı | <div class="header"> | <header> | Bölümün giriş ve başlık kümesi tanımlanır |
ARIA (Accessible Rich Internet Applications) İlkeleri
Semantik HTML etiketlerinin yetersiz kaldığı karmaşık etkileşimli bileşenlerde (açılır menüler, sekmeler, modallar) ARIA öznitelikleri devreye girer:
<!-- Erişilebilir ve Semantik Açılır Akordeon Bileşeni -->
<button aria-expanded="false" aria-controls="sss-cevap-1" id="sss-soru-1">
Kurumsal Web Tasarımında Süreç Nasıl İşler?
</button>
<div id="sss-cevap-1" role="region" aria-labelledby="sss-soru-1" hidden>
<p>Proje keşfi, tel kafes (wireframe), Astro kodlama ve canlıya alma aşamaları uygulanır.</p>
</div>
Başlık Hiyerarşisi (<h1> - <h6>) Kuralları
- Tekil
<h1>İlkesi: Her HTML sayfasında kesinlikle tek bir<h1>bulunmalı ve bu başlık sayfanın ana konusunu net biçimde yansıtmalıdır. - Başlık Atlamama Kuralı:
<h1>’den doğrudan<h3>’e geçilmemeli; hiyerarşi mutlaka<h2>üzerinden mantıksal olarak ilerlemelidir. - Stil İçin Başlık Kullanmama: Yazı boyutunu büyütmek için başlık etiketi kullanılmamalı; biçimlendirme daima harici CSS sınıflarıyla yönetilmelidir.
Semantik, erişilebilir ve arama motorlarının tam puan verdiği web siteleri için Kurumsal Web Tasarım ve SEO Çözümleri sayfamızı ziyaret edin.