Div etiketi HTML dilinde sıklıkla bölümler oluşturmak için kullanılan, varsayılan display özelliği block olan kapsayıcı bir etikettir. Div etiketinin kullanım amacı sayfa içinde bölümler oluşturmaktır. Sayfa tasarımına göre iç içe bölümler de oluşturulabilir.

Bu etiketlerden bazıları header, footer, section, aticle, nav, aside, main gibi etiketleridir.

Section kelimesi kesit, kısım, bölüm anlamına gelmektedir.

Article kelimesi makale anlamına gelmektedir.

Nav kelimesi navigation kelimesinin kısaltmasıdır ve gezinti, yön bulma anlamlarına gelir.

Display özelliği sayfa yerleşimini ayarlamak için kullanılan en önemli CSS özelliklerinden biridir. HTML dilinde tüm etiketler için varsayılan olarak tanımlanmış display isminde bir CSS özelliği bulunmaktadır. Varsayılan olarak atanan bu değer, genellikle inline veya block olmaktadır. CSS kullanılarak etiketlerin varsayılan display özelliğini değiştirmek mümkündür.

Display özelliği block olan etiketler için width ve max-width değerlerini ayarlamak mümkündür. Varsayılan olarak bu etiketler bulunduğu ortamın tüm genişliğini kullanırlar. Eğer bu etiket doğrudan body etiketinin altında ise tarayıcı penceresinin en solundan en sağına kadar yer kaplayacaktır. Eğer bu etiket başka bir kapsayıcı etiketin altına yer alıyorsa, kapsayıcı etiketin sınırları dâhilinde olabilecek en yüksek genişliğe ulaşacaktır. Width özelliği ile ise etiketler için sabit bir genişlik tanımlaması yapılır ve bu etiket ve içindeki bileşenler bu genişlik içinde yer alırlar. Max-width ile belirlenen değer, elemanın genişliği için en büyük değeri gösterir.

Margin özelliği bildiğiniz üzere HTML elemanlarının diğer elemanlarla arasındaki mesafeyi ayarlamak için kullanılmaktadır. Ancak margin özelliğinin bir başka kullanımı ise blok düzeyindeki etiketlerin yatay olarak ortalanmasını sağlamaktır. Bunun için etiketin margin-left ve margin-right özelliklerine ya da sadece margin özelliğine auto değerinin verilmesi gerekmektedir.

Position kelimesi mevki, konum anlamları gelmektedir. Position özelliği ile elemanların ne tür bir konuma sahip olacağı belirlenir. Position özelliğine static, relative, fixed ve absolute değerleri verilebilmektedir. HTML sayfasındaki elemanların konumları left, right, top ve bottom özellikleri ile ayarlanabilir. Ancak bu ayarlamaların istenilen şekilde çalışabilmesini sağlamak için öncelikle position özelliği ile konum türü belirlenmelidir.

Hangi elemanın üstte hangi elemanın altta görüneceğini ise html kodu içinde yazılma sırası ve z-index özellikleri ile belirlenmektedir. Yazılma sırası dikkate alındığında kodda en son yazılan eleman en üstte görünecektir. Bu durum z-index özelliği ile değitirilebilir. Z-index özelliğine tam sayı değerler verilmelidir. Z-index değeri yüksek olan eleman, düşük olan elemanın üstünde görünecektir. Z-index özelliğine negatif tamsayı değerlerde vermek mümkündür.

Overflow kelimesi taşmak, dışına taşmak anlamlarına gelmektedir. Bu özellik, genişlik ve yükseklik özellikleri belirtilen elemanların içeriğinin sığmaması, taşması durumunda nasıl davranılacağı ile ilgilidir. Bu özellik visible, hidden, scroll ve auto olmak üzere 4 değer alabilmektedir. Varsayılan değer visible değeridir. Overflow özelliği visible olarak ayarlandığı zaman taşan içerik görünür durumda olur.

