HTML Tasarım Şablonu (Layout): Modern Web Sayfası Düzeni

Web geliştirme dünyasına adım attığınızda, bir web sayfasının sadece rastgele serpiştirilmiş metinler ve görsellerden ibaret olmadığını hemen fark edersiniz. Kusursuz bir kullanıcı deneyimi (UX) sunan profesyonel web siteleri, arkasında sağlam bir mimari ve mantıksal bir yapı barındırır. Bir evi inşa etmeden önce odaların nerede olacağını, kapıların nereye açılacağını gösteren bir mimari plana ihtiyacınız vardır. İşte web dünyasında bu mimari plana Tasarım Şablonu (Layout) adını veriyoruz.

Bu rehberde, bir web sitesinin iskeletini oluştururken sayfa düzenini nasıl kurgulamanız gerektiğini, HTML5 ile hayatımıza giren modern semantik (anlamsal) etiketlerin görevlerini ve bu şablonun SEO (Arama Motoru Optimizasyonu) ile Erişilebilirlik açısından neden bu kadar kritik olduğunu detaylı örneklerle öğreneceksiniz.

Geçmişten Günümüze Sayfa Düzeni (Layout) Evrimi

İnternetin ilk yıllarında, web sayfalarının görsel yerleşimini (örneğin sol menüyü ana içeriğin yanına koymak) sağlamak için geliştiriciler karmaşık tablolar (<table>) veya çerçeveler (<frameset>) kullanıyorlardı. Ancak bu yöntemler, kodun okunabilirliğini yok ediyor, arama motorlarının kafasını karıştırıyor ve görme engelli kullanıcılar için sayfayı kullanılamaz hale getiriyordu.

Modern (2026) web standartlarında, sayfa yerleşimi (layout) oluşturmak için <table> veya <frameset> kullanmak kesinlikle yasaktır ve büyük bir hatadır. Günümüzde modern web tasarım şablonları, görev bölümü esasına dayanır:

HTML: Sayfanın yapısal ve anlamsal iskeletini kurar.
CSS: HTML ile kurulan bu iskeleti alır; Grid (Izgara) veya Flexbox (Esnek Kutu) gibi modern düzenleme sistemlerini kullanarak kutuları yan yana, alt alta dizer ve görsel tasarımı oluşturur.

HTML5 Semantik Yerleşim (Layout) Etiketleri

Eski web sitelerinde sayfa düzeni oluştururken her bölüm için anlamsız <div> etiketleri kullanılırdı (örneğin <div class="ust-kisim">, <div class="sol-menu"> vb.). HTML5 ile birlikte, sayfanın ana bölgelerini (landmark) hem tarayıcılara hem de arama motorlarına açıkça tanımlayan anlamsal (semantik) etiketler hayatımıza girmiştir.

Bir sayfa şablonu oluştururken kullanmanız gereken temel yapı taşları şunlardır:

