Bugün HTML5 ile gelen ve genelde pek kullanılmayan bir etiketi yazmak istiyorum, zira döküman yapısını oluşturmamızda çok önemli bir rolü var.

Daha önce buradaki yazı ile HTML5 sayfa yapısının nasıl olması gerektiğini incelemiştik, fakat <main> etiketi ile burada yazdıklarımın tamamı geçerliliğini yitirdi, en kısa zamanda HTML5 sayfa yapısını yeni bir yazı ile ele alacağım.

<main> etiketi aslında xhtml'den yabancı olduğumuz bir şey değil. xhtml de <div class="main">, <div class="content">, <div class="container"> gibi sayfa içeriğimizi tutacak div'ler kullanırdık, html5 main tag ile bu tip kullanımlar tarihe karışıyor.

Aslında dökümanlarda bunun gibi standartlar olması bence çok güzel, tüm kod tek bir elden çıkmışçasına ve her şey herkes tarafından daha anlaşılır.

Önemli! Döküman içerisinde birden fazla <main> etiketi kullanılamaz, <main> etiketi <article>, <aside>, <header>, <footer>, <nav> gibi etiketlerin alt elemanı olamaz!

Main etiketinin kullanımı için aşağıdaki örneği inceleyebilirsiniz.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sayfa Başlığı</title>
    </head>
    
    <body>
        <main>
            <h1>Ürünler</h1>
            <p>Tüm ürünlerimize aşağıdan ulaşabilirsiniz.</p>
            
            <article>
                <h1>Cep Telefonu</h1>
                <p>Lorem ipsum dolor sit amet.</p>
            </article>
            
            <article>
                <h1>Tablet Bilgisayar</h1>
                <p>Lorem ipsum dolor sit amet.</p>
            </article>
            
            <article>
                <h1>Masaüstü Bilgisayar</h1>
                <p>Lorem ipsum dolor sit amet.</p>
            </article>
        </main>
    </body>
</html>

Kaynaklar

http://www.w3.org/TR/html51/grouping-content.html#the-main-element

http://www.w3schools.com/tags/tag_main.asp