Standart HTML5 Sayfa Yapısı
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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Sayfa Yapısı</title>
</head>
<body>
<div id="container">
<header>
header (sayfa başlığı)
</header>
<nav>
nav (sayfa menüsü)
</nav>
<section>
section (sayfa içi)
<article>
article (konu)
</article>
<article>
article (konu)
</article>
</section>
<aside>
aside (sağ veya sol kolon)
</aside>
<footer>
footer (sayfa altı)
</footer>
</div>
</body>
</html>