GORAGOD.com

10 หนทางในการทำเว็บสู่มาตรฐาน (ตอนที่ 2)

ต่อจากตอนแรกละกัน วิธีืที่ 6 ถึง 10

6. ใช้ HTML ให้ถูกต้อง
อักขระบางตัวเป็นอักขระที่ใช้ในโค้ดของ HTML เราไม่สามารถใช้มันภายในข้อความได้ เช่น & " < และ > แต่เราสามารถเปลี่ยนแปลงมันให้เป็น รหัสข้อความ เพื่อที่จะสามารถแสดงผลอย่างถูกต้องได้
<a href="http://www.example.com?page=1&amp;view=top">A &quot;Cool&quot; Link</a>
&lt;div id=&quot;content&quot;&gt;Test information.&lt;/div&gt;

7. ใช้ Tags และ Attributes เป็นตัวอักษรตัวพิมพ์เล็ก
tag และ attribute ต่างๆ รวมถึง event ต้องกำหนดให้เป็น ตัวอักษรตัวพิมพ์เล็กเท่านั้น เช่น <html> <table cellpadding="0"> <body onload="alert('xxx')">
<A href="#" onClick="doSomething();">Send us a message</A>

ด้านบนเป็นโค้ดที่ไม่ถูกต้อง ชื่อ tag และ event ประกอบด้วยตัวอักษรตัวพิมพใหญ่
<a href="#" onclick="doSomething();">Send us a message</a>

โค้ดที่แก้ไขแล้ว โดยเปลี่ยนเป็นตัวอักษรตัวพิมพ์เล็กทั้งหมด (ยกเว้น ภายใน Value และส่วนข้อความ)

8. ใช้ label ภายในฟอร์ม
element ต่างๆที่ต้องการการกรอกข้อมูลภายในฟอร์ม ต้องมีการกำหนดป้ายกำกับ หรือ label ที่สัมพันธ์กันไว้เสมอ ซึ่งป้ายกำกับนี้จะถูกใช้ในการอธิบายความหมายของสิ่งที่ต้องกรอกของเครื่องอ่านสำหรับผู้พิการทางสายตา
  • กำหนด label ให้กับทุก element ที่ต้องกรอก และมองเห็นได้ภายในฟอร์ม (ยกเว้น input แบบ hidden)
  • กำหนด Attribute for ให้กับ label โดยสัมพันธ์กันกับ id ของ Element ที่ต้องกรอก
<p><label for="searchbox">Search: </label><input type="text" id="searchbox" /></p>
<p><input type="checkbox" id="remember" /><label for="remember"> Remember</label></p>

9. กำหนด alt ให้กับรูปภาพเสมอ
alt สำหรับใช้เป็นคำอธิบายที่เกี่ยวกับรูปภาพ และจะถูกใช้แสดงแทนเมื่อไม่สามารถแสดงรูปภาพได้ เราจำเป็นต้องการหนด alt โดยใช้ข้อความเพื่ออธิบายความหมายของรูปภาพ ไม่ควรปล่อยว่างไว้ และนอกจากนี้ เราควรกำหนด width และ height ที่ถูกต้องให้กับรูปภาพลงไปด้วย
ไม่ถูกต้อง :
<img src="picture.png" />
<img src="spacer.gif" alt="" />

ที่ถูกต้อง :
<img src="picture.png" alt="A warm sunset" width="450" height="350" />

9. ใช้ id และ class ให้ถูกต้อง
คุณสามารถกำหนดชื่อให้กับ id ได้เพียง tag เดียว ตลอดหน้าเพจ แต่สามารถกำหนด ค่าให้กับ class ในชื่อเดียวกันได้หลายๆครั้ง ตลอดทั้งหน้า
  • id มักจะถูกใช้ โดย Javascript ดังนั้นเราควรกำหนด id เพียงหนึ่งเดียวบนหน้าเพจ เนื่องจาก หากมี id มากกว่าหนึ่ง javascript จะแสดงข้อความผิดพลาดได้
  • class เราสามารถใช้ในการกำหนด style ให้ element นั้นๆได้ โดยที่ element ใดที่มีชื่อ class เดียวกันก็จะแสดงผลเหมือนๆกันตลอดทั้งหน้าเพจ
ไม่ถูกต้อง :
<p id="leftNav">Home</p>
<p id="leftNav">Contact</p>

ที่ถูกต้อง :
<p id="homeNav" class="leftNav">Home</p>
<p id="contactNav" class="leftNav">Contact</p>

บทสรุป เราสามารถตรวจสอบความถูกต้องของเว็บเพจเราได้ที่นี่
แปลและเรียบเรียงจาก Smashing Magazine