Web Sitesi Kodlama Eğitimi – 6: Semantik Web ve Modern Sayfa Mimarisi
Bir web sitesini inşa ederken sadece son kullanıcının gördüğü estetiğe odaklanmak, buzdağının sadece görünen kısmıyla ilgilenmektir. Profesyonel bir kodlama eğitimi sürecinin en kritik aşaması, arama motoru botlarının (Googlebot, Bingbot vb.) ve ekran okuyucuların web sayfanızı nasıl “anlamlandırdığını” kavramaktır. Bu bölümde, kodlarımıza anlamsal bir ruh katarak modern dünya standartlarında bir sayfa mimarisini nasıl kurgulayacağımızı derinlemesine inceleyeceğiz.
1. Semantik HTML Nedir? Veriye Anlam Yükleme Sanatı
Semantik HTML, kullanılan bir etiketin sadece tarayıcıda nasıl duracağını değil, aynı zamanda taşıdığı verinin ne olduğunu ifade etmesidir. Geçmişte tasarımcılar, sayfanın her bir parçasını oluşturmak için sadece <div> ve <span> gibi anlamsız (non-semantic) etiketler kullanırdı.
Div-Çorbası (Div-Soup) Problemi: Binlerce satırlık bir kod bloğunda her şeyin <div> ile tanımlanması, Google botları için “etiketsiz kolilerle dolu devasa bir depo” gibidir. Bot, hangi kutunun ana içerik, hangisinin reklam veya hangisinin menü olduğunu anlamak için çok fazla enerji harcar.
Anlamsal Devrim: Bu kodlama eğitimi serisinde öğrendiğimiz HTML5 standartları, kodun amacını isminden belli eden etiketler sunar. Örneğin, <nav> etiketini gören bir tarayıcı, bunun bir navigasyon bağlantısı olduğunu anında kavrar. Bu, temiz kod (clean code) prensiplerinin ilk adımıdır.
2. Sayfa İskeletinin Organları: Header, Nav ve Footer
Bir insanın iskelet yapısındaki organların yeri nasıl belliyse, modern bir web sayfasının da “organları” sayılan belirli bölümleri vardır. Bu bölümleri doğru etiketlemek, sitenizin hiyerarşisini güçlendirir.
<header> (Giriş Bölümü): Genellikle sayfanın en üstünde yer alır. Logolar, arama çubukları, ana başlıklar ve kullanıcı giriş butonları burada bulunur. Önemli bir detay: <header> sadece sayfanın en başında değil, her bir <article> veya <section> içinde de giriş bilgilerini sunmak için kullanılabilir.
<nav> (Navigasyon): Sitenin “yol haritasıdır”. Ana menüler, kategori listeleri veya sayfa içi bağlantılar (anchor links) mutlaka bu etiketin içinde yer almalıdır. SEO açısından, en önemli anahtar kelimelerinizin bu alanda hiyerarşik bir yapıda olması beklenir.
<footer> (Alt Bilgi): Sayfanın bitiş noktasıdır. Telif hakları, iletişim linkleri, sosyal medya ikonları ve site haritası bu alanda toplanır. Arama motorları, kurumsal güvenilirlik bilgilerini doğrulamak için genellikle bu alanı detaylı tarar.
3. İçerik Gruplandırma: Main, Section ve Article Arasındaki Farklar
Birçok geliştiricinin en çok karıştırdığı konu, içeriği hangi kutuya koyacağıdır. Profesyonel bir kodlama eğitimi, bu hiyerarşiyi netleştirmeyi gerektirir.
<main>: Sayfanın “kalbidir”. Bir sayfada sadece bir adet bulunur ve o sayfanın benzersiz içeriğini kapsar. Yan paneller (aside) veya navigasyonlar (nav) bu etiketin içine girmemelidir.
<section>: Tematik bir konuyu temsil eder. Örneğin, bir “Hizmetlerimiz” veya “Hakkımızda” alanı birer section’dır. Genellikle kendi içinde bir başlığı (h2-h6) olması beklenir.
<article>: Kendi başına bir anlam ifade eden, başka bir yere taşındığında bile bütünlüğünü koruyan içeriklerdir. Bir blog yazısı, bir forum mesajı veya bir haber kartı mükemmel birer article örneğidir.
4. Yan İçerikler ve Detaylar: Aside ve Figure Yapısı
Sayfa mimarisini zenginleştiren, içeriğe derinlik katan yardımcı etiketler hem kullanıcı deneyimini hem de SEO’yu doğrudan besler.
<aside> (Yan İçerik): Ana içerikle doğrudan ilgili olmayan ancak ona eşlik eden bölümlerdir. Sidebar’lar, reklam alanları, “en çok okunanlar” listeleri veya yazar biyografileri bu etiketin doğal üyeleridir.
<figure> ve <figcaption>: Sadece bir resim eklemek yerine, o resmi ve açıklamasını (caption) bir bütün haline getirmek için kullanılır. Google Görseller algoritması, bir resmin neyle ilgili olduğunu en iyi bu yapı sayesinde anlar. Bu kodlama eğitimi boyunca vurguladığımız “erişilebilirlik” ilkesi için bu etiketler vazgeçilmezdir.
5. SEO ve Erişilebilirlik (A11y) İlişkisi
Semantik mimari, bir tasarım tercihi değil, profesyonel bir zorunluluktur. Bu yapıyı kurduğunuzda iki büyük kazanım elde edersiniz:
Arama Motoru Optimizasyonu (SEO): Google botları, sayfanın önem sırasını semantik etiketlere göre belirler. <main> içindeki bir <article> başlığı, sitenizin hangi aramada çıkacağını belirleyen en güçlü sinyaldir.
Erişilebilirlik: Dünya genelinde milyonlarca insan ekran okuyucu (screen reader) teknolojilerini kullanıyor. Semantik etiketler, bu cihazlara “burası bir menü”, “burası ana yazı” komutlarını vererek görme engelli bireylerin sitenizde kaybolmadan gezinebilmesini sağlar. Gerçek bir kodlama eğitimi, her kullanıcıya hitap etmeyi öğretir.
Uzmanından İpuçları ve Sık Yapılan Hatalar
Hata: Sırf görsel olarak alt alta duruyor diye her şeye <section> demek.
Çözüm: Eğer içerik mantıksal bir bölüme sahip değilse (sadece görsel bir kutulama gerekiyorsa) hala <div> kullanabilirsiniz. Semantik etiketleri “anlam” olduğu sürece kullanın.
İpucu: Kodlarınızı yazarken kendinize şu soruyu sorun: “Eğer CSS dosyam silinirse, sadece HTML etiketlerime bakarak sayfanın neresinin ne olduğunu anlayabiliyor muyum?” Cevabınız evet ise profesyonel bir iş çıkarmışsınız demektir. (Kodlama Eğitimi – 6)
Sıkça Sorulan Sorular (SSS)
Soru 1: Semantik etiket kullanmasam sitem çalışmaz mı? Cevap: Teknik olarak çalışır ve kullanıcı her şeyi normal görür. Ancak arama motorları sitenizi “kalitesiz mimari” kategorisine sokar ve rekabetin yoğun olduğu sektörlerde asla üst sıralara çıkamazsınız.
Soru 2: <header> etiketini bir sayfa içinde birden fazla kez kullanabilir miyim? Cevap: Evet. Sayfanın en üstünde ana header olabileceği gibi, her bir blog yazısının (article) başında da yazar adı ve yayın tarihini içeren küçük bir header kullanabilirsiniz.
Soru 3: <main> içinde neden sadece bir tane ana içerik olmalı? Cevap: Çünkü <main> sayfanın “temel amacını” temsil eder. İki tane ana içerik kullanımı, arama motorlarının odak noktasını dağıtır ve SEO gücünüzü böler.
Soru 4: Semantik yapı kodlama eğitimi sürecinde neden bu kadar kritik? Cevap: Çünkü HTML iskeletini yanlış kurarsanız, üzerine inşa edeceğiniz CSS ve JavaScript ne kadar iyi olursa olsun, binanızın temeli zayıf kalacaktır.
Soru 5: Bu etiketlerin mobil görünümle bir ilgisi var mı? Cevap: Doğrudan yok; semantik yapı içerik anlamıyla ilgilidir. Ancak düzgün yapılandırılmış bir mimariyi, serimizin 4. dersinde öğrendiğimiz Responsive tekniklerle mobile uyarlamak çok daha kolaydır.
Bölüm Özeti ve Gelecek Ders
Bu bölümde kodlarımıza “zihin” katan semantik yapıyı ve Google’ın hayran kaldığı modern sayfa mimarisini tüm detaylarıyla işledik. Artık sadece kod yazan değil, yazdığı kodu tüm dünyaya (ve botlara) anlatan bir geliştiricisiniz.
Eğitim 7’de bizi ne bekliyor? Sıradaki dersimizde artık statik dünyadan tamamen kopup dinamizme muazzam bir giriş yapıyoruz: “JavaScript Temelleri: Web Sayfasına Hareket Katma”. Değişkenler, fonksiyonlar ve kullanıcı etkileşimlerinin büyüleyici dünyasıyla tanışacaksınız.
Uygulama Ödevi: Mevcut çalışmalarınızı açın. Tüm anlamsız <div> yapılarını inceleyin ve onları <header>, <nav>, <main>, <article> ve <footer> gibi semantik karşılıklarıyla değiştirerek sayfanızı “anlamlı” hale getirin!