การตรวจสอบความถูกต้องของ W3C บางครั้งอาจใช้งานยาก แต่ด้วยการตรวจสอบนี้ คุณจะเห็นข้อผิดพลาดที่เกิดจากการออกแบบเค้าโครงได้ เครื่องมือตรวจสอบจะแสดงข้อผิดพลาดและคำเตือนมากมาย ซึ่งบ่งชี้ว่า XHTML ของคุณยังไม่สมบูรณ์และอาจทำงานได้ไม่สอดคล้องกันในเบราว์เซอร์ต่างๆ ปัญหาความล้มเหลวเล็กน้อยสิบประการต่อไปนี้ทำให้โปรแกรมเมอร์จำนวนมากนิ่งงัน และเราจะบอกวิธีแก้ปัญหาให้คุณ ก่อนที่จะเริ่มบทความนี้ ฉันจะแนะนำปัญหาบางอย่างที่ต้องให้ความสนใจเมื่อใช้เครื่องมือตรวจสอบ W3C
อย่ากังวลเกี่ยวกับคำเตือนจากผู้ตรวจสอบ - หากผู้ตรวจสอบระบุว่าพบข้อผิดพลาด 12 รายการและคำเตือน 83 รายการ ให้เพิกเฉยต่อคำเตือนนั้นและไปยังขั้นตอนถัดไป
แก้ไขข้อผิดพลาดทีละรายการ - ทำงานตามลำดับจากบนลงล่าง แก้ไขข้อผิดพลาดทีละรายการ HTML จะถูกดูจากบนลงล่างด้วยเบราว์เซอร์ และข้อผิดพลาดเหล่านี้จะแสดงในลำดับเดียวกัน
รีเฟรชโค้ดหลังจากการแก้ไขแต่ละครั้งเพื่อให้ถูกต้องอีกครั้ง ข้อผิดพลาดเล็กๆ น้อยๆ มักจะทำให้เกิดข้อผิดพลาดต่อเนื่องกันทั่วทั้งหน้า ดังนั้นหากทำไม่ถูกต้อง "การแก้ไขข้อผิดพลาด" ก็อาจทำให้เกิดข้อผิดพลาดเพิ่มมากขึ้นได้เช่นกัน การตรวจสอบความถูกต้องของรหัสอีกครั้งหลังจากการแก้ไขแต่ละครั้งจะทำให้แน่ใจได้ว่าปัญหาได้รับการแก้ไขอย่างสมบูรณ์
เมื่อทราบถึงข้อยกเว้นพื้นฐานข้างต้นแล้ว เรามาดูสาเหตุหลายประการว่าทำไมการออกแบบเค้าโครงจึงไม่ถูกต้อง
1. แท็ก div ไม่ได้ถูกปิด นี่เป็นหนึ่งในสาเหตุที่พบบ่อยที่สุดที่ทำให้การออกแบบเค้าโครงล้มเหลว เป็นเรื่องที่น่าแปลกใจเสมอเมื่อเราเรียนรู้ว่าการออกแบบเลย์เอาต์ที่ละเอียดอ่อนจำนวนเท่าใดที่ล้มเหลวด้วยเหตุนี้ แบบสำรวจแสดงให้เห็นว่าแท็ก div แบบเปิดเป็นหนึ่งในข้อผิดพลาดในการออกแบบส่วนที่พบบ่อยที่สุด และเป็นหนึ่งในข้อผิดพลาดที่วินิจฉัยได้ยากที่สุด บางครั้งเครื่องมือตรวจสอบความถูกต้องจะชี้ไปที่แท็ก div เปิดที่ไม่ถูกต้อง ซึ่งอาจเหมือนกับการหาเข็มในกองหญ้า
2. แท็กฝังที่ยุ่งยาก ในช่วงต้นทศวรรษ 1990 เบราว์เซอร์ Microsoft และ Netscape เริ่มสามารถจดจำแบบอักษรที่ไม่ซ้ำแบบมาตรฐานได้ น่าเสียดายที่นี่หมายความว่าเครื่องมือตรวจสอบ W3C ยังไม่รู้จักแท็ก HTML ที่สำคัญบางแท็ก เช่น "ฝัง" แม้ว่าแท็กเหล่านี้จะใช้กันอย่างแพร่หลายก็ตาม หากคุณต้องการการตรวจสอบ DOCTYPE (ประเภทเอกสาร) ที่เข้มงวดจริงๆ คุณสามารถยกเลิกการซ้อนได้เท่านั้น
หากคุณต้องการเลย์เอาต์ที่มีประสิทธิภาพและสื่อฝังตัวในเวลาเดียวกัน คุณสามารถลองใช้วิธีแฟลชสะเต๊ะได้
3. การประกาศ DOCTYPE ที่ไม่เหมาะสม การไม่ประกาศ DOCTYPE หรือการประกาศ DOCTYPE อย่างไม่ถูกต้องที่จุดเริ่มต้นของไฟล์ถือเป็นข้อผิดพลาดทั่วไปเช่นกัน ตามประสบการณ์ทั่วไป DOCTYPE ที่เข้มงวดคือระดับสูงสุดของการตรวจสอบที่ทุกคนติดตาม การตรวจสอบอย่างเข้มงวดบ่งชี้ว่าหน้าเว็บของคุณจะแสดงอย่างเหมาะสมบนเบราว์เซอร์ทั้งหมด รหัสการประกาศที่เข้มงวดมีดังนี้:
4. Trailing slash หากเว็บไซต์ของคุณไม่สามารถยืนยันได้ อาจเป็นไปได้ว่าเครื่องหมายทับต่อท้ายหายไปที่ไหนสักแห่งในโค้ด เป็นเรื่องง่ายที่จะมองข้ามสิ่งต่างๆ เช่น เครื่องหมายทับต่อท้าย โดยเฉพาะอย่างยิ่งในองค์ประกอบ เช่น แท็กรูปภาพ ตัวอย่างเช่น:
สิ่งนี้ไม่มีผลกระทบใน DOCTYPE ที่เข้มงวด เพื่อแก้ไขปัญหานี้ ให้เพิ่ม "/" ที่ส่วนท้ายของแท็ก img
5. จัดแนวแท็ก หาก DOCTYPE ถูกตั้งค่าเป็น Transitional คุณจะใช้แท็ก "align" แต่หากคุณเข้มงวดมากขึ้นและต้องการการตรวจสอบที่เข้มงวด คุณจะเห็นข้อผิดพลาดมากมาย Align เป็นอีกหนึ่งแท็กที่ไม่สามารถใช้สำหรับการออกแบบโครงร่างได้ คุณสามารถลองใช้ "float" หรือ "text-align" แทนการจัดตำแหน่งเพื่อแปลงองค์ประกอบ
6. จาวาสคริปต์
หากมีการประกาศ Strict DOCTYPE จะต้องแทนที่แท็ก CDATA ใน JavaScript กระบวนการตรวจสอบในด้านนี้ทำให้โปรแกรมเมอร์จำนวนมากหยุดชะงัก เนื่องจากเว็บไซต์มักจะใช้ JavaScript ที่ฝังไว้สำหรับโฆษณาและสคริปต์ติดตาม หากต้องใช้ JavaScript คุณสามารถเพิ่มแท็กต่อไปนี้ก่อนและหลังได้:
7. รูปภาพจำเป็นต้องมีแอตทริบิวต์ “alt” คุณอาจไม่ได้สังเกตเห็น แต่รูปภาพก็อาจเป็นอุปสรรคต่อการตรวจสอบขั้นสูงเช่นกัน นอกจากเครื่องหมายทับต่อท้ายแล้ว การตรวจสอบความถูกต้องขั้นสูงยังต้องมีแท็ก alt เพื่ออธิบายรูปภาพ เช่น alt= "ภาพแวมไพร์ที่น่ากลัว"
เครื่องมือค้นหายังใช้แท็ก alt เพื่อระบุรูปภาพบนหน้าเว็บ ดังนั้นจึงเป็นความคิดที่ดีเสมอที่จะเพิ่มแท็ก alt ไม่ว่าจะเกิดอะไรขึ้นก็ตาม
8. ข้อมูลเอนทิตีที่ไม่รู้จัก ข้อมูลเอนทิตีเป็นข้อผิดพลาดทั่วไปอีกประการหนึ่งที่ส่งผลต่อการตรวจสอบ เราสามารถพิจารณาใช้อักขระเข้ารหัสที่เหมาะสมเพื่อแทนที่สัญลักษณ์เช่น "&" รายการข้อมูลเอนทิตีอักขระที่เข้ารหัสอย่างเหมาะสมทั้งหมดที่มีอยู่ในการออกแบบส่วน XHTML
9. การซ้อนที่ไม่ดี การทำรังหมายความว่าองค์ประกอบนั้นมีองค์ประกอบ Sweet!
เป็นเรื่องง่ายที่จะสร้างความสับสนให้กับลำดับขององค์ประกอบที่ซ้อนกัน ตัวอย่างเช่น เริ่มแท็กที่รัดกุมก่อนแท็ก div แต่แล้วปิดแท็ก div ก่อน สิ่งนี้อาจไม่เปลี่ยนเค้าโครงส่วน แต่จะทำให้การออกแบบส่วนของคุณโมฆะ
10. ไม่มีแท็ก "title" แม้ว่าสิ่งนี้ดูเหมือนจะเป็นข้อผิดพลาดที่ชัดเจน แต่โปรแกรมเมอร์จำนวนมาก (รวมตัวฉันเองด้วย) มักจะพลาดแท็กชื่อในส่วน "head" เมื่อคุณเห็นข้อความ "ขาดองค์ประกอบย่อยที่จำเป็นของ HEAD" (ไม่มีองค์ประกอบย่อยที่จำเป็นของ HEAD) คุณจะพบว่าคุณลืมเพิ่มแท็กชื่อ