Float kelimesi yüzmek, süzülmek anlamına gelmektedir. Float özelliği ile elemanların sayfa içinde yüzmesi sağlanabilmektedir. None, left, right değerleri alabilmektedir. HTML etiketlerinin varsayılan float değeri none’dır. En basit kullanımı ile float özelliği kullanılarak sağ ya da sol tarafa yerleştirilen bir resmin etrafından metnin akması sağlanabilir.

Float özelliği dışında resim galerisinde olduğu gibi sayfada yüzen elemanlar oluşturmanın bir başka yolu da display özelliğine inline-block değeri vermektir. Bu özellik kullanıldığında float özelliğini kullmaya gerek kalmamaktadır. Ayrıca normalde float özelliği kullanıldıktan sonra clear özelliği kullanılarak temizlik yapmak gerekmektedir. Ancak inline-block ile buna da gerek yoktur.

Web sayfasının ana menüsünü veya web sayfasının bir bölümü ile ilgili menüleri oluştururken nav etiketini kullanmak tavsiye edilmektedir. Oluşturulacak menü sayfa tasarımına göre yatay ya da dikey olabilmektedir. Menüler aslında bağlantılardan oluşan bir listedir. Bu bağlamda menü oluşturmak için ul etiketi ile bağlantılardan oluşan sırasız bir liste oluşturmak kabul görmüş bir yöntemdir.

Bunun için web sayfası tasarımı yaparken farklı ekran büyüklüklerinde nasıl görünmesi gerektiğini de tasarlamak gerekir. Farklı ekran büyüklüklerine otomatik olarak uyum sağlayabilen tasarımlara, esnek (responsive) tasarım adı verilmektedir.

Viewport, web tarayıcısının web sayfalarını gösterdiği alana verilen isimdir. Bu alan masaüstü/dizüstü bilgisayarlarda daha büyük iken cep telefonlarında doğal olarak daha küçüktür. Tablet ve akıllı cep telefonu kullanımı bu kadar yaygınlaşmadan önce web sayfaları sadece masaüstü/dizüstü bilgisayar monitörlerinde kullanılmaya yönelik olarak geliştirilmekteydi.

Ortam sorgusu (media query) CSS’nin 3. sürümü ile gelen yeniliklerden biridir. Ortam sorgularının en önemli amacı tarayıcı penceresinin genişliği ile ilgili bilgi almaktır. Bunun dışında tarayıcı penceresinin yüksekliği, yerleşimi (yatay veya dikey), çözünürlüğü gibi bilgileri sorgulamakta mümkündür.

all: Tüm ortamlar

screen: Bilgisayar, tablet, cep telefonu gibi cihazların ekranları

print: Yazıcı çıktısı

speech: Ekrandaki metni sesli şekilde okuyan ekran okuyucuları

Günümüzde bir çok web sayfası tasarımında grid yapısı kullanılmaktadır. Hatta bir çok CSS kütüphanesi grid kullanımını destekleyecek araçlar sunmaktadırlar. Grid kullanımı ile genel olarak sayfa genişliği 12 eşit parçaya bölünür ve tarayıcı penceresinin tüm genişliği kullanılır. Grid kullanımı, tasarım öğelerini sayfa içinde yerleştirmeyi kolaylaştırır. 12 parçanın toplam genişliği yüzde yüz olacak şekilde ayarlanmaktadır. Bu durumda her bir parça yüzde 8,33’lük bir genişliğe sahip olacaktır.

Canvas etiketi HTML5 ile birlikte gelmiştir ve bu etiketin HTML5 için en önemli yeniliklerden biri olduğu söylenebilir. Canvas etiketi kullanılarak web sayfası içinde boş bir tuval oluşturulmuş olur. Bu tuval üzerinde etkileşimli canlandırmalar, oyunlar, 3 boyutlu çalışmalar yapmak mümkündür.