<header> (Üst Bilgi): Bir sayfanın veya bölümün giriş kısmını temsil eder. Genellikle sitenizin logosunu, ana başlığını (<h1>) veya arama çubuklarını barındırır.
<nav> (Navigasyon): Kullanıcıların sitenizde veya sayfa içinde gezinmesini sağlayan ana menü bağlantılarının (linklerin) bulunduğu bölümdür. Her bağlantı <nav> içine alınmaz, sadece temel “Ana Sayfa”, “Hakkımızda”, “İletişim” gibi sitenin ana damarları buraya konur.
<main> (Ana İçerik): Belgenin veya uygulamanın baskın, en önemli içeriğini temsil eder. Altın kural şudur: Bir web sayfasında yalnızca bir tane görünür <main> etiketi bulunabilir. Sitenizin kenar çubukları (sidebar) veya alt bilgileri bu etiketin içine dahil edilmez.
<article> (Makale/Bağımsız İçerik): Bir blog yazısı, bir forum gönderisi veya bir haber haberi gibi kendi başına anlam ifade eden ve başka bir yerde bağımsız olarak paylaşılabilecek içerikleri sarmalar.
<section> (Bölüm): Tematik olarak birbiriyle ilişkili içerikleri gruplamak için kullanılır. Genellikle kendi içinde bir başlığa (<h2> veya <h3>) sahip olan mantıksal bölümlerdir (Örneğin sitenizin “Hizmetlerimiz” veya “Müşteri Yorumları” bölümleri).
<aside> (Yan İçerik/Sidebar): Ana içerikle doğrudan bağlantısı olmayan ancak dolaylı yoldan ilişkili olan bilgileri (örneğin popüler yazılar listesi, reklamlar veya yazar bilgisi) temsil eder. Sayfa tasarımında genellikle sağ veya sol kenar çubuğu (sidebar) olarak yerleşir.
<footer> (Alt Bilgi): Sayfanın veya bir bölümün en alt kısmıdır. Telif hakkı bildirimleri (© 2026), iletişim bağlantıları ve sosyal medya ikonları genellikle bu etiketin içinde bulunur.

Modern Bir HTML Tasarım Şablonu Örneği

Yukarıdaki parçaları bir araya getirerek, bir haber veya blog sitesi için ideal olan modern ve temiz bir HTML5 sayfa yerleşimi kodlayalım:

&lt;!DOCTYPE html>
&lt;html lang="tr">
&lt;head>
    &lt;meta charset="UTF-8">
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0">
    &lt;title>Modern Tasarım Şablonu Örneği&lt;/title>
&lt;/head>
&lt;body>

    &lt;!-- Sitenin Üst Kısmı ve Ana Menüsü -->
    &lt;header>
        &lt;h1>Geleceğin Teknolojileri&lt;/h1>
        &lt;nav>
            &lt;ul>
                &lt;li>&lt;a href="#ana-sayfa">Ana Sayfa&lt;/a>&lt;/li>
                &lt;li>&lt;a href="#yapay-zeka">Yapay Zeka&lt;/a>&lt;/li>
                &lt;li>&lt;a href="#iletisim">İletişim&lt;/a>&lt;/li>
            &lt;/ul>
        &lt;/nav>
    &lt;/header>

    &lt;!-- Sayfanın Temel İçeriği -->
    &lt;main>

        &lt;!-- Bağımsız Blog Yazısı -->
        &lt;article>
            &lt;header>
                &lt;h2>HTML5 ve Geleceği&lt;/h2>
                &lt;p>Yazar: Ahmet Yılmaz | Tarih: 3 Nisan 2026&lt;/p>
            &lt;/header>

            &lt;section>
                &lt;h3>Semantik Etiketlerin Gücü&lt;/h3>
                &lt;p>Semantik HTML, sayfa yapısını hem insanlar hem de makineler için anlaşılır kılar.&lt;/p>
            &lt;/section>

            &lt;section>
                &lt;h3>Neden Önemlidir?&lt;/h3>
                &lt;p>Çünkü erişilebilirliği artırır ve SEO puanını yükseltir.&lt;/p>
            &lt;/section>
        &lt;/article>

    &lt;/main>

    &lt;!-- Yan Menü (Sidebar) -->
    &lt;aside>
        &lt;h3>Çok Okunanlar&lt;/h3>
        &lt;ul>
            &lt;li>&lt;a href="#">CSS Grid Kullanımı&lt;/a>&lt;/li>
            &lt;li>&lt;a href="#">JavaScript Temelleri&lt;/a>&lt;/li>
        &lt;/ul>
    &lt;/aside>

    &lt;!-- Sitenin Alt Kısmı -->
    &lt;footer>
        &lt;p>&amp;copy; 2026 Tüm Hakları Saklıdır.&lt;/p>
    &lt;/footer>

&lt;/body>
&lt;/html>

