HTML5 Tanıtımı
HTML5 'le bazı yeni etiketler hayata girdi bazı etiketler ise kısaltılıp daha anlaşılır ve kolaylaştırıldı evet ama dikkat etmemiz gerek bazıları da geçersiz oldu eski bildiğimiz bazı etiketler bu sürümde artık kullanılmayacak bu yüzden eğer HTML5 ile uyumlu sayfalar tasarlıyorsak bunlardan kaçınmamız gerekli.
HTML5 için DOCTYPE bildirimi çok basitleştirildi.
<!DOCTYPE html>
Karakter kodlaması (charset) bildirimi de çok basit oldu.
<meta charset="UTF-8">
Basit bir HTML5 örneği
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sayfa başlığı</title>
</head>
<body>
diğer kodlarımız
</body>
</html>KopyalaYeni HTML5 etiketleri arasında en ilgi çeken yeni HTML5 etiketleri şunlardır.
Body içerisinde kullanacağımız en faydalı olanları <header>, <footer>, <article>, ve <section>.
Form tagına eklenen en faydalı olanları number, date, time, calendar, ve range
Grafik işlelerinde hatta grafikler çizebileceğimiz <svg> ve <canvas>
Multimedya işlelerinde çok faydasını göreceğimiz <audio> ve <video>
HTML4'te kullandığımız ancak HTML5'te desteklenmeyen Etiketler var bazılarına CSS veya başka yöntemlerle eskiden yaptığımız işlemi yinede yaptırabiliyoruz bunlar aşağıdaki tabloda belirtilmiştir.
| Kaldırılan Etiket | Alternatif kullanım |
|---|---|
| <acronym> | <abbr> |
| <applet> | <object> |
| <basefont> | CSS kullanın |
| <big> | CSS kullanın |
| <center> | CSS kullanın |
| <dir> | <ul> |
| <font> | CSS kullanın |
| <strike> | CSS, <s>, veya <del> |
| <tt> | CSS kullanın |
| <frame> | Kaldırıldı |
| <frameset> | Kaldırıldı |
| <noframes> | Kaldırıldı |
Tablodaki bu etiketler IE 9 öncesi sürümlerde desteklenmez eğer sitenizi kullanan ziyaretçiler arasında eski tarayıcı kullananlar varsa bir alternatif olması için HTML5Shiv adında script geliştirilmiş IE9'dan önceki Internet Explorer sürümlerinde HTML5 öğelerinin stilini etkinleştirmek için bir JavaScript çözümü olan bu dosyayı <head> etiketi içine dahil etmeniz yeterli https://github.com/aFarkas/html5shiv adresinden son sürümü indirebilirsiniz veya dosyayı kendi sitenizde depolamak istemiyorsanız bir CDN (içerik dağıtım ağı) sitesinde bulunan sürüme başvurabilirsiniz adresi
http://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.jsKopyalaHead etiketinde şu şekilde kullanılır ve sadece IE9 öncesi tarayıcılar tarafından okunur.
<head>
<!--[if lt IE 9]>
<script src="/js/html5shiv.js"></script>
<![endif]-->
</head>Kopyaladikkat ettiyseniz burda <!--[if lt IE 9]> ile if else gibi işlemleri html içinde yapmış oluyoruz ve tarayıcı sürümüne göre dosyayı dahil ediyoruz veya etmiyoruz
HTML5 ile gelen tüm yeni etiketler
Aşağıdaki tabloda yeni HTML5 etiketlerin listesini ve bunların kullanım açıklamaları yer almaktadır.
| Etiketler | Açıklama |
|---|---|
| <article> | Belgede bir makaleyi tanımlar |
| <aside> | İçeriği sayfa içeriğinden ayırır |
| <bdi> | Başka bir metinden farklı bir yönde biçimlendirilebilen bir metin parçasını tanımlar |
| <details> | Kullanıcının görüntüleyebileceği veya gizleyebileceği ek ayrıntıları tanımlar |
| <dialog> | Bir iletişim kutusu veya pencere tanımlar |
| <figcaption> | <figure> öğesinin başlığını tanımlar |
| <figure> | Resim, diyagram, fotoğraf, kod listeleri vb. Gibi kendine yeten içeriği tanımlar. |
| <footer> | Belge veya bölüm için altbilgi tanımlar |
| <header> | Belgenin veya bölümün üstbilgisini tanımlar |
| <main> | Belgenin ana içeriğini tanımlar |
| <mark> | İşaretli veya vurgulanmış metni tanımlar |
| <menuitem> | Kullanıcının bir açılır menüden başlatabileceği bir komut / menü öğesi tanımlar |
| <meter> | Bilinen bir aralıkta bir ölçümü tanımlar (bir gösterge) |
| <nav> | Belgedeki gezinme bağlantılarını tanımlar |
| <progress> | Görevin ilerleme durumunu tanımlar |
| <rp> | Ruby ek açıklamalarını desteklemeyen tarayıcılarda neyin gösterileceğini tanımlar |
| <rt> | Karakterlerin açıklaması / telaffuzunu tanımlar (Doğu Asya tipografisi için) |
| <ruby> | Yakut açıklaması tanımlar (Doğu Asya tipografisi için) |
| <section> | Belgede bir bölüm tanımlar |
| <summary> | <details> öğesi için görünür bir başlığı tanımlar |
| <time> | Bir tarih / saat tanımlar |
| <wbr> | Olası bir satır sonunu tanımlar |
| Form Etiketleri | Açıklama |
| <datalist> | Giriş kontrolleri için önceden tanımlanmış seçenekleri tanımlar |
| <keygen> | Bir anahtar / çift jeneratör alanı tanımlar (formlar için) |
| <output> | Bir hesaplamanın sonucunu tanımlar |
| Yeni Form inputları | Yeni input Öznitelikleri |
| color | autocomplete |
| date | autofocus |
| datetime | form |
| datetime-local | formaction |
| formenctype | |
| month | formmethod |
| number | formnovalidate |
| range | formtarget |
| search | height ve width |
| tel | list |
| time | min ve max |
| url | multiple |
| week | pattern (regexp) |
| placeholder | |
| required | |
| step | |
| Grafik Etiketleri | Açıklama |
| <canvas> | Komut dosyası (genellikle JavaScript) vasıtasıyla grafik çizme |
| <svg> | Ölçeklenebilir vektör grafikleri çizme |
| Medya Etiketleri | Açıklama |
| <audio> | Ses içeriğini tanımlar |
| <embed> | Harici uygulamalar için kontörleri (eklentiler gibi) tanımlar |
| <source> | <audio> ve <video> için kaynakları tanımlar |
| <track> | <audio> ve <video> için parçaları tanımlar |
| <video> | Video veya film içeriğini tanımlar |
Üstteki tabloda Yeni Form inputları ve Yeni input Öznitelikleri olan yerdeki açıklamalar biraz karmaşık gelebilir diye bu konuda kısacık bir açıklama yapayım.
Yeni Form inputları icinden number kullanım şu şekildedir <input type="number"> bu sayede input elemanımız sadece sayılar girilebilir olur ve yukarı aşağı ok işaretleri belirerek arttırılabilir veya azaltılabilir bir hale dönüşecektir.
Yeni input Özniteliklerinden autocomplete şu şekilde kullanırız <input type="email" name="email" autocomplete="off"> böylelikle bu inputa asla tarayıcı tarafından daha önce kaydedilmiş bir veri otomatik tamamlanmaz.
Diğer yazılarımda bu etiketlerin teker teker detaylı açıklamalarına yer vereceğim şimdilik yeniliklerin neler olduğunu anlamak adına bu makale yeterlidir diye düşünüyorum etiketlerin daha detaylı anlatımları tabi ki yeni makaleler gerektiren bir durum yoksa bu sayfanın sonu gelmeyeceğini siz de anladınız sanıyorum.
Başka bir yazıda görüşmek dileği ile kalın sağlıcakla...
