Semantik HTML.
Semantik HTML, her öğenin görünüşü için değil anlamı için seçilmesidir — başlık için başlık öğesi, düğme için düğme öğesi, liste için liste öğesi.
Semantik işaretlemenin değeri, tek bir seçimle birden fazla şeyi bedava getirmesindedir. Doğru öğe kullanıldığında rol bildirimi, klavye desteği, odaklanabilirlik ve yerleşik davranış tarayıcıdan gelir — hiçbiri elle yazılmaz.
Tersi de doğrudur ve maliyeti yüksektir. Bir düğmeyi div ile taklit etmek, dört şeyi elle yeniden kurmayı gerektirir: odaklanabilirlik, klavye olayları, rol bildirimi ve basılı durum. Dördünden biri unutulduğunda bileşen bazı kullanıcılar için çalışmaz — ve genelde en az biri unutulur.
- Bir yere GİDEN şey bağlantıdır; bir şey YAPAN şey düğmedir. İkisi karıştırıldığında klavye davranışı da beklentiyi bozar.
- Görsel büyüklük için başlık düzeyi seçilmez; düzey yapıyı anlatır, boyut CSS ile ayarlanır.
- Kalın yazılmış bir paragraf başlık değildir; ekran okuyucunun gezinme listesinde hiç görünmez.
- Liste gibi görünen ama liste öğesiyle işaretlenmemiş bir yapı, kaç madde olduğunu söylemez.
- Tablo düzen için değil veri için kullanılır; düzen tablosu ekran okuyucuda satır sütun olarak okunur.
Semantik HTML'in faydası erişilebilirlikle sınırlı da değildir. Arama motoru tarayıcıları belge yapısını aynı işaretlemeden çıkarır ve yanıt motorları bir sayfadan pasaj alıntılarken bölüm sınırlarını başlıklardan bulur. Üç okuyucu — insan, tarayıcı ve model — aynı kaynağa bakar.
Pratik denetim yöntemi basittir: sayfanın stil dosyasını kapatın ve kalan HTML'i okuyun. Belge hâlâ anlaşılıyorsa, başlıklar başlık gibi duruyorsa ve sıra mantıklıysa semantik yapı sağlamdır. Anlaşılmıyorsa, sayfanın anlamı CSS'e gömülmüş demektir — ve CSS'i okumayan hiçbir okuyucu onu göremez.
Semantik seçimin bir de bakım tarafı var. Yerleşik öğeler tarayıcı güncellemeleriyle birlikte gelişir; yeni bir yardımcı teknoloji çıktığında onları desteklemek için hiçbir şey yapmanız gerekmez. Elle kurulmuş taklitler ise kurulduğu günün varsayımlarında donar ve zamanla ayrışır.
Pratik bir alışkanlık: yeni bir bileşen yazmadan önce HTML'de karşılığı olup olmadığına bakın. Ayrıntı açılır-kapanır bloklar, ilerleme çubukları, tarih girdileri ve iletişim kutuları için yerleşik öğeler vardır ve çoğu ekip bunları bilmediği için sıfırdan yazar.