Not: Tarayıcınızda bu dosyayı açtığınızda her şeyin alt alta (blok blok) sıralandığını göreceksiniz. Çünkü HTML sadece “yapıyı” kurar. Bu kutuları (<main> sol tarafa, <aside> sağ tarafa gelecek şekilde) yan yana dizmek için CSS Layout sistemlerine (Özellikle CSS Flexbox veya CSS Grid) ihtiyaç duyarsınız.

Semantik Tasarım Şablonunun Avantajları

Sayfa mimarinizi anlamsız <div>‘ler yerine semantik etiketlerle kurgulamanızın iki devasa faydası vardır:

1. Erişilebilirlik (Accessibility) ve POUR Modeli

İnternet herkes içindir. Görme engelli bireyler, ekran okuyucu (screen reader) adı verilen özel yazılımlar kullanarak sitenizi ziyaret ederler. Ekran okuyucular, semantik HTML etiketlerini adeta birer trafik tabelası gibi kullanırlar.

2026 yılı dijital erişilebilirlik standartlarının (WCAG) merkezinde yer alan POUR (Perceivable/Algılanabilir, Operable/Çalıştırılabilir, Understandable/Anlaşılabilir, Robust/Sağlam) modeline göre, içeriğinizin herkes tarafından kavranabilmesi zorunludur. Örneğin; ekran okuyucu kullanan bir ziyaretçi sitenize girdiğinde, menüleri tek tek dinlemek yerine bir klavye kısayoluyla doğrudan <main> (Ana İçerik) kısmına atlayabilir. Eğer siz ana içeriğinizi sadece <div class="icerik"> şeklinde kodlasaydınız, ekran okuyucu cihaz bunun ana içerik olduğunu anlayamaz ve engelli kullanıcıya çok kötü bir deneyim yaşatırdınız.

2. SEO (Arama Motoru Optimizasyonu) Gücü

Google botları web sitenizi tararken (crawl), sitenizin ne kadar düzenli olduğuna büyük önem verir. Semantik HTML, arama motorlarına sayfanızdaki bilgilerin önem derecesini fısıldar.

Örneğin, Google botu <aside> etiketini gördüğünde, içindeki verinin yan bilgi (reklam, diğer linkler) olduğunu anlar ve asıl odaklanması gereken anahtar kelimeleri burada değil, <article> veya <main> etiketlerinin içinde arar. Aynı zamanda, arama sonuçlarında görünen “Zengin Snippet” (Rich Snippets) kutucuklarına çıkma ihtimaliniz, doğru bir yapısal hiyerarşi kurduğunuz için ciddi anlamda artar.

Sonuç ve Başlangıç Tavsiyeleri

Başarılı bir web tasarımının ilk kuralı, kutuların görsel olarak nereye yerleşeceğini düşünmeden önce, “Bu kutunun anlamı nedir?” sorusunu sormaktır. Tasarım şablonunuzu (layout) hazırlarken şu kuralları alışkanlık haline getirin:

Sitenin iskeletinde <table> kullanmayı aklınızdan bile geçirmeyin.
Sadece arka plan rengi veya boşluk vermek için bir kutuya ihtiyacınız varsa <div> kullanın; ancak o kutu bir menü ise <nav>, bir alt bilgi ise <footer> kullanın.
Mobil cihazları asla unutmayın. Kurduğunuz bu semantik iskeleti, CSS @media (Medya Sorguları) kuralları ile telefon ekranlarında alt alta, masaüstü ekranlarda ise yan yana dizilecek şekilde (Mobile-First) kurgulayın.

Temeli sağlam atılmış bir HTML şablonu, üzerine inşa edeceğiniz CSS tasarımları ve JavaScript etkileşimleri için sarsılmaz bir zemin sunacaktır.

Etiketlendi:html

HTML Tasarım Şablonu (Layout): Modern Web Sayfası Düzeni

Geçmişten Günümüze Sayfa Düzeni (Layout) Evrimi