แอตทริบิวต์ที่ไม่ได้มาตรฐานบนแท็ก HTML สิ่งที่ดี? สิ่งที่ไม่ดี? ความคิดของคุณ?

HTML (หรืออาจเป็นเพียง XHTML?) ค่อนข้างเข้มงวดเมื่อพูดถึงแอตทริบิวต์ที่ไม่ได้มาตรฐานบนแท็ก หากไม่ได้เป็นส่วนหนึ่งของข้อมูลจำเพาะรหัสของคุณจะถือว่าไม่เป็นไปตามข้อกำหนด

อย่างไรก็ตามแอตทริบิวต์ที่ไม่ได้มาตรฐานมีประโยชน์พอสมควรสำหรับการส่งผ่านข้อมูลเมตาไปยัง Javascript ตัวอย่างเช่นหากสมมติว่าลิงก์แสดงป๊อปอัปคุณสามารถตั้งชื่อป๊อปอัปในแอตทริบิวต์:

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

หรือคุณสามารถจัดเก็บหัวเรื่องสำหรับป๊อปอัปในองค์ประกอบที่ซ่อนอยู่เช่นช่วง:

<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>

ฉันฉีกขาดอย่างไรก็ตามควรเป็นวิธีที่ต้องการ วิธีแรกมีความกระชับมากขึ้นและฉันคาดเดาว่าจะไม่ยุ่งกับเครื่องมือค้นหาและโปรแกรมอ่านหน้าจอมากนัก ในทางกลับกันตัวเลือกที่สองทำให้การจัดเก็บข้อมูลจำนวนมากง่ายขึ้นและมีความหลากหลายมากขึ้น นอกจากนี้ยังเป็นไปตามมาตรฐาน

ฉันอยากรู้ว่าชุมชนนี้คิดอย่างไร คุณรับมือกับสถานการณ์เช่นนี้อย่างไร? ความเรียบง่ายของวิธีแรกมีมากกว่าข้อเสียที่อาจเกิดขึ้น (ถ้ามี) หรือไม่?

ฉันเป็นแฟนตัวยงของโซลูชัน HTML 5 ที่นำเสนอ ( data-แอตทริบิวต์ที่นำหน้า) แก้ไข: ฉันจะเพิ่มว่าอาจมีตัวอย่างที่ดีกว่าสำหรับการใช้แอตทริบิวต์ที่กำหนดเอง ตัวอย่างเช่นข้อมูลที่แอปพลิเคชันแบบกำหนดเองจะใช้ซึ่งไม่มีอะนาล็อกในแอตทริบิวต์มาตรฐาน (เช่นการปรับแต่งสำหรับตัวจัดการเหตุการณ์ตามสิ่งที่ไม่จำเป็นต้องแสดงใน className หรือ id)

แอตทริบิวต์ที่กำหนดเองเป็นวิธีที่สะดวกในการนำข้อมูลเพิ่มเติมไปยังฝั่งไคลเอ็นต์ Dojo Toolkit ทำสิ่งนี้เป็นประจำและมีการชี้ ( Debunking Dojo Toolkit Myths ) ว่า:

แอตทริบิวต์ที่กำหนดเองเป็น HTML ที่ถูกต้องเสมอเพียง แต่ไม่สามารถตรวจสอบได้เมื่อทดสอบกับ DTD [... ] ข้อกำหนด HTML ระบุว่าแอตทริบิวต์ใด ๆ ที่ไม่รู้จักจะถูกละเว้นโดยเอ็นจินการแสดงผล HTML ในตัวแทนผู้ใช้และ Dojo อาจใช้ประโยชน์จากสิ่งนี้เพื่อปรับปรุงความสะดวกในการพัฒนา

อีกทางเลือกหนึ่งคือการกำหนดสิ่งนี้ใน Javascript:

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

จากนั้นคุณสามารถใช้สิ่งนี้ในภายหลังในโค้ด Javascript โดยสมมติว่าลิงก์ของคุณมี ID ที่ตรงกับ ID ในแฮชแท็กนี้

ไม่มีข้อเสียของอีกสองวิธี: ไม่มีคุณลักษณะที่ไม่ได้มาตรฐานหรือช่วงซ่อนเร้นที่น่าเกลียด

ข้อเสียคือมันอาจจะเกินความจำเป็นไปสักหน่อยสำหรับสิ่งต่างๆง่ายๆดังตัวอย่างของคุณ แต่สำหรับสถานการณ์ที่ซับซ้อนมากขึ้นซึ่งคุณมีข้อมูลที่จะส่งผ่านมากขึ้นก็เป็นทางเลือกที่ดี โดยเฉพาะอย่างยิ่งเมื่อพิจารณาว่ามีการส่งข้อมูลเป็น JSON ดังนั้นคุณจึงสามารถส่งผ่านวัตถุที่ซับซ้อนได้อย่างง่ายดาย

