HTML Academy · บทเรียน

ตัวตรวจสอบมาร์กอัป W3C

ค้นหาและแก้ไขข้อผิดพลาด HTML ด้วยบริการตรวจสอบมาร์กอัป W3C

ตัวตรวจสอบมาร์กอัป W3C เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

สิ่งที่เครื่องมือตรวจสอบตรวจสอบ

เครื่องมือตรวจสอบมาร์กอัปของ W3C (validator.w3.org) จะแยกวิเคราะห์ HTML เทียบกับข้อกำหนดอย่างเป็นทางการ และรายงานการละเมิดข้อกำหนดทุกกรณี เช่น แท็กที่ไม่ปิด การซ้อนที่ไม่ถูกต้อง (มี <p> อยู่ภายใน <p> อีกตัว) แอตทริบิวต์ที่จำเป็นหายไป (รูปภาพที่ไม่มีข้อความทดแทน) เอลิเมนต์ที่ไม่รู้จัก และกรณีอื่น ๆ อีกมากมาย

เหตุใดการตรวจสอบจึงสำคัญ

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

สามวิธีส่งตรวจสอบ

ตรวจสอบได้สามวิธี ได้แก่ ตรวจสอบตาม URL (วาง URL ของหน้า) อัปโหลดไฟล์ หรือป้อนข้อมูลโดยตรง (วาง HTML) การใช้ URL เหมาะที่สุดสำหรับหน้าที่ใช้งานจริง ส่วนการป้อนข้อมูลโดยตรงมีประโยชน์ระหว่างการพัฒนา เมื่อไฟล์นั้นยังไม่ได้เผยแพร่ไว้ที่ใด

การอ่านผลลัพธ์

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

คำเตือนกับข้อผิดพลาด

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

ข้อผิดพลาดที่พบบ่อย

ไม่มีข้อความทดแทนในรูปภาพ แท็กเปิดปิดไม่ครบ (<br> แทนแท็กแบบปิดตัวเองรุ่นเก่า <br/> ซึ่งก็ใช้ได้เช่นกัน) ตัวระบุซ้ำกันในหน้า ป้ายกำกับแบบฟอร์มไม่มีแอตทริบิวต์ for ที่ตรงกับตัวระบุของช่องข้อมูล องค์ประกอบโต้ตอบซ้อนกัน (ปุ่มอยู่ภายในลิงก์) ปัญหาทั้งห้าข้อนี้คิดเป็นสัดส่วนส่วนใหญ่ของผลลัพธ์จากตัวตรวจสอบ

การตรวจสอบแม่แบบ

หาก HTML ของคุณสร้างจากแม่แบบ ให้ตรวจสอบผลลัพธ์สุดท้าย (หน้าที่แสดงผล) แทนซอร์สของแม่แบบ ช่องแทนที่ {{ }} ไม่ใช่ HTML ที่ถูกต้อง — สิ่งสำคัญมีเพียงสิ่งที่เอนจินสร้างขึ้นเท่านั้น เรียกใช้ตัวตรวจสอบในระบบผสานรวมอย่างต่อเนื่องกับหน้าที่แสดงผลจากการสร้างสำหรับการทดสอบ

อินเทอร์เฟซบรรทัดคำสั่งสำหรับการตรวจสอบ HTML

สำหรับการผสานรวมอย่างต่อเนื่อง ให้ใช้แพ็กเกจ npm สำหรับตรวจสอบ HTML: npx html-validate "public/**/*.html" จะตรวจสอบทุกหน้าในการสร้าง กำหนดกฎใน .htmlvalidate.json ใช้วิธีนี้เพื่อทำให้การสร้างล้มเหลวเมื่อพบการถดถอยของการตรวจสอบความถูกต้อง

การตรวจสอบสไตล์และโค้ดตั้งแต่ต้นทาง

การตรวจสอบโค้ดขณะเขียน (เครื่องมือตรวจสอบ CSS และปลั๊กอินตรวจสอบการเข้าถึงสำหรับรีแอกต์) จะตรวจพบปัญหาจำนวนมากก่อนที่จะไปถึงตัวตรวจสอบ ใช้ร่วมกับการตรวจสอบตั้งแต่ต้นจนจบในระบบผสานรวมอย่างต่อเนื่องเพื่อป้องกันเป็นชั้น ๆ — ตรวจพบปัญหาส่วนใหญ่ตั้งแต่เนิ่น ๆ และตรวจพบส่วนที่เหลือก่อนนำขึ้นใช้งาน

สิ่งที่การตรวจสอบความถูกต้อง NOT ตรวจจับไม่ได้

การตรวจสอบความถูกต้องจะตรวจสอบความถูกต้องของมาร์กอัป ไม่ใช่ความหมายเชิงโครงสร้าง หน้าเว็บที่ใช้ <h6> เป็นหัวข้อทั้งหมดถือเป็น HTML ที่ถูกต้อง แต่มีความหมายเชิงโครงสร้างไม่ดี การตรวจประเมินการเข้าถึงของไลต์เฮาส์และการตรวจสอบด้วยตนเองจะตรวจพบปัญหาเชิงความหมายที่ตัวตรวจสอบตรวจไม่พบ

คำเตือนเกี่ยวกับโหมดความเข้ากันได้แบบเก่า

การไม่มี <!doctype html> จะเรียกใช้โหมดความเข้ากันได้แบบเก่า — เบราว์เซอร์จะใช้ชั้นความเข้ากันได้แบบเดิมซึ่งทำให้ CSS สมัยใหม่ทำงานผิดพลาด ตัวตรวจสอบจะแจ้งการไม่มีประกาศประเภทเอกสารเป็นข้อผิดพลาดแรก ห้ามนำหน้าเว็บที่ไม่มีประกาศประเภทเอกสารขึ้นใช้งาน

การตรวจสอบอย่างต่อเนื่อง

เรียกใช้การตรวจสอบกับทุก PR ผ่านกระบวนงานของ GitHub: ติดตั้งเครื่องมือตรวจสอบ HTML เรียกใช้กับเว็บไซต์ที่สร้างแล้ว และทำให้ PR ล้มเหลวหากมีข้อผิดพลาด การตรวจพบข้อผิดพลาดใหม่ในเวลาตรวจทานย่อมดีกว่าปล่อยให้สะสมเป็นเวลาหลายเดือนจนแก้ไขย้อนหลังได้ยาก

ตรวจสอบความรู้

เหตุใดการไม่มีประกาศ <!doctype html> จึงมีความสำคัญอย่างมากต่อตัวตรวจสอบของดับเบิลยูสามซี

สรุป

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

คำถามที่พบบ่อย

บทเรียน “ตัวตรวจสอบมาร์กอัป W3C” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ตัวตรวจสอบมาร์กอัป W3C” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ตัวตรวจสอบมาร์กอัป W3C”

ค้นหาและแก้ไขข้อผิดพลาด HTML ด้วยบริการตรวจสอบมาร์กอัป W3C คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “ตัวตรวจสอบมาร์กอัป W3C” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ HTML Academy