Ne anlama gelir?
Anlamsal HTML (Semantic HTML), her öğe için görünüşe değil anlamına uygun etiketi kullanmaktır. Başlık için <h1>, gezinme için <nav>, ana içerik için <main>, makale için <article> gibi.
Neden önemli?
- Arama motorlarının sayfa yapısını doğru anlamasını sağlar
- Erişilebilirliği (ekran okuyucular) güçlendirir
- İçeriğin hiyerarşisini net biçimde iletir
Kötü örnek
Her şeyi anlamsız <div> etiketleriyle kurmak, sayfayı hem makineler hem yardımcı teknolojiler için "anlamsız" bir yığına çevirir.
Ne yapmalı?
İçeriğinizi doğru anlamsal etiketlerle kurun: başlıklar hiyerarşik, bölümler etiketli olsun. Bu, hem SEO hem erişilebilirlik için sağlam bir temeldir.
Ne anlama gelir?
Anlamsal HTML (semantic HTML), bir web sayfasının içeriğini işaretlerken, HTML öğelerini sadece görsel görünüm için değil, içeriğin anlamını ve yapısını ifade edecek biçimde kullanmaktır. Anlamsal HTML öğeleri (örneğin <header>, <nav>, <main>, <article>, <section>, <footer>, başlık etiketleri, listeler), içeriğin ne olduğunu (bir başlık, bir navigasyon, bir makale, bir liste vb.) anlamsal olarak belirtir; anlamsal olmayan öğelerin (örneğin her şey için <div>) aksine. Anlamsal HTML, hem erişilebilirlik hem SEO hem kod kalitesi açısından değerlidir.
Anlamsal HTML'in faydaları
- İçeriğin yapısını ve anlamını ifade eder
- Erişilebilirliği artırır (ekran okuyucular)
- Arama motorlarının içeriği anlamasına yardım eder
- Daha temiz ve sürdürülebilir kod
Neden önemli?
Anlamsal HTML, iyi web geliştirmenin temel bir uygulamasıdır ve hem erişilebilirlik hem SEO hem kod kalitesi açısından önemli faydalar sağlar; çünkü içeriğin sadece nasıl göründüğünü değil, ne anlama geldiğini ve nasıl yapılandırıldığını makinelerin (tarayıcılar, arama motorları, yardımcı teknolojiler) anlayabileceği biçimde ifade eder. HTML'in temel amacı, içeriği yapılandırmak ve anlamlandırmaktır; ancak birçok geliştirici, HTML'i sadece görsel bir araç olarak kullanma eğilimindedir ve her şeyi anlamsız genel öğelerle (özellikle <div>) işaretler, anlamı ise CSS ile görsel olarak oluşturur. Anlamsal HTML, bu yaklaşımın aksine, her içerik parçasını anlamına uygun HTML öğesiyle işaretler; bir sayfa başlığı için <header>, ana navigasyon için <nav>, ana içerik için <main>, bir makale için <article>, bir bölüm için <section>, başlıklar için başlık etiketleri (H1-H6), listeler için liste öğeleri kullanır. Bu, içeriğin anlamsal yapısını açıkça ortaya koyar. Anlamsal HTML'in faydaları birkaç açıdan öne çıkar. Birincisi, erişilebilirlik; anlamsal HTML, yardımcı teknolojiler (özellikle ekran okuyucular) için kritiktir. Ekran okuyucular, anlamsal öğeleri kullanarak görme engelli kullanıcılara sayfanın yapısını anlatır ve içerikte gezinmeyi sağlar (örneğin başlıklar arasında atlama, navigasyon veya ana içeriğe geçme). Anlamsal olmayan (sadece div'lerle işaretlenmiş) bir yapı, bu kullanıcılar için içeriğin yapısını gizler ve erişilebilirliği ciddi biçimde zedeler. İkincisi, SEO; arama motorları, anlamsal HTML öğelerini kullanarak içeriğin yapısını ve önemli bölümlerini (ana içerik, başlıklar, makale) daha iyi anlar, bu da sayfanın konusunun ve yapısının doğru değerlendirilmesine yardım eder. İyi yapılandırılmış, anlamsal içerik, arama motorları için daha net ve değerlidir. Üçüncüsü, kod kalitesi ve sürdürülebilirlik; anlamsal HTML, daha temiz, daha okunabilir ve daha sürdürülebilir kod üretir; kodun ne yaptığı, anlamsal öğeler sayesinde daha açıktır. Dördüncüsü, gelecek uyumluluğu ve tutarlılık; anlamsal HTML, web standartlarına uygun ve tutarlı bir yapı sağlar. Anlamsal HTML kullanmak, içerik işaretlenirken her öğe için "bu içerik ne anlama geliyor?" sorusunu sormayı ve uygun anlamsal öğeyi kullanmayı gerektirir; görsel biçimlendirme ise CSS'e bırakılır. Anlamsal HTML, bir web sayfasının içeriğini, öğelerin anlamını ve yapısını ifade edecek biçimde işaretlemektir (header, nav, main, article, başlıklar gibi); erişilebilirliği (ekran okuyucular için), SEO'yu (arama motorlarının içeriği anlaması için) ve kod kalitesini artıran, iyi web geliştirmenin temel bir uygulamasıdır.
Gerçek örnek
Bir site, tüm içeriğini anlamsız <div> öğeleriyle işaretlemiş ve anlamı sadece CSS ile görsel olarak oluşturmuştu; bu, ekran okuyucu kullanıcıları için sayfanın yapısını anlaşılmaz kılıyor ve arama motorlarının içeriği anlamasını zorlaştırıyordu. İçerik anlamsal HTML öğeleriyle (header, nav, main, article, başlıklar) yeniden yapılandırıldığında, ekran okuyucu kullanıcıları içerikte kolayca gezindi, arama motoru sayfanın yapısını daha iyi anladı, ve kod daha temiz hale geldi.
Özet
Anlamsal HTML, bir sayfanın içeriğini öğelerin anlamını ve yapısını ifade edecek biçimde işaretlemektir (header, nav, main, article, section, başlıklar). Anlamsız div'lerin aksine içeriğin ne olduğunu belirtir. Erişilebilirliği (ekran okuyucu navigasyonu), SEO'yu (yapı anlama) ve kod kalitesini artırır. İçerik anlamına uygun öğelerle işaretlenmeli, görsel biçim CSS'e bırakılmalıdır; iyi web geliştirmenin temelidir.