İçinde bu serinin ilk kısmı HTML5'teki yeni yapısal elemanlara yol açan arızalara baktık; içinde serinin ikinci kısmı Bu başarısızlıkların sonuçlarına ayrıntılı olarak baktık; bu son bölümde ileriye doğru bir yol bulacağız ve mevcut oyun durumu hakkında bazı sonuçlar çıkartacağız.

Bu soyut bir problem değildir: insanlar aslında bu şeyleri öğretmek zorundadır. Yeni nesil web tasarımcıları ve geliştiricileri bir başlangıç ​​noktası olarak HTML5 ile öğretilecek. Öğrencilerin şimdiki ve gelecekteki mahsullerini özetlemek ve kesitlerini açıklamak için kim denemek istediği için üzülüyorum. Belki de, iyi çalıştığımız basit formatta akıllıca davranırlar: bir ID veya sınıf / es ile div'ları kullanın.

Gelecekte, tarayıcılar ve ekran okuyucular gibi kullanıcı aracılarının HTML5'in yapısal öğeleriyle daha fazlasını yapabileceklerini ve bunları yazarlar olarak bize daha uygun hale getireceklerini akılda tutmak mantıklıdır.

Opera'nın Bruce Lawson'u sadece 2009 yılında WHATWG posta listesi :

Sonuçta, zaman, bölüm, altbilgi, datagrid vb. Kullanabilen kullanıcı aracıları bilmiyorum ama daha çok yakında olacağını umuyoruz.

Ve işte HTML5 editörü Hickson, yanıt olarak şunları söyledi:

Yapmıyorum. Yeni elemanların çoğu sadece şekillendirmeyi kolaylaştırıyor, böylece sınıfları kullanmak zorunda kalmıyoruz.

Tüm bunlar ve editör, bu öğeleri kullanan kullanıcı ajanlarını hiç görmüyor. Diyorlar ki, bizi sınıfları kullanmaktan kurtarmak için. Başka bir deyişle, bu unsurların yaratıcısı, neden spesifikasyonda olduklarından emin değiller ve 'şekillendirmeyi kolaylaştırıyor'.

HTML'de daha fazla semantiğe mi ihtiyacımız var?

Zaten yeni bir semantiğe ihtiyacımız olduğunu söyleyen bir düşünce okulu var. Sonuçta, onlarca veya yüzlerce yeni terim eklendiyse, spekülasyon şişirilirdi.

Bir yandan, aynı fikirdeyim. Temel bir web sayfasını yapılandırma açısından, HTML'nin bölümleme öğeleri olmadan tamamen daha iyi olacağımızı söyleyebilirim. Bir zamanlar div kullanmanın basit bir alıştırması, net kazanç olmaksızın HTML5'te karmaşık bir karışıklık haline geldi.

Bununla birlikte, genel anlambilim açısından, mevcut unsurlarımız üzerinde ek özellikler kullanarak web sayfamızın yapısına (HTML4, 5 veya sonraki her ne olursa olsun) daha fazla anlam eklenebilecek durumlar vardır.

Erişilebilirlik için ARIA

Mevcut veya yeni bir sitede uygulanacak en kolay şeylerden biri ARIA yer işaretleridir. (ARIA, Erişilebilir Zengin İnternet Uygulamaları anlamına gelir ve web uygulamaları ve web sayfalarını daha erişilebilir hale getirmenin bir yolunu tanımlayan bir özelliktir.)

ARIA yer işaretleri, genel ARIA spesifikasyonunun bir alt kümesidir ve ekran okuyucularla görme engelli ve görme engelli kullanıcıların bir sayfanın önemli kısımlarına, yani 'yer işaretlerine' geçmesine izin veren basit bir meta veri türüdür. Var olan bir öğeye rol = ”yer işareti-adı” ekledik, aynı şekilde bir öğeye class = ”sınıf-adı” ekleyeceğiz. AIRA yer işaretleri Burada HTML5 ile karşılaştırıldığında tartışıldı .

ARIA yer işaretleri şu anda yaptığımız şey için çok daha iyi bir eşleme. Adlandırma biraz kaba, ama en azından gerçek web yazma uygulamasını yansıtıyor. Örneğin, şunları kullanabiliriz:

  • genel sayfa başlığı için banner.
  • navigasyon için navigasyon.
  • yan çubuklar için tamamlayıcı.
  • altbilgi için contentinfo.
  • ana içerik alanı için ana.

(Afiş, ana ve içerik bilgilerinin yalnızca belge başına bir kez kullanılması gerektiğini unutmayın.)

ARIA yer işaretleri, HTML'nin dökümanının ana hatlarını çizmeden, ekran okuyucu kullanıcıları için gezinme seçeneklerini geliştiren basit bir çözümdür. Uygulaması hızlı ve kolaydır ve gerçekten temel HTML proje şablonunuzun bir parçası olmalıdır.

Arama motorları

Bu yüzden erişilebilirlik için daha fazla anlambilimimiz var, ancak arama motorları için de daha fazla semantik var.

Öncelikle, HTML5 öğelerinin SEO için hiçbir faydası olmadığından kesinlikle emin olalım. Bu bir efsane ve onu yatağa koymamız gerek. Bir makale etiketi kullanmak, siz veya müşteriniz sıradaki adamdan daha yüksek bir sıralamada size yardımcı olmayacaktır. Google'ın, içeriğinizi şimdi nasıl bulacağınızı ve sıralayacağınızı anlamasına güvenebilirsiniz.

Ancak, arama motorları web içeriğinin daha iyi bir şekilde nasıl görüntüleneceğini (not: not not) daha iyi anlamaya isteklidir.

