Semantik HTML Nedir ve Neden Önemlidir?
Semantik HTML Nedir ve Neden Önemlidir? konusunda temel mantığı, gerçek uygulama adımlarını, hata senaryolarını ve doğrulama yöntemlerini açıklayan uygulamalı rehber. Semantik HTML, öğeyi görünüşüne göre değil içerikteki rolüne göre seçmektir. heading hiyerarşisi belge bölümlerini ifade eder; button eylem, a…
Konu, Amaç ve Beklenen Sonuç
Semantik HTML, öğeyi görünüşüne göre değil içerikteki rolüne göre seçmektir. heading hiyerarşisi belge bölümlerini ifade eder; button eylem, a bağlantı, nav navigasyon, main ana içerik, article bağımsız içerik gibi anlam taşır. Bu yapı tarayıcı yerleşik davranışlarından ve erişilebilirlik ağacından yararlanmayı kolaylaştırır.
Adım Adım Uygulama
1. Adım
1. Sayfanın ana bölgelerini header/nav/main/footer gibi anlamlı landmark öğeleriyle kur.
2. Adım
2. Sayfanın gerçek başlığını H1, ana bölümleri H2, onların alt bölümlerini H3 şeklinde içerik hiyerarşisine göre düzenle; görsel boyut için heading seviyesi seçme.
3. Adım
3. Eylem yapan öğede button, başka konuma götüren öğede a kullan; div + click ile yerleşik klavye/semantik davranışı yeniden üretmeye çalışma.
4. Adım
4. Form input’larını görünür label ile ilişkilendir; placeholder’ı label yerine kullanma.
5. Adım
5. Görsellerde alt metni görselin sayfadaki işlevine göre yaz; dekoratif görselde boş alt uygun olabilir.
6. Adım
6. CSS’i semantik yapıdan bağımsız görsel katman olarak kullan; HTML sırasını klavye/ekran okuyucu akışıyla uyumlu tut.
Uygulamalı Örnek
Bir blog sayfasında site navigasyonu nav içinde, makale article içinde, ana yazı başlığı H1 olur. “Kaydet” eylemi button, “Kaynak sayfasına git” a öğesidir. H2/H3 seviyeleri tasarım değil konu hiyerarşisini temsil eder; CSS ile görsel boyut ayrıca ayarlanır. Bu örneği kendi projenize uyarlarken değerleri ezberlemek yerine “Semantik HTML Nedir ve Neden Önemlidir?” konusundaki aynı neden-sonuç ilişkisini koruyun.
Yaygın Hatalar ve Nedenleri
1. Heading seviyesini font büyüklüğü için seçmek.
2. Her şeyi div/span yapmak.
3. Linki button gibi veya button’ı link gibi kullanmak.
4. Placeholder’ı label sanmak.
5. Dekoratif ve anlamlı görsele aynı alt metin yaklaşımını uygulamak.
Son Kontrol ve Doğrulama
1. Klavye ile tab sırası. Sonuç “Semantik HTML Nedir ve Neden Önemlidir?” için somut kabul ölçütü olarak kullanılmalıdır.
2. Heading outline kontrolü.
3. Ekran okuyucu landmark testi.
4. CSS kapalıyken içerik sırası.
5. Form hata mesajı ilişkilendirmesi.
Kısa Sonuç
Semantik HTML Nedir ve Neden Önemlidir? için kaliteli sonuç, aracı veya ayarı bir kez kullanmaktan değil; doğru sorumluluğu seçip uygulamayı gerçek koşulda doğrulamaktan gelir.
Kaynaklar
Bu makaledeki teknik kavramları doğrulamak ve sürüme bağlı ayrıntıları kontrol etmek için aşağıdaki birincil/resmî kaynaklar kullanılmıştır. Yazılım arayüzleri ve platform gereksinimleri zamanla değişebileceği için özellikle yayın/build/SEO gibi güncel konularda son sürüm dokümantasyonunu kontrol edin.
1. MDN: HTML: https://developer.mozilla.org/en-US/docs/Web/HTML
2. MDN: HTML elements reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements
3. MDN: HTML semantics: https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html
4. W3C WAI: Page Structure: https://www.w3.org/WAI/tutorials/page-structure/
5. WCAG 2.2: https://www.w3.org/TR/WCAG22/
6. MDN: Accessibility: https://developer.mozilla.org/en-US/docs/Web/Accessibility
