HTML5 Yeni Semantik Elementler

HTML Dersleri  
HTML5 Yeni Semantik Elementler

HTML5'in özellikleri incelendiğinde, birçok yeni etiketin eklendiğinden bir önceki HTML5 Giriş dersinde kısaca bahsetmiştim. Bu dersimizde semantik (anlamsal) etiketlerden bahsedeceğim.

Peki nedir bu semantik ve semantik olmayan elementler. Semantik Elementler kısaca anlamı olan elementler. Anlamdan kasıt semantik bir element hem tarayıcıya hem de geliştiriciye kendisinin anlamını açıkça belirten element demektir. Daha basit açıklamak gerekirse <form>, <table>, ve <img> elementleri içeriği açıkça belirtirler yani birer semantik elementtirler. Semantik olmayan elementlere ise <div> ve <span> gibi içerik hakkında bir şey söylemeyen elementleri örnek verebiliriz.

Klasik HTML ve Semantik HTML5 Sayfa Yapıları

Günümüzde bir çok HTML sayfası resimdeki HTML sayfa yapısı standardında kodlanmıştır. HTML5 buna daha anlamlı bir çözüm buluyor. Bu hem Tarayıcı, hemde sitenizi indexleyen botlar için daha anlamlı bir yapı demek oluyor.

<header>: Sitenin en üst kısmını içine alır.
<nav>: Menüler içindir.
<section>: Genel bölümleme öğesidir.
<article>: Makale, deneme tarzı yazıları kapsar.

<aside>: Ana içerikten ayrı yazılan kısımdır.
<figure>: Çeşitli medya içeriği gruplarını belirler.
<figcaption>: <figure> elementinin başlığını belirler.
<footer>: Sitelerin en alt kısmını içine alır.
<details>: Detay bilgisi içerir.
<summary>: Detay bilgisi başlığını içerir.
<mark>: Yazı içerisinde özellikle üstünde durulan kelimeleri belirler.
<time>: Tarih, saat verilerini kapsar.

<header> Elementi: <header> elementi bir sayfa veya bir kısmın (section) başlık alanını belirtir. Sadece başlık yazılacaksa <h1> den <h6> ya kadar olan başlıklardan biri yeterlidir. Başlığı temsil eden başka öğelerde varsa <header> etiketi kullanılmalıdır. Bu etiket bir sayfada birden fazla kullanılabilir.

<header>
 <h1>Başlık Alanı</h1>
 <h2>Sitemizin Tanımı</h2>
</header>
 
<article>
  <header>
    <h1>Tarayıcılar</h1>
  </header>
  <p>Chrome, Internet Explorer, Firefox</p>
</article>

<nav> Elementi: Navigasyon bağlantıları olan sayfalar için kullanılır ama sayfadaki tüm linkler bu element içinde olmak zorunda değildir. Gezinti bağlantıları, menüler veya içerik listesi...

<nav>
<a href="/html/html5-giris.html/">HTML5 Giriş</a><br>
<a href="http://www.google.com/">GOOGLE</a><br>
</nav>

<section> Elementi: Genel bölümleme öğesidir. <section> elementi içinde içinde başlığı ve bir yazısı olan bir makale olabilir. Eğer section elementi bir başlık ile başlamamışsa yanlış kullanılmış demektir. İstisnası aside veya nav yerine kullanılan section lardır.

<section>
  <h1>Bölüm 1</h1>
  <p>Bu bölüm personel listesini içermektedir.</p>
</section>

<article> Elementi: Bir makale ya da yazı alanını temsil eder. Kullanılabileceği örnekler; Blog Sayfalarındaki yazılar, Haber'in özeti, yorumlar, makaleler vs. gibi.

<article>
  <header>
   <h2>Makale Başlık</h2>
   <p><time datetime="2015-07-24T22:29:26+00:00">24-07-2015</time></p>
  </header>
  <p>Makale yada özetin bulunduğu bölüm</p>
</article>

<aside> Elementi: <aside> elementi yan menü olarak kullanılır. <aside> onu kapsayan içerikle yüzeysel bir bağlantısı olan içeriğe denir.