Bu nedenle, büyük arama motorları, yıllar içinde, bir web sayfasında yapılandırılmış verileri biçimlendirmek için mevcut standart yolları ortaya koymuş veya benimsemişlerdir, böylece uygun bilgileri elde edebilirler. Örneğin, incelemeleri ararken yıldız puanlarının en üstteki Google sonuçlarında göründüğünü fark etmiş olabilirsiniz. Bu, arama motorlarının inceleme puanını standart bir şekilde çıkartabilmeleri ve sonuçlarının görüntülenmesini iyileştirebilmeleridir. Tarifler, her sonuç için pişirme süresinin listelendiği başka bir örnektir. Bu veriler bir sitenin sıralamasını iyileştirmese de, daha ayrıntılı sonuç daha fazla kullanıcıyı tıklamaya teşvik edebilir. Bu nedenle, bir site için potansiyel bir fayda vardır ve genellikle tüm rakiplerin bunu yaptığı bir silahlanma yarışında gereklidir. neyse.

Her ne kadar bu yıl zengin veriler bir süredir çeşitli klavyelerde olsa da, geçen yıl büyük arama motorları başlattı Bu tür yapısal veriler için çok geniş bir standart dizisi. Onlara 'şema' diyorlar ve Schema.org . HTML'nin mikro veri standardını kullanırlar ve zaten eBay, IMDB, Rotten Domates ve daha fazlası tarafından uygulanmıştır.

Bu, yıllar içinde daha çok semantik bir ağa doğru en büyük sıçradı ve yine de, az sayıda fanfare ve hiçbir standart prosesi olmayan kapalı kapılar ardında gerçekleştirildi. Uyarı vermeden üzerimize düştü ve daha çok web tasarım topluluğunun radarı altında uçtu. HTML5 semantikleriyle de bir çok çakışma var, örneğin şemalar var haberler , ağ sayfalar ve web sayfa öğeleri , her şey dahil olmak üzere çok daha fazla şema arasında TV bölümleri için tıbbi durumlar . Ayrıca önerilen yol Web'de videoların açıklanması.

HTML'nin semantiği hakkındaki tüm tartışmalardan (ve bunların eksikliğinden) sonra, arama motorları işaretlememizde çok daha fazla semantik veriyi istediklerini açıkça belirttiler, ancak yeni yapılarla değil, mevcut yapıların üstünde gerçekleşecek.

Ama bizim için semantik ve web standartlarına ilgi duyan bir topluluk olarak, ne HTML'nin semantiklere yönelik sınırlı, kusurlu yaklaşımı, ne de büyük arama motorlarının kapalı-bırakılmış bir yaklaşımı, ilerideki en iyi yoldur.

Bazı duyularda, HTML5 semantiği atı cıvatalı; Bu sadece hasarı içermemize bağlı. Schema.org'a gelince, yepyeni bir dünya, ve biz çok yakından incelemek gerekir, ya da başka bir küçük grup bizim ve bizim için - bizim için en iyi çıkarları - belirleyecektir. Aslında, zaten olmuş olabilir.

Sonuçlar

Bazı sonuçlarla tamamlayalım.

  • Başlıklar önemli: Öncelikle, kör ve görme engelli kullanıcıların ekran okuyucularla dolaşmaya çalışmasına yardımcı olmak için sayfalarımızın başlık yapısını gerçekten önemsemeliyiz. Saygı duyulan h1-h6 öğeleri sınırlı olabilir, ancak ekran okuyucu kullanıcıları tarafından yoğun olarak kullanılıyorlar.
  • HTML5 yapısı karmaşadır: HTML yapısal elemanlarını tamamen göz ardı etmemeliyiz. Biraz felaket olmuşlardı - esasen spekülasyonları unutmuştuk, bol miktarda kırık ana hatlar oluşturduk ve başlarımızı temelde kırılmış bir sisteme sokmaya çalışırken çok fazla zaman harcadık. Çok yaşa div.
  • ARIA yer işaretlerini göz önünde bulundurun: Sitenize ARIA yer işaretleri eklemek, ekran okuyucu kullanıcılarına yardım etmenin başka bir basit ve etkili yoludur.
  • Schema.org'u ve semantiğin geleceğini düşünün: schema.org, büyük arama motorlarının desteğine sahiptir ve şu anda karışık bir çanta olmasına rağmen, web üzerinde yapılandırılmış veriler için bir gelecek gibi görünmektedir.

HTML5 spesifikasyonunda, yeni form özelliklerinden Geçmiş API'sine ve Canvas uygulamasına kadar pek çok iyi parça var. Aslında, HTML5'in arkasındaki itici güç olan WHATWG olmadan, W3C'nin birlikte hareket etmesini beklerken, HTML4 / XHTML 1.0 ile hala sıkışıp kaldık. Yine de, HTML5 ve etrafındaki tüm ilgili teknoloji yeni ve heyecan verici olduğu için, verdiğimiz her şeyi kabul etmek zorunda olduğumuz anlamına gelmez.

Bazen, HTML sosisinin nasıl yapıldığını görmeye değer, bu yüzden ne yediğimizi biliyoruz. Ve HTML'nin yapısal semantiği durumunda, geçmeyi tercih ederim.

Daha fazlası için aç? Luke'un “HTML5 Hakkında Gerçekler” adlı kitabı, kardeş sitemiz aracılığıyla sınırlı bir süre için kullanılabilir MightyDeals.com inanılmaz bir% 50 indirim.

ARIA yer işaretlerini veya Schema.org'u kullandınız mı? HTML5'in yapısal öğeleri için bir gelecek görüyor musunuz? Yorumlarda bize bildirin.

Öne çıkan görsel / küçük resim, kullanımlar yapı görüntüsü Shutterstock üzerinden.