HTML'nin yapısal öğeleri - makale, bölüm, nav ve bir kenara - ilk bakışta, HTML5 spesifikasyonunun anlaşılması ve uygulanması için en kolay kısımlarından bazılarıdır. Bununla birlikte, aslında, HTML5'in en zayıf belirtilmiş, kötü anlaşılmış ve kötü uygulanmış kısımlarından bazılarıdır.
Keyfi olarak düzenlendi; Web sayfalarını yapılandırmanın yepyeni bir yolunu tanıtmaya çalışırlar; HTML'nin kendi tasarım ilkelerini ihlal ediyorlar; Bazı kullanıcılar için erişilebilirliğe zarar verirler; ve onları kullanmamalısın.
Evet, HTML5'in bu özel kısmına karşı tetikleyen silahlar çıkıyor ancak lütfen 'anti-HTML5' olduğumu varsaymayın. HTML5 hakkında bir kitap yazdım Açık web'i seviyorum, iyi web standartlarını çok seviyorum ve on yıl boyunca devam eden bir durgunluktan sonra, web teknolojilerindeki inovasyonun tamamen kabarıcı bir hızda gerçekleştiğini çok seviyorum. Ancak bu, verdiğimiz her şeyi kabul etmek zorunda olduğumuz anlamına gelmez. Yemeğin parçalarını gerçekten lezzetli bulsak bile, HTML5 plakasında her şeyi yemek zorunda değiliz. Bazı parçaların muhtemelen şefe geri gönderilmesi gerekiyor.
Oldukça muazzam HTML5 spesifikasyonunun iyi ve kötü kısımları vardır ve spesifikasyonun çok spesifik bir parçası hakkında eleştirel düşüneceğiz: HTML5'in bölümlendirmesi veya 'yapısal' öğeleri tanıtılmaktadır. Bu yüzden, dedektif şapkalarımızı açalım ve bu yeni öğelerin gerçekten nereden geldiğini, nasıl kullanılmaları gerektiğini ve web tasarım topluluğunun onları esas olarak yanlış anladığını ve esasen spesifikasyonları nasıl değiştirdiğimizi inceleyelim. Bu unsurların temelini sorgulayacağız ve bu yol boyunca onlar hakkında birkaç efsane olacak.
Bu unsurlar hakkında tekrarlanan bir efsaneyi ele alalım: onlar bizim web topluluğumuzun belgelemizi nasıl işaretlediğiyle ilgili araştırmaya dayandıkları fikri. Yıllar boyunca kitaplarda, bloglarda ve konuşmalarda tekrarlanan bir efsane, ve bu doğru değil. Nasıl bilebilirim? Diye sordum.
Bu elementlerin kökenini araştırırken, HTML5 spesifikasyonunun editörü Ian Hickson'a bu elementlerin nereden geldiğini sormaya karar verdim. O cevapladı:
Ben ve diğer WHATWG katılımcıları [bunları eklediler], 2004ish, çünkü yazarların HTML4'ü nasıl kullandıklarını gördükten sonra eklenecek bariz unsurlardı. Biz daha sonra (2006'nın başlarında 2006'nın başı), ilk on HTML sınıfının ne olduğunu bulmak için bazı nesnel araştırmalar yaptık ve eklediğimiz öğeleri temel olarak tam olarak eşleştirdiklerini ortaya çıkardık.
Bunu kıralım: İlk olarak, Hickson ve WHATWG üyeleri herhangi bir araştırma yapılmadan önce bu unsurları eklediler. WHATWG'nin (neşeyle herkese açık) posta listesi arşivlerine girebilir ve bu öğeler hakkında kendiniz için erken tartışmaları keşfedebilirsiniz. Örneğin, Hickson’un Kasım 2004’te tartışarak Bu :
Evet, Web Uygulamalarında [semantik elemanlar] gibi öğeleri dahil etmeyi planlıyorum. Ofisimdeki beyaz tahta şu anda “HTML5 BLOK SEVİYE ELEMANLARI” başlığı altında bir elemanlar listesi içeriyor ve ben bunların iyi bir şekilde nasıl çalışacağını anlamaya çalışıyorum (söz konusu unsurlar taslakta şu anda bahsediliyor, ancak taslak başlıkları iyi kullanmaz). Henüz satır içi işaretlemeye bakmadım, ama bu kartlarda da var.
Öyle görünüyor ki, HTML5 yapısal semantiğinin nasıl olduğu ortaya çıktı: bir adam, bir beyaz tahta ve diğer WHATWG üyelerinden bazı girdiler. (WHATWG veya Web Hypertext Uygulama Teknolojileri Çalışma Grubu, W3C'nin XHTML 2.0 ütopya ideali için HTML'yi terk etmesine yanıt olarak tarayıcı temsilcileri tarafından oluşturulmuştur).
Tartıştığımız ve tartıştığımız milyonlarca belgenin kullandığı unsurlar, 2004'te HTML5 editörünün bir isteğiyle keyfi olarak ortaya çıkmıştı. eleştirmen ve bazı ne yazık ki doğru tahminler hemen hemen.)
Tantek, mikroformatlar bağlamında uzun bir süredir araştırma-öncesi-yeni formatlar üzerinde ısrar ediyordu ve nihayetinde WHATWG özellikleri, kolektif arkalarımızın dışında bir şeyler çekmemiz yerine, gerçek verilerle benzer şekilde tasarlanacaktır. - Ian Hickson
Bu bizi ikinci noktaya getiriyor. 2005 yılının Aralık ayında - bu yeni öğelerle birlikte bir yıl ya da sonra — Hickson (Google çalışanı), Google'ın geniş belge veritabanını kullanarak belgelerin nasıl yazıldığına dair bazı araştırmalar yaptı. Araştırma, “bir milyardan fazla belgenin bir örneğinin, popüler sınıf adları, unsurlar, öznitelikler ve ilgili meta veriler hakkında bilgi çıkarılması” analizidir. Kimlikler araştırmaya dahil edilmemiştir. Bulgular Google tarafından yayınlandı. Web Yazma İstatistikleri (2005) .
Araştırmanın kritik bir kısmı, HTML'nin yapısal unsurları ile ilgili olarak, sınıflar bulgular Örneğin, 1 milyar belgenin 900 milyonunun hiç bir sınıfının olmadığı bir örneğe rağmen, bazı ortak sınıfları içerdiğinden eminim ki hepimiz daha önce projelerimizde kullanmıştık: altbilgi, menü, başlık, küçük, metin , içerik, başlık, nav, telif hakkı, düğme, ana, vb.
Daha sonra Hickson, bu sınıfların gerçekte HTML5'te önerilmekte olan unsurlara çok iyi bir harita çizdiğini ve araştırmanın bulgularını ve HTML5'teki yeni öğeleri karşılaştıran bir tablo sağladığını ortaya koyar: bir altbilgi sınıf araştırmada, bir alt öğe HTML5'te; Bir başlık sınıfı araştırmada, bir başlık öğesi HTML5'te; sınıflar, içerik , ana , beden sınıfları araştırmada yer almaktadır ve err… makalesi , göreceğimiz gibi, hiç eşleşmediği HTML5'tedir; bölüm hiç de görülmemelidir, ki bu da dikkat çekicidir.
Yüz değerinde ele alındığında, bu yeterince makul. Altbilgiyi kullanıyorum, altbilgi kullanıyorsunuz, HTML5'te altbilgi var. Sorun ne?
Sorun şu ki, eğer gerçekleri okuyorsanız HTML5 belirtimi HTML5'teki öğeler, geleneksel olarak bunları nasıl kullandığımızla ilgili olmayan bir şekilde tanımlanmıştır.
Bir yandan, Hickson, HTML5'te bir web sayfasını bölümleme elemanları ile yapılandırmak için yepyeni bir konsept geliştirdi. Diğer yandan, Hickson, HTML5 kesit öğelerini, bu sınıfların aslında ne için kullanıldığını anlamadan vahşi sınıfta kullanılan sınıflarla karşılaştırıyor. Klasik bir örnek, çoğumuz sayfanın üst kısmındaki alan için kullanacağımız 'başlık', ancak HTML5 özelliği , bir sayfada bulunan her yorumun başlığını kullanabilmenizi önerir. Gerçekten mi. Sadece araştırmadaki sınıflar ve HTML5'teki öğelerin aynı ada sahip olması, kullanımlarının aynı olduğu anlamına gelmez.
Şimdi, eğer yeni unsurların yeni bir amaç ve açık bir gerekçeyle sunulduğu açık bir şekilde iletildiyse, o zaman bu o kadar da kötü olmazdı. Ama anlattığımız şey bu değildi.
İşte 2009 yılında Hickson bölüm, nav, makale, kenara ve başkalarının amacı ile ilgili bir soruya cevap vermek:
Web geliştiricilerinden en yaygın istekleri, en yaygın sınıf = ”” öznitelik değerlerinin ne olduğunu temel alarak doldururlar. Onların ana amacı, yazma ve şekillendirmeyi basitleştirmektir.
Ne yazık ki, bu, HTML5 editörünün, tüm özellikleriyle birlikte bir araya getirme konusundaki iyi çalışmasının, bu unsurları niçin özel olarak onun özelliklerine eklediğini unuttuğunu (cömert olalım) bir durum gibi görünüyor. Belki de 2009 ve 2004 arasındaki zaman farkı, kim bilir. Ancak bunu biliyoruz: HTML5 bölüm öğeleri, web geliştiricilerinden en yaygın istekleri doldurmak için eklenmedi. Nasıl bilebiliriz? Sadece listeye bakabiliriz ve bölüm elementi (ve ilgili makale ve bir kenara öğe) gibi eklenen en temel unsurları, ortak sınıf öznitelikleri araştırmasında görünmüyoruz.
Hickson bu unsurların neden eklendiğini unutmuş olsa da, yine de amaçlarını belgeleyen neleri okuyabiliriz.
Ancak web tasarımcılarına ve geliştiricilerine endişelenmemelerini söylediğinizde ne olur, bu elemanlar zaten yaptığınız şeylerin yerini alır ve sonra bu unsurları kesinlikle web tasarımcıları ve geliştiricilerinin yaptıklarını belirtmeyecek şekilde belirtin. Karışıklık kentine tek yönlü bir yolculuğa çıkarırsın.
Bu, en kötü araştırma türüdür: verilmiş olan kararları haklı çıkarmak için yapılan verilerin tembel bir yorumu. HTML5'in bir tekrarlanan tasarım ilkesi, ' cowpaths döşemek 'Yani,' Bir uygulama yazarlar arasında zaten yaygın olduğunda, onu yasaklamaktan ya da yeni bir şey icat etmek yerine onu benimsemeyi düşünün. ' Ve böylelikle, bu yeni yapısal unsurlarla birlikte görünecektir: bölüm, makale, nav, ve bir kenara (ve üstbilgi ve altbilgi) —sadece bunlar sadece “inek yollarını kaldırıyor”?
Bu, çoğumuzun sahip olduğu izlenim, dediğimiz gibi.
Aslında, yaklaşık beş yıl önce ilk aldığımızda HTML5 önizlemesi Bu elemanlar, kullandığımız 'unsemantic' div'lerin yerini alabilirdi. Sayfanın üst kısmındaki div id = ”başlığı” nı şimdi sadece başlık olabilirdi ; div id = ”footer” artık sadece altbilgiye dönüştü ve div'umuz sadece makale olabilirdi. Basit, değil mi?
Ne yazık ki, biz söylediklerimizi yaptıklarına rağmen (diğer bir deyişle, sadece birini diğeriyle değiştirelim), bu öğeleri HTML5 özelliklerine yansımayan bir şekilde uyguladık. Yani, HTML5 yapısına gelince, aslında özeti çektik. Şu anda orada iki HTML5 yapısı var: 2007 A List Apart makalesinde (ve sayısız başkaları) yansıtılan topluluk yorumu; ve özet olarak adlandırılan bir web sayfası yapılandırmanın yepyeni bir yolunu tanıtan gerçek HTML5 belirtimi.
Bu, HTML'nin yapısal semantiğinin kalbindeki çelişkidir. Bir yandan editörümüze, yeni unsurların halihazırda yaptığımız şeyle ilgili araştırmaya dayandığını ve dolayısıyla sadece biraz daha kolay yazmayı amaçladıklarını söyleyerek bildiriyoruz; öte yandan editörün HTML5 spesifikasyonunda gerçekte oluşturduğu şeylere sahip oluyoruz. Bu, bir web sayfasını bölümleme öğeleri kullanarak bir belge taslağı oluşturacak şekilde yapılandırmanın yeni bir yoludur.
Burada yapılacak açık bir seçim vardı. HTML5 tasarım prensiplerine son verin ve yeni bir şeyler tanıtın ya da gerçek yazma uygulamalarını takip edin ve web tasarım pratiğini yansıtacak şekilde öğeleri belirtin. Hickson eskiyi yapmaya çalıştı ve onu ikincisine çağırdı ve şimdi elimizde büyük bir karışıklık var.
Daha fazlası için aç? Bu makalenin ikinci kısmı şu anda hazırdır ve 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.
HTML5 yapısal elemanlarıyla çalışıyor musunuz? Onlara yararlı mı yoksa bir engel mi var? Yorumlarda bize bildirin.
Öne çıkan görsel / küçük resim, kullanımlar yapı görüntüsü Shutterstock üzerinden.