อักขระบางตัวเป็นอักขระที่ใช้ในโค้ดของ HTML เราไม่สามารถใช้มันภายในข้อความได้ เช่น & " < และ > แต่เราสามารถเปลี่ยนแปลงมันให้เป็น รหัสข้อความ เพื่อที่จะสามารถแสดงผลอย่างถูกต้องได้
* & ให้ใช้ & แทน
* " ให้ใช้ "e; แทน
* < ให้ใช้ < แทน
* > ให้ใช้ > แทน
* ตัวอักษรอื่นๆ
โค๊ด:
<a href="http://www.example.com?page=1&view=top">A "Cool" Link</a>
<code><div id="content">Test information.</div></code>
<code><div id="content">Test information.</div></code>
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 ประกอบด้วยตัวอักษรตัวพิมพใหญ่
// ด้านบนเป็นโค้ดที่ไม่ถูกต้อง ชื่อ tag และ event ประกอบด้วยตัวอักษรตัวพิมพใหญ่
โค๊ด:
<a href="#" onclick="doSomething();">Send us a message</a>
// โค้ดที่แก้ไขแล้ว โดยเปลี่ยนเป็นตัวอักษรตัวพิมพ์เล็กทั้งหมด (ยกเว้น ภายใน Value และส่วนข้อความ)
// โค้ดที่แก้ไขแล้ว โดยเปลี่ยนเป็นตัวอักษรตัวพิมพ์เล็กทั้งหมด (ยกเว้น ภายใน 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>
<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="spacer.gif" alt="" />
ที่ถูกต้อง :
โค๊ด:
<img src="picture.png" alt="A warm sunset" width="450" height="350" />
10. ใช้ 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="leftNav">Contact</p>
ที่ถูกต้อง :
โค๊ด:
<p id="homeNav" class="leftNav">Home</p>
<p id="contactNav" class="leftNav">Contact</p>
<p id="contactNav" class="leftNav">Contact</p>
บทสรุป เราสามารถตรวจสอบความถูกต้องของเว็บเพจเราได้ที่นี่
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
http://www.cynthiasays.com/
http://fae.cita.uiuc.edu/
ขอบคุณข้อมูลจาก : http://www.goragod.com/
