HTML5 Anlamsal Elementler (SEMANTİK ELEMENTLER)

Html'de (HTML4) birtakım anlamsal yetersizlikler var. Tasarımcılar bu yetersizlikleri class ve id‘ler kullanarak çözmeye çalışıyorlar. Ancak iş karmaşıklaştıkça, ziyaretçiye daha heyecan verici tasarımlar sunmak istendiğinde, anlamsal isimler bulmak gitgide daha da zorlaşıyor.

HTML5’te bu sorunlara anlamsal elementler (semantic elements) kullanarak yanıt verilmeye çalışılmış. Basit bir blog sayfasında mimari genel olarak şu şekildedir.


div elementini kullanıp ona sınıflar vererek temel mimari bu şekilde oluşturulabilir. Ancak gördüğünüz gibi HTML4’de bölümleri anlamsallaştırmak için çokça yazı yazmak gerekiyor. HTML5’te ise bu bölümler için bazı elementler tanımlanmış. Örneğin bir bölümü tanımlamak için section, başlık alanını tanımlamak için header, makaleyi tanımlamak için article, altalanı tanımlamak için footer…

Header

Başlık alanını temsil eder. Sadece başlığınız olacaksa altı seviyeli başlıklardan (h1-h6) birini kullanmanız yeterli. Ancak başlığı temsil eden başka öğeler de varsa -örneğin alt basık gibi- bunu header elementiyle sarmanız gerekir. 

<header>

 <h1>Başlık alanı</h1> 

<h2>Sitemizin tanımını</h2> 

</header>

<header> 

<h1>Lorem ipsum dolor</h1>

 <p>Lorem ipsum dolor sit amet</p> 

</header>