Anlamsal Web
- Bu bölümü ikiye böleceğiz.
- İlk olarak yapısal etiketlerinden bahsedeceğiz,sonrasındaise geri kalan yeni anlamsal etiketleri anlatmaya çalışacağız.
- Yapısal etiketlere geçmeden anlamsal ne demek anlamaya çalışalım.
- Anlamsal(Semantic) etiketler içeriğinde ne olduğu hakkındabize bilgi veren etikettir.
- Yapısal etiket ise sayfanın neresinde duracağını ve içerisinde nasıl bir bilgi olduğunu tahmin ettiğimiz etikelerdir.
- Bu bakımdan yapısal etiketler aynı zamanda anlamsal etiketolarak kabul edilir.
Yapısal Etiketler
- İlkokuldan beri öğretilen kompozisyon yapısında bir kompozisyonun başlığı,giriş bölümü,gelişme bölümü ve sonuç bölümü bulunmaktadır.
- Kompozisyon modeli web sayfaları için de geçerlidir dersek yanlış bir ifade olmaz.
- HTML5’in yeni yapısal etiketlerinden önce başlangıç,içerik,alt bilgi bölümleri div etiketlerininid’leri ile tanımlanmaktaydı ve standart değildi.
- Bir örnek vermek gerekirse;HTML5 öncesi bir web sayfasının yapısı aşağıdaki gibidir.
<html> <head>
<title>
Basit bir HTML sayfası.</title>
</head>
<body>
<div id=‘header’>Baslik</div> <div id=‘content’>İcerik</div> <div id=‘footer’>Altbilgi</div>
</body> </html>
- Yukarıdaki meşhur div etiketleri ile sayfanın bölümlerinin birbirinden ayrıldığını ve bölümlerin içeriğinin de id özelliklerinde tanımlandığını görmekteyiz.
- id’nin standart değeri olmayıp herbir geliştirici istediği değeri id’yeverebilmektedir.
•
•
•
•
•
Yukarıdaki yapı standart olmadığından her geliştirici kendine göre bir yapı oluşturabilmekteydi.
Bu durumda karışık yapıların çıkmasına nedenoluyordu.
div etiketleri anlamsal etiket değildir yani içerisinde nasıl bir veri olduğunu bilemeyiz.
Sadece bir blok olduğunu ve içerisinde herhangi bir veri olabileceğini bilebiliriz.
span etiketi de div gibi anlamsal bir etiket değildir.
- Bunun yanında html’de bulunan img,form ve tableetiketleri içeriği hakkında bilgi vermektedir.
- Şimdi ise HTML5 ile gelen yeni yapısal etiketlerilisteleyelim.
• Yukarıdaki herbir etiketi teker teker anlatmadan önce bu etiketlerin sayfa içerisinde nasıl konumlanabileceğini aşağıdaki iki şekilde görebiliriz.
- Yukarıdaki her iki şekilde HTML5 yapısal etiketleri ile oluşturulmuş geçerli yapılardır.
- İki farklı örnek vererek tasarımlara göre bazı değişiklerin olabileceğini göstermek istedik.
- HTML5 ile gelen bu yeni etiketler aslında isim farklılığından çok yeni birşey katmamakta sadeceanlam kazandırmaktadır.
- Bu yüzden bu yapısal etiketler aynı div gibidavranırlar.
- CSS ile konumlarını genişliklerini yine geliştiricinin ayarlaması gerekir.
• Son olarak eğer bu etiketleri desteklemeyenbirtarayıcı kullanıyorsanız CSS olarak aşağıdaki tanımı yapmanız büyük oranda işinizi görecektir.
article,section,aside,hgroup,nav,header,footer,figure,figoaption{ display;block;
}
<header>
• <header> etiketi web sayfasının başlığını veya sayfanın içindeki bazı bölümlerin başlıklarını yazmak için kullanılır.
• İlgili olduğu içerik hakkında da bazı bilgiler(yazar adı,yayınlanma zamanı vb.)verebilir.
• Bir sayfada birden fazla <header> etiketikullanılabilir.
<!DOCTYPE html> <html>
<head> <title>
HTML5 sayfası
</title> </head>
<body> <header>Baslik</header> </body>
</html>