<article>
  <h2>C Programlama Dersleri</h2>
  <p>C Programlama Dersleri Konunun Anlatımı</p>
    <aside>
      <!--Bu bölüm yazı ile doğrudan ilişkilidir ama yazının devamı değildir -->
      <h3>Benzer Dersler</h3>
      <ul>
        <li>C Programlama Değişkenler</li>
        <li>C Programlama Veri Tipleri</li>
      </ul>
    </aside>
</article>
<aside>
  <!--Bu bölüm yazı ile doğrudan ilişkili değildir. Sitenin kendisiyle ilişkisi vardır. -->
  <h2>Kategoriler</h2>
    <ul>
      <li><a href="/cprogramlama/">C Programlama</a></li>
      <li><a href="/sql/">SQL</a></li>
      <li><a href="/html/">HTML</a></li>
      <li><a href="/php/">PHP</a></li>
    </ul>
</aside>

<figure> Elementi:  Figure elementi kod tarayıcı tarafından yorumlandığında, ekranda görsel olarak bu koda ait herhangi bir nesne göremezsiniz yani bir UI'e (User Interface / Kullanıcı Arayüzü) sahip değildir. Figure resim (img), çizim (svg) gibi elemanları belirtmek için kullanılan etikettir. Arama Motoru Örümcekleri tarafından kaynak kodun okunmasını kolaylaştırır.

<figure>  
     <img src="resim1.jpg" alt="Resim Açıklaması"/>  
     <img src="resim2.jpg" alt="Resim Açıklaması"/>  
     <img src="resim3.jpg" alt="Resim Açıklaması"/>  
</figure>  

<figcaption> Elementi: <figure> etiketinin başlığını tanımlamamızı sağlar, figure kullanılan bir kodda figcaption kullanmak zorunda değilsiniz, w3c açısından böyle bir mecburiyet yok.

<figure>  
    <img src="resim1.jpg" alt="Resim Açıklaması"/>  
    <img src="resim2.jpg" alt="Resim Açıklaması"/>  
    <img src="resim3.jpg" alt="Resim Açıklaması"/>  
    <figcaption>Buraya resimlerle ilgili açıklama girilir.</figcaption>  
</figure>   

<footer> Elementi: Bir sayfa veya bir kısım için alt bilgi belirten bölümdür. <footer> elementi genelde sitenin / yazının yazarını, telif hakkını, iletişim bilgileri vb. içerir. Bir sayfada bir kezden fazla kullanılabilir.

<footer>
  <p>Yazan: İbrahim BAYRAKTAR</p>
  <p><time pubdate datetime="24-07-2015"></time></p>
</footer>

<details> Elementi: Sayfa içindeki uzun yazılarımızı kategorize etmek için kullanırız. <summary> elementi ile başlık bilgisi girilir ve details ile içerik belirlenir.

<details>
  <summary>Copyright 2013-2015.</summary>
  <p> - by İbrahim BAYRAKTAR. Tüm Hakları Saklıdır.</p>
  <p>Bu web sitesindeki tüm içerik ve grafikler .....lisansı ile korunmaktadır.</p>
</details> 

<mark> Elementi: Bazen cümle içindeki bir kelimeyi ya da sözcük öbeğini fosforlu kalemle çizilmiş gibi önplana çıkartmak isteyebiliriz. Bunun için <mark> etiketini kullanabiliriz.

<p>Bu cümledeki vurgulanmış kelime <mark>cümle</mark>dir.</p>

<time> Elementi: Gregoryan takvimine göre saat veya tarih tanımlar. <time> etiketinin tarayıcılar üzerinde görsel olarak bir etkisi yoktur.

<p>Her sabah <time>07:00</time> gibi kalkarım.
<p>Özel bir gün <time datetime="2016-06-21">Babalar Günü</time>'ne az bir zaman kaldı.</p>

HTML5 Elementler ile ilgili Faydalı Linkler

HTML  Elements and Attributes 

diveintohtml5.info/semantics.html

HTML5 - New Tags (Elements)

HTML5 Element Index