HTML Etiketlerinde Standart Olmayan Özellikler. İyi bir şey? Kötü bir şey? Senin düşüncelerin?

HTML (veya belki sadece XHTML?), Etiketlerdeki standart olmayan nitelikler söz konusu olduğunda nispeten katıdır. Spesifikasyonun parçası değillerse, kodunuzun uyumlu olmadığı kabul edilir.

Bununla birlikte, standart olmayan öznitelikler meta verileri Javascript'e geçirmek için oldukça yararlı olabilir. Örneğin, bir bağlantının bir pop-up gösterdiği varsayılıyorsa, pop-up'ın adını bir öznitelikte ayarlayabilirsiniz:

<a href="#null" class="popup" title="See the Popup!" 
   popup_title="Title for My Popup">click me</a>

Alternatif olarak, pop-up'ın başlığını bir aralık gibi gizli bir öğede depolayabilirsiniz:

<style>
    .popup .title { display: none; }
</style>
<a href="#null" title="See the Popup!" class="popup">
    click me
    <span class="title">Title for My Popup</span>
</a>

Ancak hangisinin tercih edilen bir yöntem olması gerektiği konusunda yırtık. İlk yöntem daha özlü ve tahminimce arama motorları ve ekran okuyucularla pek uğraşmıyor. Tersine, ikinci seçenek büyük miktarda verinin depolanmasını kolaylaştırır ve bu nedenle daha çok yönlüdür. Aynı zamanda standartlara da uygundur.

Bu toplulukların düşüncelerinin ne olduğunu merak ediyorum. Böyle bir durumla nasıl başa çıkarsınız? İlk yöntemin basitliği, potansiyel dezavantajlardan (eğer varsa) ağır basıyor mu?

