Başlıklar bir web sitesinin olmazsa olmazlarıdır. Bu nedenle herhangi bir sayfanızda en az bir tane başlık kullanmalısınız, bu sayede ziyaretçilerinizin o anda neyi okuduğunu bilmesini sağlarsınız. HTML size 6 tane önce de hazırlanmış başlık etiketi imkanı sunuyor. Fakat incelediğim birçok web sayfası başlıkları şu şekilde belirliyor:

Bu şekilde baslik ID’si ve baslik class’ı ile isteği sonucu üretiyor. Fakat h1 etiketi kullanmıyor:

oldukça büyük, kalın ve çirkin

Elbette eğer siz h1 etiketlerine stil vermezseniz haliyle büyük, kalın ve çirkin görünecektir. Halbuki div’i stillendireceğiniz h1’i stillendirmeniz daha mantıklı. En azından SEO açısından. Web sayfalarınızda bir tane h1 etiketi arama motoru botlarının dikkatini çok fazla çeker. Fakat bir tanesi de yeterlidir.

Neden DIV yerine Başlık Etiketini Kullanalım

• Arama motorları başlık etiketini severler
• Başlıklarınız için hangi class’ı kullandığınızı hatırlamak zorunda kalmazsınız
• Sağlam bir sayfa düzeni için idealdir.
• Stiller kapalı olduğunda bile neyin ne olduğu anlaşılabilir

Başlıklarınıza Stil Oluşturalım
Başlık etiketlerinizi “büyük, kalın ve çirkin” olmaktan kurtarmak için öncelikle nasıl görünmesini istiyorsak o şekilde stillendirelim. Bu nedenle bir web sitesi üzerinde çalıştığım zaman öncelikle paragraf, h1, h2 ve h3 stillerini belirlerim. Örneğin yeni bir sitenizin stil dosyası başlangıçta bu olabilir:

Bundan sonraki adımda başlık etiketinizin font türünü ve font rengini düzenleyin. Bu sayede sayfa yapınıza biraz daha uygun hale gelecektir.

Çerçeveler Başlıklarınızı Çıplaklıktan Kurtarır
Çerçeveler başlıklarınızı geliştirmek için muhteşem bir yoldur. Fakat her başlığınızda çerçeve olmasına da gerek yoktur. Önemli olan sitenizle uyum içinde olmasıdır.

Yukarıdaki örnekte başlığın üstüne düz bir çizgi altına ise noktlar kümesinden oluşan bir çizgi ekledim.

Başlığınıza bir arka plan resmi eklmek çok şık bir görüntü katabilir
Birçok web sitesinin üst kısmnıda başlık kısmı yer alır. Genellikle site başlığı ve grafik. Birçok tasarımcı bunları iki farklı element olarak ele alır ve o şekilde hazırlar. Neden siz de öyle yapasınız ki? Şimdi başlığımızın arkasına bir de resim yerleştirelim:

Hayalim de eklediğim resmin yüksekliği 90px idi. O nedenle padding: 0.5em 0 90px 0; yaptım. Bu sayede alttan 90 piksellik padding verdim. Daha farklı yöntemlerde var. Line-height, margin gibi.

Umarım anlatabilmişimdir.

Kolay gelsin