Semantik HTML nedir?

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.