HTML 5.1 in Getirdiği 10 Yeni Özellik

HTML dünyası, birkaç hafta önce W3C’nin yeni HTML 5.1 önerisini Kasım 2016’da yayınladığında büyük çaplı bir revizyona girdi. W3C(WWW Birliği), son blog yazısında, HTML 5.1’in bize sunduğu yeni yöntemleri sağlamak için yeni büyük sürümünü altın standart olarak adlandırdı. Daha esnek web siteleri oluşturmak için HTML’yi de kullanabileceğiz gibi duruyor.

[mks_icon icon=”fa-thumbs-up” color=”#ec5743″ type=”fa”] Okuma Önerisi: Geliştiriciler İçin 8 En İyi HTML Editör

Bir şeye parmak basalım ki şu anda tüm tarayıcıların bu özelliklerin tümünü desteklemediğini unutmamak lazım; bu nedenle bunları  kullanmadan önce tarayıcı desteğini kontrol etmeyi unutmayın. HTML standardının daha da geliştirilmesi ile ilgileniyorsanız, HTML 5.2‘nin çalışma taslağına da göz atabilirsiniz.

1-) Responsive Tasarım İçin Birden Fazla Fotoğraf Atabilirsiniz.

HTML 5.1’de, yanıtlama imgesi seçimi mümkün kılmak için <picture> etiketini srcset olarak kullanabilirsiniz. <Picture> etiketi, geliştiricilerin UA’nın görüntüleme alanı boyutuna, ekran yoğunluğuna, ekran türüne ve responsive tasarımda kullanılan diğer parametrelere uyum sağlamak için geliştiricilerin farklı görüntü kaynakları bildirmesini sağlayan bir resim container’ini temsil ediyor.

<Picture> etiketinin kendisi hiçbir şey göstermez, yalnızca birden çok resim kaynağı için bağlam olarak işlev görür. Varsayılan görüntü kaynağını <img> etiketinin src attributelerinin değeri olarak bildirmeniz gerekir ve alternatif görüntü kaynakları <img> ve <source> öğelerinin srcset nitelikleri içine girer.

2-)Ekstra Bilgileri Gizle veya Göster

<Details> ve <summary> etiketleri ile bir içerik parçasına genişletilebilen bilgi ekleyebilirsiniz. Ek bilgi varsayılan olarak gösterilmez, ancak isterseniz, göz atma seçeneğiniz bulunuyor. Kodunuzda <summary> etiketini <details> içine yerleştirmeniz yeterli. <Summary> etiketinin ardından gizlemek istediğiniz ek bilgileri de ekleyebilirsiniz.

3-)Browser Menüsü Sağ Tıklamaya İşlev Ekleyebilirsiniz.

<Menuitem> öğesi ve type = “context” özelliği ile, tarayıcının  menüsüne checkbox altına özel işlevler ekleyebilirsiniz. <Menuitem> öğesini <menu> etiketinin alt öğesi olarak atamanız yeterlidir. <Menu> öğesinin kimliği, bağlam menüsünü eklemek istediğiniz öğenin contextmenu niteliğiyle aynı değeri taşımalıdır . Chrome’da site içine uygulamadan görünmeyebilir. Firefox ta denerseniz daha güzel bir sonuç alabilirsiniz.

4-)Header ve Footer’lerı İç İçe Geçirebilme

Bu özellik, <article> ve <section> gibi semantik bölümleme unsurlarına ayrıntılı başlık eklemek istiyorsanız gerçekten kullanışlı bir özelliktir.  Aşağıdaki kod örneği Header’in içinde bir kenar çubuğu oluşturur, <aside> etiketi de bir bölümleme öğesidir ve içindeki yazar hakkında ek bilgi ekler. Header’in içindeki kenar çubuğunun kendi başlığı da vardır, Footer ve yazarın iletişim bilgilerini bulundurur.

5-) Stil ve Scriptler için Kriptografi Parantezleri Kullanabilme

Javascript ile uğraşıyorsanız HTML içine gömmek için biraz daha güvenlik seçeneği oluşturabilirsiniz. Nonce yani parantez anlamına gelen bu sistemle script özelliğinin yanına nonce = “” olarak bir bölüm açılır. her scriptin kendi parmak izi gibi rakam ve harflerden oluşan kodlar oluşur. Böylece biraz daha güvenlikli bir kullanım sağlar.

6-)Ters Bağlantı İlişkilendirme

Devir attribute’sini bağlantılarınıza tekrar ekleyebilirsiniz. Daha önce HTML 4’te tanımlanmıştı, ancak HTML5 tarafından desteklenmiyordu. HTML 5.1, geliştiricilerin bu attribute’yi <link> ve <a> öğeleri için tekrar kullanmalarını sağlar. Rev attributesi rel’nin tersi olup, geçerli ve bağlantılı belgenin ters yöndeki ilişkisini belirtir.

7-) Sıfır Genişliğe Sahip Görüntüler Kullanın

HTML 5.1, geliştiricilerin sıfır değeriyle birlikte width özelliğini değer olarak kullanmasına izin vererek sıfır width görüntüler oluşturmayı mümkünleştirdi. Bu özellik, görüntü dosyalarını izleme gibi kullanıcılara göstermek istemediğiniz resimleri ekleme konusunda işinize yarayabilir.

😎 Kimlik Avı Saldırılarısı için Tarayıcı İçeriklerini Ayırabilirsiniz

Web sitenizde aynı kaynak bağlantıları kullanmak sonunda size bir sorun teşkil edebilir. Güvenlik açığı “target = “_ blank”” exploits olarak adlandırılıyor ve bu siyah şapkalı bir kimlik avı saldırısı. Bu saldırının Github demo sayfasında nasıl çalıştığını test edebilir ve  kodunu burada bulabilirsiniz.

HTML 5.1, tarayıcı bağlantılarını ayıran rel = “noopener” özelliğinin kullanımına izin vermiştir, bu nedenle bu sizin için bir sorun haline gelmeyebilir. Rel = “noopener” öğesini <a> ve <area> öğeleri içinde kullanarak daha güvenli hale getirebilirsiniz.

9-)Boş Seçenekler Oluşturun

HTML 5.1, geliştiricilerin boş bir <option> öğesi oluşturmasına olanak verir. <Option> etiketi <select>, <optgroup> veya <datalist> öğelerinin bir alt öğesi olabilir. Boş bir <option> seçeneği, kullanıcıların hangi seçeneği seçmeleri gerektiğini önermektense, kullanıcı dostu formlar tasarlamak istediğinizde yararlı olabilir.

10-) Figure Captions’u Daha Esnek Kullanın

<Figcaption> etiketi, illüstrasyonlar, fotoğraflar ve diyagramlar gibi görseller için bir container olan <figure> öğesine ait bir başlığı veya bir açıklamayı temsil eder.Daha öncelerde, <figcaption> etiketi yalnızca <figure> öğesinin ilk veya son child olarak hiyerarşide kullanılabilirdi. HTML 5.1 bu kuralı serbestleştirdi ve <figcaption> <figure> container’inin herhangi bir yerinde görünebilir.

Sormak istediğiniz bir şey olursa bize yorum yoluyla bildirebilirsiniz. En yeni yayınlarımızdan ilk olarak siz haberdar olmak isterseniz sağ üst tarafta yer alan mail aboneliğine 20 saniye kadar kısa bir sürede kaydolarak gerçekleştirebilirsiniz. Herkese İyi Çalışmalar 🙂