Layout ’u kelime olarak açıklamak gerekir ise; düzen, tasarım ve yerleşim planı olarak açıklayabiliriz. Buradan yola çıkarak Web page layout’ u ise, web sayfası düzeni olarak açıklamak doğru bir tanımlama olacaktır.

Web sayfası düzeni, kullanıcı deneyimlerinin önem verildiği, iyi oluşturulmuş, buna göre yapılandırılmış ve semantik açıdan zengin web siteleri oluşturmanın önemli bir parçasıdır.

Nedir bu semantik diye soracak olursanız da, en temel haliyle daha anlamlı html etiketleri diyebiliriz. Eskiden bir web sayfasını oluştururken

etiketi kullanıp, onlara id/class verip, sayfayı bölümlere ayırırdık. Html5 ile birlikte gelen semantik elementlerle ise, bu bölümler direk etiketlere dönüştürülmüş oldu.

Mesela sayfanın en tepesine bir header eklerken önceden

< div id=”header”>…< /div>

şeklinde kod yazarken, şimdi

< header>…< /header>

içerikleri arasına kodu eklememiz yeterli oluyor.

Bu etiketlerden bazıları header, footer, nav, section, article, aside gibidir.

Bu bilgileri Leo Panel üzerinden inceleyebiliriz;

Sayfayı ilk açtığımızda karşımıza genel olarak 2 kolon çıkıyor.

Burada soldaki mavi olan kısım, menünün bulunduğu alan navigation anlamına gelen < nav>  etiketine karşılık geliyor. Geri kalan s ağ kısımda genel content’imizi barındırıyor.

Sağdaki content alanımız da kendi içerisinde bölümlere ayrılıyor tabiki.

Resimde gözüken, sayfa açıldığında en tepede gözüken alan < header>  etiketine karşılık geliyor.

Burada sol kısımda bulunduğumuz sayfa ile ilgili bilgi ve sağ kısımda ise datacenter seçimi ve kullanıcı bilgileri yer alıyor.

Hemen altındaki breadcrumb (sayfa işaretleri), arama kutusu ve yeni ekle, işlemler gibi diğer butonların yer aldığı kısmı ise subheader olarak tanımlıyoruz. Bunun html5’de direk bir karşılığı yok, o yüzden header tag’ı içerisinde kendimiz ayırabiliriz.

Bunun altındaki liste veya detay bilgileri ile gösterdiğimiz kısmı, ayrı bir olarak değerlendiriyoruz.

Burada herhangi bir içerik olabilir, kendi içinde bölümlenebilir veya sadece bir elemanı barındırmak için kullanabiliriz.

Bizim şablonumuzda bir < footer>  alanımız yok, fakat olsaydı bunu < header>  daki gibi < content>  içine de ekleyebilir, genel container’ımızın altında da değerlendirebilirdik.