HTML5 İle Gelen Yeni Etiketler
HTML5 ile birlikte gelen semantik-anlamsal etiketler, form etiketleri, grafik etiketleri, çoklu ortam etiketleri ve açıklamaları yer alıyor.
Yeni semantik-anlamsal etiketler
Daha anlamlı HTML yapısı için HTML5 ile birlikte yeni anlamsal etiketler gelmiştir.
| Etiket | Açıklama |
|---|---|
| <article> | İçeriğin makale, deneme olduğunu belirtir. |
| <aside> | İçeriğin ana içerik haricinde yan menü, yan içerik olduğunu belirtir. |
| <bdi> | İçeriğin sayfadaki yazılardan farklı bir yönde olduğunu belirtir. |
| <details> | Özet için detay bilgisi tanımlar. |
| <dialog> | İçeriğin iletişim kutusu veya pencere olduğunu belirtir. |
| <figcaption> | <figure> etiketi için başlık belirtir. |
| <figure> | İçeriğin şekil, fotoğraf, şema olduğunu belirtir. |
| <footer> | İçeriğin sayfa veya bölüm alt bilgisi olduğunu belirtir. |
| <header> | İçeriğin sayfa veya bölüm başlığı olduğunu belirtir. |
| <main> | Sayfa içeriğinin ana kökünü belirtir. |
| <mark> | İçeriğin vurgulanmış, işaretlenmiş olduğunu belirtir. |
| <menuitem> | Açılır menü öğesi belirtir. |
| <meter> | İçeriğin ölçüm değeri olduğunu belirtir. |
| <nav> | İçeriğin menü olduğunu belirtir. |
| <progress> | Görev ilerleme çubuğu tanımlar. |
| <rp> | Tarayıcı tarafından desteklenmeyen yazıyı açıklamak için kullanılır. |
| <rt> | Tarayıcı tarafından desteklenmeyen yazıyı açıklamak için kullanılır. (Doğu asya dilleri) |
| <ruby> | İçeriğin tarayıcı tarafından desteklenmeyen yazı olduğunu belirtir. (Doğu asya dilleri) |
| <section> | İçeriğin sayfanın bir bölümü olduğunu belirtir. |
| <summary> | <details> etiketi için özet/başlık tanımlar. |
| <time> | İçeriğin tarih/saat olduğunu belirtir. |
| <wbr> | İçeriğin yeni satıra tamamen geçeceğini belirtir. |
Yeni form etiketleri
| Etiket | Açıklama |
|---|---|
| <datalist> | Veri girişi için önceden tanımlanmış seçenek tanımlar. |
| <keygen> | Kullanıcı doğrulaması için iki adet anahtar-değer tanımlar. |
| <output> | Hesaplama veya komut sonucu tanımlar. |
Eski ve yeni HTML form elemanları hakkında daha fazla bilgi için HTML5 form elemanları yazıma bakabilirsin.
Yeni veri giriş tipleri
| Yeni veri giriş tipleri | Yeni veri giriş özellikleri |
|---|---|
|
|
Veri giriş tipleri hakkında daha fazla bilgi için HTML5 input tipleri yazıma bakabilirsin.
Veri giriş özellikleri hakkında daha fazla bilgi için HTML5 input özellikleri yazıma bakabilirsin.
HTML5 ile özellik değer girişi
HTML etiket özelliğine bağlı olarak dört farklı özellik bildirim kullanabiliriz.
| Kullanım | Example |
|---|---|
| Boş | <input type=”text” value=”Yusuf” disabled> |
| Tırnaksız | <input type=”text” value=Yusuf> |
| Çift tırnaklı | <input type=”text” value=”Yusuf SEZER”> |
| Tek tırnaklı | <input type=”text” value=’Yusuf SEZER’> |
HTML5 grafik
| Etiket | Açıklama |
|---|---|
| <canvas> | Çizim alanı tanımlar, çizim JavaScript ile yapılır. |
| <svg> | Vektörel çizim için kullanılır. |
HTML5 çoklu ortam etiketleri
| Etiket | Açıklama |
|---|---|
| <audio> | Ses dosyası çalmak için kullanılır. |
| <embed> | HTML harici eklentiler için kullanılır. |
| <source> | <video> ve <audio> etiketi için dosya kaynağı tanımlar. |
| <track> | <video> ve <audio> etiketi için parça tanımlar. |
| <video> | Video oynatmak için kullanılır. |
HTML <video> etiketi hakkında daha fazla bilgi için HTML video ekleme yazıma bakabilirsin.
HTML <audio> etiketi hakkında daha fazla bilgi için HTML ses ekleme yazıma bakabilirsin.
HTML5 Derslerine buradan ulaşabilirsiniz…
Hayırlı günler dilerim.