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

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

6. ใช้ HTML ให้ถูกต้อง
อักขระบางตัวเป็นอักขระที่ใช้ในโค้ดของ HTML เราไม่สามารถใช้มันภายในข้อความได้ เช่น & " < และ > แต่เราสามารถเปลี่ยนแปลงมันให้เป็น รหัสข้อความ เพื่อที่จะสามารถแสดงผลอย่างถูกต้องได้

& ให้ใช้ & แทน
" ให้ใช้ &quote; แทน
< ให้ใช้ < แทน
> ให้ใช้ > แทน
ตัวอักษรอื่นๆ

<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