Container tüm yapısal elementlerimizi içine alan kapsayıcı bir yapıdadır. Header sayfamızın logosu ve dahili arama motoru gibi temel öğelerini içerir. Nav [nev okunur]'in açılımı navigation'dır. Yani navigasyon. Sayfamızın menüsünü içerir. Content dilimizde içerik anlamına gelmektedir ve sitemizle ilgili tüm içerik bu kısımda yer alır. Footer ise sayfamızın yapım tarihi, telif hakları gibi ayrıntıları içerir.
Bu basit web sitesini yapısını biraz daha geliştirecek olursak şu şekilde bir sayfa oluşturabiliriz:
İlk yaptığımız siteden farkı aside elementinin gelmesidir. Dilimizde yan taraf gibi bir anlama gelmektedir. Sitemizle ilgili sabit elementleri içerir. Örneğin aside kısmında reklam alanımız, konu kategorileri, takvim gibi ayırıcı nitelikte içerikler olabilir.
Şimdi lafı uzatmadan tüm bu yapısal etiketleri ayrı ayrı inceleyelim:
<div> etiketi
En sık kullanacağımız yapısal etikettir. Açılımı division'dır. Dilimizde bölüm gibi bir anlama gelir. Div'lerle yapılan siteler işte bu etiket sayesinde yapılır.
Şimdilik şöyle basit bir örnekle div'leri tanıtayım:
<div>
<p>Bu bir div'dir.</p>
</div>
<div>
<p>Bu da başka bir div'dir.</p>
</div>
Çıktısı ise şu şekilde olacaktır:
Bu bir div'dir.
Bu da başka bir div'dir.
<section> etiketi
Dilimizde kesim, kısım gibi bir anlama gelir. HTML5 ile gelen yeni bir etikettir. Bazen tasarımda o kadar çok <div> kullanırız ki bu div'lerin birbirleri ile karışmaması için <section> etiketi kurtarıcı niteliktedir.
Hemen küçük bir örnekle bunu göstereyim:
<section>
<div>
<p>Birinci section birinci paragraf</p>
</div>
<div>
<p>Birinci section ikinci paragraf</p>
</div>
<div>
<p>Birinci section üçüncü paragraf</p>
</div>
</section>
<section>
<div>
<p>İkinci section birinci paragraf</p>
</div>
<div>
<p>İkinci section ikinci paragraf</p>
</div>
<div>
<p>İkinci section üçüncü paragraf</p>
</div>
</section>
Çıktısı ise şu şekilde olacaktır:
Birinci section birinci paragraf
Birinci section ikinci paragraf
Birinci section üçüncü paragraf
İkinci section birinci paragraf
İkinci section ikinci paragraf
İkinci section üçüncü paragraf
<header> etiketi
Sitemizin logosu, sosyal medya düğmeleri, dahili arama motoru, ticari sitelerde "üye girişi", "sepetim" gibi bağlantıların yer aldığı etikettir. Bu etiket de HTML5 ile birlikte gelmiştir. Daha önceden header yerine div'lere id vermek zorundaydık. Artık tek yapmamız gereken <header> yazmak.
Şu örnekte ne demek istediğimi anlayacaksınız:
<div id="header">
<p>Eskiden böyle header oluştururduk.</p>
</div>
<header>
<p>Şimdi sadece <header>'ı kullanmamaız yeterli.</p>
</header>
Çıktımız ise şu şekilde olacaktır:
Eskiden böyle header yazardık.
Şimdi sadece <header>'ı kullanmamaız yeterli.
<nav> etiketi
Açılımı navigation'dır. Dilimizde navigasyon (yönlendirme) anlamına gelir. HTML5 ile gelen yeni bir etikettir. Sitemizdeki menü <nav> elementi içine yazılır.
Sitemizin yapım yılı, telif hakları gibi ayrıntılarının yer aldığı kısımdır. Sayfanın en altında yer alır. Ticari sitelerde referans adresleri, "hakkımızda", "iletişim" gibi bağlantılar ile diğer bazı önemli site içi bağlantılar bu kısımda kullanılır.
Footer etiketinin içinde <small> ve <address> etiketlerinin kullanılması yerindedir. Çıktımız ise şu şekilde olacaktır:
<aside> etiketi
HTML5 ile gelen yeni bir etikettir. Sayfanın sidebar olarak tanımlanan yan tarafını belirtir. Sayfanın ya sağındadır ya da solundadır. Genellikle blog sitelerinde kullanılır. İçeriğinde kategoriler bölümü, aram kutusu, anketler, sabit bağlantılar ve reklam alanı ( banner ) yer alır.
Bu etiket de HTML5 ile gelen yeni bir etikettir. Article dilimizde makale anlamına gelmektedir. Sitemizde yer alan metinsel içerik bu etiket içinde yer alır. <section> etiketi ile birlikte kullanılması tavsiye edilir.
<div>
<section>
<h3>Deneme Yazısı</h3>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida est sed
orci suscipit fringilla. Nulla hendrerit elementum nunc, non luctus justo
vehicula ac. Etiam ac imperdiet nisl. Ut tempor mi quis sagittis facilisis.
Donec nec ante vel elit fermentum dapibus. In hac habitasse platea dictumst.
Nulla facilisi. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Morbi id enim tortor.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida est sed
orci suscipit fringilla. Nulla hendrerit elementum nunc, non luctus justo
vehicula ac. Etiam ac imperdiet nisl. Ut tempor mi quis sagittis facilisis.
Donec nec ante vel elit fermentum dapibus. In hac habitasse platea dictumst.
Nulla facilisi. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Morbi id enim tortor.
</p>
</article>
</section>
</div>
Çıktısı ise şu şekildedir:
Deneme Yazısı
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida est sed
orci suscipit fringilla. Nulla hendrerit elementum nunc, non luctus justo
vehicula ac. Etiam ac imperdiet nisl. Ut tempor mi quis sagittis facilisis.
Donec nec ante vel elit fermentum dapibus. In hac habitasse platea dictumst.
Nulla facilisi. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Morbi id enim tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut gravida est sed
orci suscipit fringilla. Nulla hendrerit elementum nunc, non luctus justo
vehicula ac. Etiam ac imperdiet nisl. Ut tempor mi quis sagittis facilisis.
Donec nec ante vel elit fermentum dapibus. In hac habitasse platea dictumst.
Nulla facilisi. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Morbi id enim tortor.
<figure> etiketi
Dilimizde figür, şekil gibi bir anlama gelmektedir. HTML5 ile gelmiştir. Sitemizde yer alan görsellerin bu etiket içinde yer alması tavsiye edilmektedir.
