HTML 5 ile kullanılmaya başlanan semantik etiketler , aslında birer div gibidir. Ancak isimlerinden dolayı sayfada kullanılacakları bölümler farklı olur. Arama motorları ve programcılar bu etiketler sayesinde hangi bölümün nerde olduğunu kolaylıkla anlayabilirler.
Semantik aynı zamanda anlamsal demektir. Dolayısıyla semantik etiketler her ne kadar birer div gibi boş dahi olsalar , div etiketinden farklı olarak içlerine aldıkları yapılar hakkında bilgi verirler.
Peki ne bu etiketler?
- main
- section
- header
- footer
- nav
- article
- aside
- details ve summary
- figure ve figcaption
Tek tek bakalım...
<main>
Sayfanın ana içeriğini belirtir. İçinde, sayfada kullanıla yapılar, session , article , aside gibi diğer semantik etiketler olabilir. Main etiketi içindeki içeriğin sayfada özgün olması gerekir. Burada yer alan bilgiler , sayfanı üst , yan yada alt bölümlerinde tekrar edilmemelidir. Dolayısıyla sayfada bir kez kullanılmalıdır.
<section>
HTML sayfasındaki bir bölümü tanımlar. Genelde gövde gibi. ana bölümler için kullanılır. İçlerinde article,nav,aside gibi etiketler olabilir.
<header>
Sayfanın yada herhangi bir bölümün üst bölümü için kullanılır. Sayfanın üst bölümünde yer alan menü, logo, arama vb gibi yapılar header etiketi içinde belirtilir. Yine sayfa içinde herhangi bir bölümünde (makale gibi) başlık kısmı çin kullanılabilir.
<footer>
Sayfanın yada herhangi bir bölümün alt bölümü için kullanılır. Sayfanın altt bölümünde yer alan mini menü, logo, telif hakkı vb gibi yapılar footeretiketi içinde belirtilir. Yine sayfa içinde herhangi bir bölümünde bitiş (alt) kısmı çin kullanılabilir.
<nav>
Adını Navigation (navigasyon) 'dan alır. Yönlendirme , gezinme, dolaşım anlamına gelir ve sitenin menü yada link bölümlerini kapsamak için kullanılır. Nav etiketini gören tarayıcı burada menü yada bağlantılar olduğunu anlar.
<article>
Article , içerik yada makale anlamına gelir. Sayafda , blog yazıları , köşe yazıları yada bir makale bölümü var ise, article etiketi içerisinde yazılır. Arama motorları burada bir yazı olduğunu anlar.
<aside>
Sayfanın ana içeriği dışında ek içerik belirtmek için kullanılır. Genelde yan bölümler aside etiketi içerisinde yazılır. Reklam , bilgi notları , çok okunanlar vb gibi..
<details> ve <summary>
Diğer semantik etiketlerden farklı olarak fonksiyonel bir yapıları bulunur. Açılır kapanır yapıyla herhangi bir ayrıntıyı belirtmeye yararlar. <detail> etiketi ayrıntıyı başlatırken <summary> ise detay başlığını belirtir. Başlık tıklandığında açıklama bölümü açılır.
<details>
<summary> HTML Nedir?</summary>
<p>HTML, web sayfaları için staart işaretleyici dildir ve sayfanın yapısını belirler. Bir çok elemandan oluşur ve tarayıcıya sayfanın nasıl görüneceğini belirtir.</p>
</details>
Ekran Görüntüsü
HTML Nedir?
HTML, web sayfaları için staart işaretleyici dildir ve sayfanın yapısını belirler. Bir çok elemandan oluşur ve tarayıcıya sayfanın nasıl görüneceğini belirtir.
Yukarıda HTML Nedir? yazısı tıklandığında , summary etiketleri arasına yazdığımız açıklama görünecektir.
<figure> ve <figcaption>
Yine diğer semantik etiketlerden farklı olarak fonksiyonel bir yapıları bulunur. Sayfadaki resim,grafik,diyagram gibi görsel nesneleri belirtmek için kulanılır. figcaption nesne için tanımlama yazısı belirtir.
<figure>
<img src="html.jpg" alt="Html" width="200" height="100">
<figcaption>HTML</figcaption>
</figure>
Ekran Görüntüsü
Görüşmek üzere...