นอกจากนี้คุณยังแยกข้อมูลออกจากการจัดรูปแบบซึ่งเป็นสิ่งที่ดีสำหรับการบำรุงรักษา

คุณสามารถมีบางอย่างเช่นนี้ (ซึ่งคุณไม่สามารถทำได้ด้วยวิธีการอื่น ๆ ):

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>

และเนื่องจากคุณอาจใช้ภาษาการเขียนโปรแกรมฝั่งเซิร์ฟเวอร์เป็นส่วนใหญ่ตารางแฮชนี้จึงควรมีความสำคัญในการสร้างแบบไดนามิก (เพียงจัดลำดับให้เป็น JSON และพ่นในส่วนส่วนหัวของหน้า)

ในกรณีนี้ทางออกที่ดีที่สุดคือ

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

และใช้แอตทริบิวต์หัวเรื่อง

บางครั้งฉันก็ทำลายสเป็คถ้าฉันต้องการจริงๆ แต่น้อยครั้งและด้วยเหตุผลที่ดีเท่านั้น

แก้ไข: ไม่แน่ใจว่าทำไม -1 แต่ฉันชี้ให้เห็นว่าบางครั้งคุณคิดว่าคุณต้องทำลายสเป็คเมื่อคุณไม่

ทำไมไม่ประกาศแอตทริบิวต์ popup_title ใน DTD ที่กำหนดเอง วิธีนี้แก้ปัญหาด้วยการตรวจสอบความถูกต้อง ฉันทำสิ่งนี้กับองค์ประกอบแอตทริบิวต์และค่าที่ไม่ได้มาตรฐานทุกรายการและขอขอบคุณการตรวจสอบนี้แสดงให้ฉันเห็นเฉพาะปัญหาที่แท้จริงกับรหัสของฉัน ซึ่งทำให้ข้อผิดพลาดของเบราว์เซอร์เป็นไปได้น้อยลงเมื่อใช้ HTML ดังกล่าว

คุณสามารถซ้อนองค์ประกอบอินพุตที่ซ่อนอยู่ภายในองค์ประกอบจุดยึด

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

จากนั้นคุณสามารถดึงข้อมูลออกมาได้อย่างง่ายดายโดย

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

วิธีแก้ปัญหาของฉันในตอนท้ายคือการซ่อนข้อมูลเพิ่มเติมในแท็ก id ที่คั่นด้วยตัวคั่นบางประเภท (หนึ่งขีดล่างคือช่องว่างสองคือจุดสิ้นสุดของอาร์กิวเมนต์นั้น) อาร์กิวเมนต์ที่สองมี id:

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

น่าเกลียดและถือว่าคุณไม่ได้ใช้แท็ก id สำหรับอย่างอื่น แต่เป็นไปตามมาตรฐานในทุกเบราว์เซอร์

ความรู้สึกส่วนตัวของฉันในตัวอย่างของคุณคือเส้นทางช่วงนั้นเหมาะสมกว่าเนื่องจากเป็นไปตามมาตรฐานของข้อกำหนด XHTML อย่างไรก็ตามฉันเห็นส่วนแบ่งสำหรับแอตทริบิวต์ที่กำหนดเอง แต่ฉันคิดว่าพวกเขาเพิ่มระดับความสับสนที่ไม่จำเป็น

ฉันคิดเรื่องนี้มาตลอดเหมือนกัน ฉันชอบความสามารถในการอ่านแอตทริบิวต์ที่ไม่ได้มาตรฐาน แต่ฉันไม่ชอบที่มันจะทำลายมาตรฐาน ตัวอย่าง hidden span เป็นไปตามข้อกำหนด แต่อ่านไม่ได้มากนัก แล้วสิ่งนี้:

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

ที่นี่รหัสสามารถอ่านได้มากเนื่องจากสัญกรณ์คู่คีย์ / ค่าของ JSON คุณสามารถบอกได้ว่านี่คือข้อมูลเมตาที่เป็นของลิงก์เพียงแค่ดูที่มัน ข้อบกพร่องเดียวที่ฉันเห็นข้างการหักหลังแอตทริบิวต์ "rel" คือสิ่งนี้จะทำให้วัตถุที่ซับซ้อนยุ่งเหยิง ฉันชอบแนวคิดของแอตทริบิวต์ที่มีคำนำหน้า "data-" ดังกล่าวข้างต้นมาก เบราว์เซอร์ปัจจุบันรองรับสิ่งนี้หรือไม่

นี่คือสิ่งอื่นที่ต้องคิด โค้ดที่ไม่สอดคล้องกับ SEO มีผลกระทบมากแค่ไหน?