Semantik sayfa düzeni, HTML ve CSS gibi web teknolojileri kullanılarak oluşturulan bir web sayfasının yapısını ve düzenini anlamlandırmak için semantik (anlam düzeyinde) HTML elemanlarını kullanma anlamına gelir. Semantik HTML, sayfanın içeriği ve yapısı hakkında daha fazla bilgi sağlar ve bu da tarayıcılar, arama motorları ve geliştiriciler için anlamlı ve düzenli bir kod oluşturur.
Semantik sayfa düzeninin temel özellikleri şunlardır:
-
Semantik Etiketlerin Kullanımı:
- Semantik HTML etiketleri, sayfanın anlamını açıkça ifade eder. Örneğin,
<header>,<nav>,<article>,<section>,<footer>gibi etiketler kullanılır. - Bu etiketler, sayfanın hangi bölümünde hangi tür bilgilerin bulunduğunu belirtir.
- Semantik HTML etiketleri, sayfanın anlamını açıkça ifade eder. Örneğin,
-
Sayfa Başlığı ve Başlık Etiketleri:
<h1>,<h2>,<h3>gibi başlık etiketleri, sayfanın başlıklarını ve alt başlıklarını belirtir.- Sayfanın ana başlığı
<h1>etiketi içinde, alt başlıklar ise uygun hiyerarşiye göre diğer<h>etiketlerinde bulunur.
-
Menüler ve Navigasyon:
<nav>etiketi, sayfanın ana menüsünü belirtir.- Bağlantılar içeren menü öğeleri, semantik olarak anlamlı bir düzen içinde yer alır.
-
Ana İçerik ve Alt Bölümler:
<article>etiketi, sayfanın ana içeriğini ifade eder. İçeriklerin her biri bu etiket içinde bulunabilir.<section>etiketi, içeriği mantıklı bölümlere ayırır.
-
Kenar Çubukları ve Yardımcı Bilgiler:
<aside>etiketi, sayfa içindeki kenar çubukları veya yardımcı bilgileri belirtir.- Bu etiket, ana içeriği destekleyen, ancak ondan bağımsız olan bilgiler için kullanılır.
-
Sayfa Altyapısı ve Footer:
<footer>etiketi, sayfanın alt kısmındaki bilgileri belirtir. Bu genellikle iletişim bilgileri, telif hakları, sayfa bağlantıları gibi unsurları içerir.
Semantik sayfa düzeni, web sayfasının kodunu daha anlaşılır ve bakımı daha kolay hale getirir. Ayrıca, tarayıcılar ve arama motorları, sayfanın içeriği hakkında daha fazla bilgi alabilir ve bu da SEO (Arama Motoru Optimizasyonu) açısından olumlu bir etki yapabilir.