Web geliştirme sürecinde, etkili ve erişilebilir bir kullanıcı deneyimi sunmanın temelini, iyi yapılandırılmış bir HTML düzeni oluşturur. HTML layout, bir web sayfasının içeriğini mantıksal ve hiyerarşik bir şekilde organize etmek için kullanılan elemanları ve teknikleri ifade eder. Doğru layout kullanımı, arama motoru optimizasyonu (SEO) için kritik öneme sahip olduğu gibi, ekran okuyucular gibi yardımcı teknolojilerle etkileşimde bulunan kullanıcılar için de sayfa içeriğinin anlaşılabilirliğini artırır. Bu kılavuz, HTML'in yapısal elemanlarını kullanarak modern web sayfaları oluşturmanın temel prensiplerini detaylandıracaktır.

Temel Sözdizimi (Syntax)

HTML layout oluştururken kullanılan temel yapısal ve semantik elemanlar, bir web sayfasının ana bölgelerini tanımlar. Aşağıdaki kod bloğu, tipik bir HTML sayfa düzeninin temel sözdizimini göstermektedir.

    
Web Sitesi Başlığı
    



    

        
Ana İçerik Bölümü
        
Bu bölümde sayfanın ana içeriği yer alır.
    

    

Detaylı Açıklama

HTML5 ile tanıtılan semantik etiketler, geliştiricilere içeriğin amacını tarayıcılara ve arama motorlarına daha net bir şekilde iletme imkanı sunar. Bu etiketlerin her biri, belirli bir içeriğin türünü ve rolünü belirtir.

• : Bir dokümanın veya bölümün giriş içeriğini temsil eder. Genellikle başlıklar, logolar, navigasyon menüleri ve arama formları gibi ögeleri içerir.

• : Dokümanın veya uygulamanın baskın içeriğini temsil eder. Bir HTML dokümanında yalnızca bir adet

  etiketi bulunmalıdır.

• : Bağımsız, kendi kendine yeten bir içerik parçasını temsil eder. Bir blog yazısı, haber makalesi veya kullanıcı yorumu gibi içerikler için idealdir.

• : Geniş bir belgeyi veya uygulamayı mantıksal tematik gruplara ayırmak için kullanılır. Genellikle bir başlık (

  -

  ) ile başlar.

• : Herhangi bir semantik anlamı olmayan jenerik bir kapsayıcıdır. Genellikle CSS ile stillendirmek veya JavaScript ile manipüle etmek için kullanılır. İçeriğin semantik bir etikete uymadığı durumlarda tercih edilir.

• :

  etiketinin satır içi (inline) karşılığıdır. Metnin bir bölümünü stillendirmek veya işaretlemek için kullanılır ve herhangi bir semantik anlam taşımaz.

Pratik Kullanım Örnekleri

Aşağıdaki örnekler, yukarıda açıklanan HTML layout elemanlarının farklı senaryolarda nasıl kullanılabileceğini göstermektedir.

Örnek 1: Temel Web Sayfası Düzeni
Bu örnek, tipik bir web sayfasının ana hatlarını, header, navigasyon, ana içerik ve footer kullanarak nasıl oluşturulacağını gösterir.

    
Web Sitem
    



    

        
Hoş Geldiniz!
        
Bu, sitemizin ana içeriğidir. Sayfamızı keşfetmek için yukarıdaki menüyü kullanın.
    

Örnek 2: Blog Yazısı Düzeni
Bir blog yazısı gibi kendi içinde bağımsız bir içeriği (