HTML5 ile gelen yeni elementler nelerdir?

HTML5' in yeni elementleri inceleyecek olursak;

Yapısal Elementler

Web sitelerini kodlarken belli yapısal bölümlere ayırırız. Örneğin, üst kısım, içerik kısmı, sol-sağ kolonlar, menü alanı, alt kısım ve içerik alanı gibi. HTML5 ile bu alanların her biri için bir element tanımlanmıştır. Bu etiketlere bakıcak olursak;

header: Web sayfamızın üst kısım olarak belirlediğimiz kısımı tanımlanır logo ve menüyü içerebilir.
section: Web sayfamızın ana içerik kısmını içine alır.
footer: Web sitemizde alt kısım olarak belirlediğimiz kısımı tanımlamak için kullanabiliriz.
nav: Diğer sayfalara link verilen kısımlar, menü oluşturduğumuz kısımları tanımlamak için kullanabiliriz.
article: Günlüğümüzdeki(blog) bir konu, ansiklopedideki bir bölümü tanımlamak için kullanabiliriz.

Anlamlı Blok Elementler

Yapısal elementlerden daha çok ayrıntıya girdiğimiz bölümler kullanılmaktadır.

aside: İçerik ile ilişkili ayrıntılar, notlar vb alanlar için içeriğin yanına iliştirilmiş alanları tanımlamak için kullanılmaktadır.
figure: Genelde kullandığımız şekil ve açıklaması için eklenmiş güzel element. Hem şekil hemde açıklamasını içeren bir elementtir.
figcaption : "figure" elementinin başlığını belirler.
dialog: Bu element ismindende anlaşıldığı gibi diyalog, karşıklık sohbet içeren sayfaları daha kolay kodlamamız için eklenmiştir. Bu element <dd> ve <dt> elementlerini alt element olarak kullanır.

Anlamlı Satırlar için  Elementler

m(marked): m elementi işaretlenmiş metin olarak tanımlanabilir. Anahtar kelime tabanlı çalışan arama motorları için harika bir elementtir.
time: Metin içindeki zaman bilgilerini normal içerikten ayırmamıza yarayan bir elementtir. Bilgiye kolay erişimimizi sağlar.
meter: Meter elementi özel oranları tanımlayan sayısal değerleri için kullanılır. Altı adet özniteliği vardır: value, min, low, high, max, optimum.
progress: İlerleyen prosesin durmunu göstermek için tanımlanır. Yüklenen resimler için kullanılablir %55 yüklendi yazısını göstermek için mesela. İki adet özniteliği vardır: value ve max. Javascript yardımı ile kolaylıkla yükleme işlemlerimizi yapabilmemizi sağlayacak güzel bir elementtir.

Medya Elementeri

Gelişen web teknolojilerinde artık görsel ve işitsel öğelerin daha çok önem kazandığını görülmektedir. HTML'in bu yönü biraz zayıf kalıyordu bunun için HTML5 ile iki adet element bulunmaktadır.

video: Bir çok medya türünü destekleyen video elementi, görsel  medya dosyalarını sitemize  eklememizi kolaylaştıracaktır.
audio: İşitsel medya elementlerini sayfalarımıza eklemek için kullanabilceğimiz bu elementin autoplay ve loop öznitelikleri vardır.

İnteraktif Elementler

HTML5 dinamik içeriğe yardımcı olacak elementlere de yer verilmiştir. Yeni eklenen bu elementler kullanıcı tercihlerine ve sayfanın sunucudan yeni sayfa açılmasını beklemeden yapacamız işlemler için kullanılacaktır.

details: Detay elementi başlangıçta gösterilmeyen içerikleri tanımlamak için kullanılır.  legend özniteliği  detayın özetini tanımlamak için kullanılır. Altbilgi veya dipnot olarak kullanılabileceği gibi araç ipucu olarakta kullanılabilir. Eğer open özniteliği kullanılırsa sayfada görüntülenir. Ayrıca kullanıcının tetiklemesi ile gösterip gizleyebiliriz.
datagrid: Datagrid elementi etkileşimli listeler, veri tabloları ve ilişkili listeler için tanımlanır. Bu element javascript yardımı ile çok güzel çalışmlar yapmamıza yardımcı olacaktır. Bir çok veri ile ilişkili işlerimizi çözmemize yardımcı olacak bir element, ajax ile kullanılan veri tabloları, listeleri, vb için hazırlanmış bir elementtir.
menu ve command : menu elementi her biri kendi işlevini yapabilecek command elementlerini içerir. Bir çok amaç için kullanılabilir. type özniteliğinin iki özelliği mevcut toolbar ve popup. İçiçe menu elementi kullanılabilir.

Diğer Elementler

canvas : Javascript ile kontrol edilen bir 2 boyutlu bir çizim alanı için kullanılır.

embed : Site dışından eklenen öğeler için kullanılır. (mesela .swf uzantılı dosyalar)

hgroup : Başlık grubunu belirler.  h1, h2 vs içine alabilir.

mark : Yazı içerisinde özellikle üstünde durulan kelimeleri belirler.

summary : İçerik yazısının başlığını belirler.