Önerilen HTML 5 çözümünün ( data-önekli özellikler) büyük bir hayranıyım . Düzenleme: Özel özniteliklerin kullanımına ilişkin muhtemelen daha iyi örnekler olduğunu eklemeliyim. Örneğin, standart özniteliklerde analogu olmayan özel bir uygulamanın kullanacağı veriler (örneğin, bir sınıfAdı veya id'de mutlaka ifade edilemeyen bir şeye dayalı olarak olay işleyicileri için özelleştirme).

Özel öznitelikler, ekstra verileri istemci tarafına taşımanın uygun bir yolunu sağlar. Dojo Toolkit bunu düzenli olarak yapıyor ve şu noktalara dikkat çekildi ( Dojo Araç Kiti Efsanelerinin Hatalarını Çıkarma ):

Özel öznitelikler her zaman geçerli HTML olmuştur, ancak bir DTD'ye karşı test edildiklerinde doğrulanmazlar. [...] HTML belirtimi, tanınmayan herhangi bir özniteliğin kullanıcı aracılarındaki HTML oluşturma motoru tarafından yok sayılacağını belirtir ve Dojo isteğe bağlı olarak geliştirme kolaylığını artırmak için bundan yararlanır.

Diğer bir seçenek de Javascript'te şöyle bir şey tanımlamak olacaktır:

<script type="text/javascript">
var link_titles = {link1: "Title 1", link2: "Title 2"};
</script>

Daha sonra, bağlantınızın bu hashtable'daki kimliğe karşılık gelen bir kimliğe sahip olduğunu varsayarak, bunu daha sonra Javascript kodunuzda kullanabilirsiniz.

Diğer iki yöntemin dezavantajlarına sahip değildir: standart olmayan nitelikler veya çirkin gizli aralık yok.

Dezavantajı, sizin örneğiniz kadar basit şeyler için biraz abartılı olabilmesidir. Ancak, aktarılacak daha fazla veriye sahip olduğunuz daha karmaşık senaryolar için bu iyi bir seçimdir. Özellikle verilerin JSON olarak aktarıldığı düşünüldüğünde, karmaşık nesneleri kolaylıkla geçirebilirsiniz.

Ayrıca, verileri biçimlendirmeden ayrı tutarsınız, bu da sürdürülebilirlik için iyi bir şeydir.

Hatta bunun gibi bir şeye sahip olabilirsiniz (ki bunu diğer yöntemlerle gerçekten yapamazsınız):

var poi_types = {1: "City", 2: "Restaurant"};
var poi = {1: {lat: X, lng: Y, name: "Beijing", type: 1}, 2: {lat: A, lng: B, name: "Hatsune", type: 2}};

...

<a id="poi-2" href="/poi/2/">Hatsune</a>

Ve büyük olasılıkla bazı sunucu tarafı programlama dili kullandığınız için, bu karma tablo dinamik olarak oluşturmak için önemsiz olmalıdır (sadece JSON'a serileştirin ve sayfanın başlık bölümünde tükürün).

Bu durumda en uygun çözüm şudur:

<a href="#" alt="" title="Title of My Pop-up">click</a>

ve başlık özelliğini kullanma.

Bazen gerçekten ihtiyacım olursa şartnameyi bozuyorum. Ama nadiren ve sadece iyi bir nedenle.

DÜZENLEME: -1'in neden olduğundan emin değilim, ama bazen belirtmediğinizde spesifikasyonları kırmanız gerektiğini düşündüğünüzü söylüyordum.

Neden özel bir DTD'de popup_title özniteliğini bildirmiyorsunuz? Bu, doğrulama ile sorunu çözer. Bunu standart olmayan her öğe, özellik ve değerle yapıyorum ve bu doğrulama bana kodumla ilgili yalnızca gerçek sorunları gösteriyor. Bu, bu tür HTML ile herhangi bir tarayıcı hatasını daha az olası kılar.

Bağlantı öğesinin İÇİNDE gizli giriş öğelerini iç içe yerleştirebilirsiniz

<a id="anchor_id">
  <input type="hidden" class="articleid" value="5">
  Link text here
</a>

Ardından verileri kolayca dışarı çekebilirsiniz.

$('#anchor_id .articleid').val()

Sonunda benim çözümüm, bir tür sınırlayıcı ile ayrılmış olan id etiketindeki ek verileri gizlemekti (bir alt çizgi bir boşluk, iki bu argümanın sonu), ikinci argüman ise bir id var:

<a href="#" class="article" id="Title_of_My_Pop-up__47">click</a>

Çirkin, ve zaten başka bir şey için id etiketini kullanmadığınızı varsayar, ancak her tarayıcıda uyumludur.

Örneğinizdeki kişisel hissim, XHTML spesifikasyonunun standartlarını karşıladığından, yayılma yolunun daha uygun olduğu yönünde. Bununla birlikte, özel öznitelikler için bir argüman görebiliyorum, ancak bunların gerekli olmayan bir kafa karışıklığı seviyesi eklediklerini düşünüyorum.

Ben de bunun için beynimi yıkıyorum. Standart olmayan özelliklerin okunabilirliğini seviyorum, ancak standardı bozması hoşuma gitmiyor. Gizli aralık örneği uyumludur, ancak çok okunabilir değildir. Peki buna ne dersin:

<a href="#" alt="" title="" rel="{popup_title:'Title of My Pop-up'}">click</a>

JSON'un anahtar / değer çifti gösterimi nedeniyle kod çok okunabilir. Bunun bağlantıya ait meta veri olduğunu sadece ona bakarak anlayabilirsiniz. "Rel" özniteliğini ele geçirmenin yanı sıra görebildiğim tek kusur, bunun karmaşık nesneler için dağınık hale gelmesidir. Yukarıda bahsedilen "veri" önekli öznitelikler fikrini gerçekten seviyorum. Mevcut tarayıcılardan herhangi biri bunu destekliyor mu?

İşte düşünmeniz gereken başka bir şey. Uyumlu kodun SEO üzerinde ne kadar etkisi yoktur?