🚀 HTML Layout: Semantik Bölümlendirme ve Modern İskelet Yapısı

Selamlar gençler, bugün web sayfasının sadece 'görünüşünü' değil, 'anlamını' nasıl kurgulayacağımızı konuşacağız. Eskiden her şeye div deyip geçerlerdi ama modern web'de bu artık 'kirli kod' sayılıyor. Semantik etiketler, tarayıcıya ve ekran okuyuculara "Burası ana başlık, burası yan menü" gibi yapısal bilgiler verir.

Temel Yapı Taşları

• <header>: Sayfanın veya bir bölümün giriş kısmıdır. Logo ve navigasyonu barındırır.
• <nav>: Ana gezinti bağlantılarının bulunduğu limandır.
• <section>: Birbirinden bağımsız ana konu bloklarını temsil eder.
• <article>: Kendi başına anlam ifade eden (blog yazısı, haber, oyun açıklaması gibi) içeriklerdir.
• <aside>: Ana içerikle dolaylı yoldan alakalı yan bilgiler, reklamlar veya kenar çubuğu (sidebar) alanıdır.
• <footer>: Sayfanın en altındaki telif hakları ve iletişim bilgilerinin olduğu kısımdır.

Ufak bir dipnot: Kendi oyun platformumuzun (ovidgame.com) blog kısmını tasarlarken, Google botlarının oyun incelemelerimizi daha iyi indekslemesi için article ve section hiyerarşisine çok önem verdik. Karmaşık bir 3D oyun motoru yazarken bile, arayüzü bu semantik mantıkla katmanlandırmak ileride CSS ve JS ile yönetimi inanılmaz kolaylaştırıyor.

Neden Sadece Div Değil?

Bir gün projenizi bir mobil cihazda, bir ekran okuyucuda veya Google'ın arama botunda açtıklarında, bu etiketler sayesinde içerik hiyerarşisi anında çözümlenir. Ayrıca CSS yazarken her şeye karmaşık class'lar vermek yerine; header nav veya main section article gibi seçicilerle çok daha temiz bir stil dosyası oluşturabilirsiniz.

Senior tavsiyesi: Sayfanızı planlarken önce kağıt üzerinde bu kutuları çizin. main içine header koymayın, section içinde footer kullanmaktan çekinmeyin (evet, her bölümün kendi footer'ı olabilir!), ama her zaman 'anlam' odaklı kalın.

Ovid Game Studio | Teknik Notlar ovidgame.com