HTML5 yeni semantik yapı elemanları

                   HTML5 ile alakalı açıklamaları derleyip, hem kendim için hem de Türkçe kaynak oluşması için siteme son günlerde sıkça konu giriyorum. Yabancı makaleler araştırıp çevirilerini gerçekleştiriyorum. 

Bu konuda ise bu gerçekten işin birebir kaynağı olan siteleri yazımın sonunda detaylı olarak paylaşıyorum, yabancı dil sıkıntısı çekmekte olan arkadaşlar için, kendi yorum ve işlevlerinin kullanım alanlarıyla alakalı açıklamalarımı sizlere aktarmaya çalışıyorum. 

Bu yazımda ise sizlere daha önceki sürümlerde bulunmayan veyahut dışarıya bağımlı olarak (kütüphane destekli) çalışan bazı elemanların kullanım alanlarından ve açıklamalarından bahsedeceğim. 

Tek bir makaleye olan tüm elementleri yazmak ve göz yormak yerine, adım adım ve kategorileri ayrıştırarak gitmeyi tercih ediyorum. Bu bölümde ise daha çok Seo ile alakalı etiketlerin kullanımlarıyla alakalı şeyler paylaşmayı tercih ettim.

<article>	Makale tanımlayacağınız alanlarda Seo ve kolay kod yazımı için tasarlanmış olan semantik ve akılda kalıcı bir etiket. .
<aside>	İçerik bölümünde bulunmayan kısımlara özel bir stil sınıfı oluşturmadan rahatlıkla düzenleyebileceğiniz bir dış alan sağlar. .
<bdi>	Metnin veyahut içeriğin belirli bölümlerini semantik olarak tanımlamanızı sağlar. Bu etiketle birlikte video ve ses etiketlerini kullanarak hiyerarşik bir sanal div yapısı oluşturabilirsiniz. .
<command>	Form elemanı tanımlarken kullanılan uzun argümentler yerine, belirli alan için hızlı bir şekilde tıklanabilir buton oluşturmaya yarar. .
<details>	Arama motoru botları için hazırlayabileceğiniz alanlarda kullanabilirsiniz, belirli ziyaretçilere göstereceğiniz alanları rahatlıkla düzenleyebileceğiniz bir etiket. Altı çizilmesi gereken nokta, Seo için farklı içerikten çok Flash gibi direkt olarak erişilemeyen içeriklerin detaylarını paylaşabileceğiniz metin kısımları.   (Flash içeriklerin içerisindeki yazılara arama motoru botları direkt olarak erişemeyebilir, çoğunlukla ek olarak kullanıcıya görünmeyen divler oluşturup, botlara sunarız. Ama bu etiket bunu kolaylaştırmakta.) .
<summary>	Bir önceki etiketin özetini veya başlığını belirtebileceğiniz yardımcı etiket, seni sistem stabil hale geldikten sonra <h1> etiketleri kadar önemi olacaktır diye düşünülmekte. .
<figure>	Resimlerin dışarıdan çağırıldığı veya HTML5 teknolojisi ile sunucuda oluşturulduğu Canvas çalışmalarda; görselleri, videoları, diyagramları belirtebileceğiniz etiket. .
<figcaption>	Figür belirten etiketin başlık kısmını tanımlayabileceğiniz, açıklayabileceğiniz kısım etiketi. .
<footer>	Alt bilgi veya sitenin alt bölümü için ayrı sınıf oluşturmadan çalışma yapabileceğini etiket. .
<header>	Sitenize üst bilgi veyahut üst bölümlerin düzenlenmesi için ayrı sınıf açmadan çalışma alanı sağlayan destekleyici etiket. .
<hgroup>	<h-sayı-> etiketlerini gruplandıran ve semantik olarak anlamlaştıran bir grup, dizi etiketi. .
<mark>	Vurgulanmak istenen yerleri belirten ve tarayıcı tarafından anlamlaştıran etiket. Buna belirli stiller tanımlayarak altı çizili, kalın, italik gibi özellikler katabilirsiniz. Default halinde herhangi bir görsel özellik tanımlanmıyor. .
<meter>	Sayfanızın büyüklüğü veya sitenizin ölçüleri ile alakalı esnek olmayan çalışmalarınızda cetvel ölçüsü gören etiket. Canvas çalışmalarda koordinat belirtirken işe yaramakta. .
<nav>	Hiyerarşik link yapıları kullanırken, BreadCrumb özelliğinin vurgulanabileceği bir etiket. Arama motoru optimizasyonu standartlarında, anlaşılabilir stabil bir yapıdadır. .
<progress>	Çalışan bir sistem belirtiyorsanız, örneğin hareket eden bir cisim, yazı, video veya görsel ayrıntılar, bu etiket işinize yarayacaktır. Arama motoru botları bu alanlar için detay kısımlarını önemserler. .
<ruby>	Önemli parantez içi açıklamaları görünür olmayacak şekilde kısa olarak belirmenizi sağlar. .
<rt>	Telaffuz ile alakalı düzenlemeleri belirtebileceğiniz, dipnotlar geçebileceğiniz bir etiket. Bir önceki etiket ile farkı henüz olarak default olarak tanımlı değildir. .
<rp>	Tarayıcının desteklemediği alanlarda gösterilmesini istediğiniz şeyleri açıklar ve ekrana basar. Yani tarayıcıya özel tasarımlarda işimize yarayan bir etiket. Önemli bir detay, dış kütüphane olmadan (jQuery gibi) çalışması henüz stabil halde değildir. .
<section>	Ürettiğiniz veya oluşturduğunuz içerikte bir bölüm ayrıştırabilmenize olanak sağlar. .
<time>	Bir zaman veya tarih belirtebileceğiniz etiket. .
<wbr>	<hr> etiketinin kullanımına benzerdir, ama dış kütüphane veya stil tanımlaması olmadan çalışmamaktadır.

Yeni etiketler ile alakalı bir kısım açıklamaları dilim döndüğünce anlatmaya çalıştım, etiketlerin bir kısmı stabil oranda tarayıcılar arasında destek görememekte. HTML5 tamamen kabul gördüğünde ve standartlara arasına girdiğinde çoğu web tasarım işiyle uğraşan arkadaşımız rahatlayacaktır diye düşünüyorum. 

Bu makalede belirttiğim etiketler ve semantik yapı elemanları daha çok arama motoru optimizasyonunda işimize yaracak şeylerdi. Medya ve görsel projelerde kullanılabilecek elemanları ise ayrı bir makalede ele almaya çalışacağım. 

Bilgiler ve argümentlerin kullanılabilir açıklamalarını w3schools.com adresinden edindim, kendi yorumlarımla zenginleştirmeye ve daha da anlamlaştırmaya çalıştım. Yorumlarınıza açığım, herkese HTML5’li günler diliyorum