Başlık ve Alt Bilgi Alanı
header ve footer elemanları sayesinde başlık ve alt bilgi alanları tanımlanabilir. Başlık alanını tanımlamak için head elemanı kullanılır. Bu sırada bunun zorunlu olarak sayfanın tüm başlık alanı olması gerekmez. Aynı zamanda header ile başka elemanların başlık alanı olarak da işaretlenebilir, örneğin bölümler ve makaleler.
Dikkat: Tanınan HTML belgesinin başlık alanını tanımlayan head elemanıyla header terimini karıştırmayın, içinde belge başlığı, stil yapısı ve JavaScript çağrıları bulunan.
Bir belge için header kullanımı aşağıdaki gibi olacaktır:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>section elemanına uygulandığında aşağıdaki gibi bir görüntü elde edilir:
<section>
<header>
<h1> Web Uygulamaları Oluşturma (Bölüm 09): jQuery mobil (1)</h1>
<p> jQuery şüphesiz en bilinen JavaScript Frameworklerinden biridir.</p>
</header>
<p>
Bu nedenle "klasik" web sitelerinde jQuery binlerce kez kullanılmaktadır. Web uygulamalarında kullanım için özellikle tasarlanmış olan jQuery mobile (jQM) adlı kardeş Framework ile web uygulamanızı gerçek bir uygulama gibi hızlıca gösterilmesine yardımcı olur. jQM'e detaylı bir şekilde göz atmak için yeterince neden var.
</p>
<footer>
<p>Telif Hakkı PSD-Tutorials.de tarafından</p>
</footer>
</section>footer ve header'ın ek header ve footer elemanları içermemesine dikkat edin.
Başlıkları Gruplama
Bölümlerle ilişkili olarak başlıklar devreye girer. Bu başlıklar başlangıçta h1 ile h6 gibi klasik elemanlar olabilir. HTML5'te ayrıca hgroup elemanına da izin verilir. Bu hgroup elemanları içinde birden fazla başlık olabilir.
İlk önce, "standart" yapıyı hx elemanları ile tanımlayan klasik bir HTML belgesine göz atın.
<h1>
Kitap
</h1>
<h2>
Bölüm 1
</h2>
<h2>
Bölüm 2
</h2>
<h3>
Alt Bölüm 2.1
</h3>
<h3>
Alt Bölüm 2.2
</h3>
<h2>
Bölüm 3
</h2>
Bu tanım aşağıdaki yapının anlamına gelir:
Kitap
Bölüm 1
Bölüm 2
Alt Bölüm 2.1
Alt Bölüm 2.2
Bölüm 3
Tarayıcıda başlıklar girintilenmez.
hgroup özellikle gazetecilik metinleriyle ilişkili olarak ilginçtir. Bu metinler genellikle ana başlık ve alt başlık olmak üzere iki kısımdan oluşur. Bir örnek bu yönü açıklamak için yeterli olacaktır.
<hgroup> <h1>Bulut İşletim Sistemi</h1> <h2>Web'in İşletim Sistemi Olarak</h2> </hgroup> <p>Makalenin içeriği burada başlar...</p>
Bu örnekte alt başlığın makale içinde kendi başlığı oluşturmadığı açıktır. Daha çok bu, makale başlığının bir parçasıdır. Böyle bir durumu hgroup elemanı ile özetlemek mümkündür.
hgroup içinde h1 ile h6 elemanlarına izin verilir.
Belirleme Konsepti
HTML5'te, section ile çeşitli hx elemanlarının birlikte çalıştığı belirleme konsepti devreye girer. Bu konsepte göre, başlıklar geleneksel olarak h1 ile h6 elemanlarıyla farklı seviyelere ayrılır. Burada h1 en üst seviyeyi temsil ederken, h6 en düşük seviyeyi temsil eder. Burada önemli bir değişiklik olmaksızın, hx elemanları section elemanları içinde tanımlanabilir. Her seferinde sayım yeniden başlar ancak her zaman bir seviye daha alçak olacak şekilde devam eder.
Belirleme konsepti HTML5 özellikle karmaşık görünse de, arkasındaki fikir oldukça basittir. Aslında, bu sayede makine tarafından okunabilir doküman yapısı tanımlanabilir.
Bu konsepti bir örnekle açıklayalım:
<h1>
Bölüm 1
</h1>
<section>
<h1>
Bölüm 2
</h1>
<section>
<h1>
Bölüm 3
</h1>
</section>
</section>
HTML5'nin Çerçeve (Outline) Konseptiyle aşağıdaki yapı ortaya çıkmaktadır:
1. Bölüm 1
- Bölüm 2
- Bölüm 3
- Bölüm 3
Bir başka örnek etkiyi daha açıklayacaktır. Yine başlangıç belgesi aşağıda yer almaktadır.
<section>
<h1>Kurulum ve Yapılandırma</h1>
<section>
<h2>Kurulum</h2>
<p>Kurulum konusuyla ilgili her şey
</section> <section>
<h2>Yapılandırma</h2>
<p>Yapılandırma konusuyla ilgili tüm detaylar
</section>
<aside>
<p>Konuya ilişkin ilginç kitaplar...
</aside>
</section>
<footer>
<p>(c) PSD-Tutorials.de tarafından
</footer>
</section>
Şu yapı ortaya çıkmaktadır:
1. Bölüm (Kurulum ve Yapılandırma)
1.1 Bölüm (Kurulum)
1.2 Bölüm (Yapılandırma)
1.3 Bölüm (aside)
- Bölüm (footer)
Ve bir başka örnek:
<body>
<h1>Kurulum ve Yapılandırma</h1>
<h2>Kurulum</h2>
<p>Kurulum konusunda her şey
...daha fazla içerik...
<section>
<h3>Gereksinimler</h3>
<p>Kurulum gereksinimleriyle ilgili her şey
...daha fazla içerik...
<h3>Hazırlıklar</h3>
<p>Hazırlıklar hakkında her şey
...daha fazla içerik...
<h2>Yapılandırma</h2>
<p>Yapılandırma konusuyla ilgili her şey
...daha fazla içerik...
</section>
</body>
Elde edilen yapı şu şekildedir:
1. Kurulum ve Yapılandırma
1.1 Kurulum
1.1.1 Gereksinimler
1.1.2 Hazırlıklar
1.2 Yapılandırma
İçsel numaralandırma her seferinde yeniden 1'den başlar. Çerçeve (Outline) konseptinden sadece bu öğeler etkilenmektedir:
• article
• aside
• nav
• section
Buna karşılık header ve footer öğeleri dışarıda kalmaktadır.
Cerşeve (Outline) konseptinin şu anda tarayıcılar tarafından desteklenmediğini lütfen unutmayın.
Fakat muhtemelen tarayıcı üreticilerinin burada harekete geçmesi sadece zaman meselesidir. Çerçeve konseptinin avantajları çok büyüktür. Örneğin otomatik olarak oluşturulan gezinti panolarını düşünün. Yine de, yapılandırmanızın tarayıcılar tarafından şu anda dikkate alınmadığı şekilde bile, belgelerinizi mantıklı bir şekilde yapılandırmaya şimdiden çalışmalısınız. Bu şekilde web siteleriniz için geleceğe yönelik bir güvenilirlik elde edersiniz.
