HTML for Kids · บทเรียน

การตรวจสอบ HTML

ตรวจสอบให้แน่ใจว่าโค้ดของคุณเป็นไปตามมาตรฐาน HTML

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

เหตุผลที่ต้องตรวจสอบความถูกต้องของ HTML

การตรวจสอบความถูกต้องของ HTML

ยินดีต้อนรับสู่บทเรียนถัดไป! วันนี้เราจะเรียนรู้วิธีตรวจสอบความถูกต้องของโค้ด HTML เพื่อให้แน่ใจว่าเป็นไปตามมาตรฐานเว็บและไม่มีข้อผิดพลาด การตรวจสอบความถูกต้องช่วยให้คุณสร้างหน้าเว็บที่ดียิ่งขึ้น

การตรวจสอบความถูกต้องของ HTML คืออะไร

การตรวจสอบความถูกต้อง คือการตรวจสอบโค้ด HTML เพื่อให้แน่ใจว่าเขียนได้อย่างถูกต้องตามมาตรฐานเว็บ

ประโยชน์ของการตรวจสอบความถูกต้องของ HTML:

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

ข้อผิดพลาดทั่วไปของ HTML

ต่อไปนี้คือตัวอย่างข้อผิดพลาดทั่วไปที่ควรหลีกเลี่ยง:

ไม่มีแท็กปิด
ใช้ชื่อแท็กไม่ถูกต้อง
ลืมใส่เครื่องหมายอัญประกาศรอบค่าของแอตทริบิวต์

ตัวอย่าง: ข้อผิดพลาดที่พบบ่อย:

<a href=https://example.com>Click here<a>

เวอร์ชันที่แก้ไขแล้ว:

<a href="https://example.com">Click here</a>

การใช้ตัวตรวจสอบ W3C

ตัวตรวจสอบ W3C เป็นเครื่องมือฟรีที่ตรวจหา error และคำเตือนในโค้ด HTML ของคุณ ทำตามขั้นตอนต่อไปนี้:

ไปที่ validator.w3.org
เลือกหนึ่งในตัวเลือกต่อไปนี้:
- ป้อนโดยตรง: วางโค้ด HTML ของคุณ
- อัปโหลดไฟล์: อัปโหลดไฟล์ HTML ของคุณ
- URL: ป้อน URL ของหน้าเว็บ
คลิก ตรวจสอบ เพื่อดูผลลัพธ์

การแก้ไขข้อผิดพลาดจากการตรวจสอบความถูกต้อง

เมื่อคุณตรวจสอบความถูกต้องของโค้ด ตัวตรวจสอบจะแสดงรายการข้อผิดพลาดหรือคำเตือนที่พบ วิธีแก้ไขมีดังนี้:

อ่านข้อความแสดงข้อผิดพลาดอย่างละเอียด
ค้นหาตำแหน่งของปัญหาในโค้ด
แก้ไขให้ถูกต้องตามที่จำเป็น

เคล็ดลับ: ตรวจสอบความถูกต้องของโค้ดอีกครั้งทุกครั้งหลังแก้ไข!

แนวทางปฏิบัติที่ดีที่สุดสำหรับการตรวจสอบความถูกต้อง

ทำตามเคล็ดลับเหล่านี้เพื่อหลีกเลี่ยงข้อผิดพลาดจากการตรวจสอบความถูกต้อง:

ใช้การประกาศชนิดเอกสารที่ถูกต้องเสมอ (เช่น <!DOCTYPE html>)
ปิดแท็กทั้งหมดให้ถูกต้อง
ใช้ตัวอักษรพิมพ์เล็กสำหรับชื่อแท็ก
ใส่แอตทริบิวต์ alt ให้รูปภาพ

ตัวอย่าง:

<!DOCTYPE html>
<html>
  <head>
    <title>Validated Page</title>
  </head>
  <body>
    <h1>Welcome to My Page</h1>
    <img src="image.jpg" alt="Description of the image" />
    <p>This is a valid HTML page.</p>
  </body>
</html>

ตัวอย่างจากการใช้งานจริง

ตัวอย่างหน้าเว็บที่มีปัญหาด้านการตรวจสอบความถูกต้อง:

<!-- Incorrect HTML -->
<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  <body>
    <h1>Welcome</h1>
    <img src="image.jpg">
    <p>This is my first page.
  </body>
</html>


<!-- Correct HTML -->
<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Welcome</h1>
    <img src="image.jpg" alt="A sample image">
    <p>This is my first page.</p>
  </body>
</html>

ลองทำด้วยตนเอง

มาสร้างหน้า HTML ที่ถูกต้องกัน ใช้ตัวอย่างนี้:

<!DOCTYPE html>
<html>
  <head>
    <title>Validation Example</title>
  </head>
  <body>
    <h1>My Validated Page</h1>
    <img src="example.jpg" alt="An example image">
    <p>This page passes validation!</p>
  </body>
</html>

สรุปการตรวจสอบความถูกต้องของ HTML

ทำได้ดีมาก!

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

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

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

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

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

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

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

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

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

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

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

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

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

← กลับไปที่ HTML for Kids