HTML5 Ders_3 HTML5'in Yeni Elemanları (Elements)

HTML5'in Yeni Elemanları (Elementleri)

Aşağıda, HTML5 elemanları, ve anlamları verilmiştir:

Yeni Anlamsal/Yapısal Elemanlar (Semantic/Structural Elements)

Daha iyi bir döküman yapısı için html5 şu elemanları önermektedir:

Tag	Anlamı
<article>	Bir makale tanımlar
<aside>	Sayfanın kenarında bir içerik tanımlar. (Sayfa kenarında gördüğümüz dikine reklamlar gibi)
<bdi>	Mesela latin alfabesiyle yazılan bir metne, arapça bir metin sığıştıracaksak, bu elemanı kullanarak olası tarayıcı karışıklıklarını önleriz.
<details>	Kullanıcının görebileceği ya da gizleyebileceği ek detaylar tanımlar.
<dialog>	Bir diyalog kutusu veya penceresi tanımlar.
<figcaption>	<figure> elemanı için bir başlık tanımlar.
<figure>	Fotoğraf, diyagram, kod listesi gibi içerikler için özel bir içerik alanı oluşturur.
<footer>	Bir sayfa veya bölüm için en alt kısmı tanımlar.
<header>	Bir sayfa veya bölüm için başlık kısmı tanımlar.
<main>	Sayfanın ana içeriğini tanımlar.
<mark>	İşaretli/belirgin bir text tanımlar.
<menuitem>	Farenin sağ tuş menüsüne yeni menüler ekler. (Sadece firefox'da çalışıyor)
<meter>	Belirtilen ölçüm oranını gösteren bir çubuk oluşturur.
<nav>	Sayfada, yönledirme linkleri (menu) oluşturur.
<progress>	Bir görevin (download işlemi gibi) ilerleme oranını gösterir.
<rp>	Tarayıcların desteklemediği yakut dipnotları tanımlar.
<rt>	Karakterlerin tanımını/teleffuzunu tanımlar. (Doğu Asya dilleri içindir.)
<ruby>	Bir yakut dipnot tanımlar. (Doğu Asya dilleri içindir.)
<section>	Sayfada bir bölüm tanımlar.
<summary>	<details> elemanı için görünür bir başlık oluşturur.
<time>	Bir tarih/zaman
<wbr>	Uzun bir kelime satıra sığmadığında, kelimenin bir parçasının alt satıra geçmesini sağlar.

Bir sonraki derste, yukarıdaki elemanları ele acalağız.

Yeni Form Elemanları

Tag	Anlamı
<datalist>	İnput elemanını doldururken, kullanıcının seçebileceği bir liste hazırlar.
<keygen>	Anahtar çifti üretim bölgesi tanımlar. (formlar için)
<output>	Bir hesaplamanın sonucunu veren bir eleman oluşturur.

Yeni form elemanları hakkında daha detaylı bilgi için tıklayınız.

Yeni Input Tipler ve Özellikleriii

Yeni Input Tipleri  (Input Types)	Yeni Input Özellikleri  (Input Attributes)
color date datetime datetime-local email month number range search tel time url week	autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height and width list min and max multiple pattern (regexp) placeholder required step

Yeni input tipleri ile ilgili daha detaylı bilgi için tıklayınız.

Yeni input özellikleri ile ilgili daha detaylı bilgi için tıklayınız.

HTML5'de Tagların Özelliklerini Nasıl Kodlarız?

HTML5'de, tagların içine özellik eklemenin 4 farklı yolu vardır.

Aşağıda, bir <input> tagına 4 farklı şekilde özellik eklenmiştir:

Tip	Örnek
Pasif	<input type="text" value="Barış" disabled>
Tırnaksız	<input type="text" value=Barış>
Çift Tırnaklı	<input type="text" value="Barış">
Tek Tırnaklı	<input type="text" value='Barış'>

İhtiyaca göre, bu dört yöntemden birini kullanmak kullanıcının kendi tercihidir.

HTML5 Grafikleri (Graphics)

Tag	Anlamı
<canvas>	JavaScript kullanarak, grafik/şekil çizmeyi sağlar.
<svg>	SVG kullanarak, grafik/şekil çizmeyi sağlar.

HTML5 grafikleri için ayrı bir dersimiz olacak.

Yeni Medya Elemanları (Media Elements)

Tag	Anlamı
<audio>	Ses veya müzik içeriği tanımlar.
<embed>	Sayfamıza, flash animasyonları gibi harici dosyalar eklememizi sağlar.
<source>	<video> ve <audio> elemanlarının kaynaklarını tanımlar.
<track>	<video> ve <audio> elemanları için tracklar tanımlar.
<video>	Video veya film içeriği tanımlar

HTML5 medya elemanları için ayrı bir dersimiz olacak.

sonraki ders için tıklayınız