Dikkat! HTML 5.1 ile bu makaledeki örnek kod geçerliliğini yitirmiştir, örnek kodun güncel haline buradaki adresten ulaşabilirsiniz.

Buradaki bölümde birçok html5 etiketi ve konusunu paylaştık, ama henüz tam bir sayfa yapısı nasıl olmalıdır sorusunu yanıtlamadık, Bu yazıyla birlikte HTML5 standartının sayfa yapısı nasıl olmalıdır, header, nav, section, article, aside ve footer etiketleri nedir hepbirlikte değerlendirelim.

header tag

header etiketi, sayfa başlığımızı tanımlar ve sayfada yanlızca 1 defa kullanılır. Tüm tarayıcılarda standart olarak 20px top ve bottom padding ile birlikte gelir, css yazarken bunu göz önünde bulundurup padding:0px; tanımlamasını yapmanızı tavsiye ederim.

nav tag

nav etiketi, menü alanımızı tanımlamak için kullanılır ve sayfa içinde id tanımlamaları yaparak birden fazla kullanabilirsiniz,

section tag

section etiketi, sayfa detayımızı yani içerik alanımızı belirler, sayfa içinde en fazla 1 defa kullanabiliriz.

article tag

article etiketi, konularımızı belirtmek için kullanılır, sayfa içinde birden fazla kullanılabilir, özellikle blog yapılı sitelerde kullanmamız önemlidir her konuyu bir article etiketi içine alabiliriz.

aside tag

aside etiketi, sayfamızın sağ veya sol sütunlarını tanımlamak için kullanılır.

footer tag

footer etiketi, sayfamızın alt kısmını tanımlamak için kullanılır. Sayfa içinde sadece 1 defa kullanılabilir.

Yukarıda bahsettiğimiz tüm etiketler sayfa yapımızı oluşturur, şimdi tüm bunları kullanarak bir örnek yapalım.

Örneği incelemek için tıklayın.

Dikkat! HTML 5.1 ile aşağıdaki örnek kod geçerliliğini yitirmiştir, örnek kodun güncel haline buradaki adresten ulaşabilirsiniz.
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML5 Sayfa Yapısı</title>
	</head>
	<body>
    	<div id="container">
        
            <header>
                <p>header (sayfa başlığı)</p>
            </header>
            
            <nav>
            	<p>nav (sayfa menüsü)</p>
            </nav>
            
            <section>
            	<p>section (sayfa içi)</p>
                
                <article>
                	<p>article (konu)</p>
                </article>
                
                <article>
                	<p>article (konu)</p>
                </article>
                
            </section>
            
            <aside>
            	<p>aside (sağ veya sol kolon)</p>
            </aside>
            
            <footer>
            	<p>footer (sayfa altı)</p>
            </footer>
        </div>
	</body>
</html>