Fundamentals

1. หัวข้อนี้คืออะไร

หัวเรื่อง (Heading), ย่อหน้า (Paragraph) และข้อความเน้น (Text Emphasis) คือชุดแท็กพื้นฐานที่ใช้บ่อยที่สุดในงาน HTML แท็กหัวเรื่อง (Heading) มีตั้งแต่ h1 ถึง h6: - h1 คือหัวข้อหลักของหน้า - h2 ถึง h6 คือหัวข้อย่อยตามลำดับชั้น แท็กย่อหน้า (Paragraph) คือ p ใช้ใส่เนื้อหาอธิบายเป็นช่วงความคิดที่สมบูรณ์ แท็กข้อความพื้นฐานที่ควรรู้: - strong ใช้เน้นความสำคัญของข้อความ (ความหมายเชิงสำคัญ) - em ใช้เน้นน้ำเสียงหรือจุดที่อยากให้ผู้อ่านเน้นอ่าน - br ใช้ขึ้นบรรทัดใหม่ในกรณีที่เป็นข้อความเดียวกันแต่ต้องตัดบรรทัด - hr ใช้คั่นช่วงเนื้อหาเมื่อหัวข้อเปลี่ยนอย่างชัดเจน

2. ทำไมหัวข้อนี้สำคัญ

• ช่วยจัดโครงสร้างเนื้อหาให้อ่านง่ายทั้งบนจอเล็กและจอใหญ่
• ทำให้เอกสารมีความหมาย (Semantic) ที่ชัดเจน ไม่ใช่แค่สวยงาม
• ช่วยให้ผู้ใช้และเครื่องมืออ่านหน้าเว็บ (เช่น Screen Reader) เข้าใจลำดับเนื้อหาได้ถูกต้อง
• ลดปัญหาในระยะยาวเมื่อเพิ่ม CSS หรือ JavaScript เพราะโครงสร้างตั้งต้นชัดเจน

3. ตัวอย่างจากชีวิตจริง

ภาพขนาดกลาง: ลำดับชั้นพื้นฐานของเอกสารหนึ่งบทความ h1 → h2 → p

ลองเทียบบทความหนึ่งหน้าเหมือนบทในหนังสือ: - ชื่อบทใหญ่สุด = h1 - หัวข้อย่อยในบท = h2, h3 - เนื้อหาอธิบายแต่ละหัวข้อ = p ถ้าเรียงลำดับหัวข้อดี ผู้อ่านจะไล่อ่านและสแกนเนื้อหาได้เร็วขึ้นมาก

4. แนวคิดหลักที่ต้องเข้าใจ

• h1 ใช้เป็นหัวข้อหลักของหน้า และควรมีใจความชัดเจน
• h2-h6 ใช้เป็นหัวข้อย่อยต่อจากระดับก่อนหน้า ไม่ควรกระโดดโดยไม่มีเหตุผล
• p ใช้สำหรับย่อหน้าอธิบายเนื้อหา ไม่ใช้แทนหัวข้อ
• strong และ em ใช้เพื่อเน้นความหมายของข้อความ ไม่ใช่เพื่อความหนา/เอียงอย่างเดียว
• ไม่ควรเลือก heading เพราะอยากได้ตัวใหญ่ แต่ควรเลือกตามหน้าที่ของเนื้อหา

5. การทำงานทีละขั้นตอน

• 1) ระบุหัวเรื่องหลักของหน้า แล้ววางใน h1
• 2) แบ่งหัวข้อย่อยที่อยู่ใต้หัวเรื่องหลัก แล้ววางใน h2 หรือ h3 ตามระดับ
• 3) เติมย่อหน้าอธิบายใต้หัวข้อย่อยด้วย p
• 4) ใช้ strong หรือ em เฉพาะจุดที่ต้องการเน้นความหมายจริง
• 5) เมื่อเบราว์เซอร์ (Browser) แสดงผล ผู้เรียนและผู้อ่านจะเห็นโครงสร้างชัดตามลำดับชั้น

6. ตัวอย่างเชิงเทคนิค / โค้ด

ตัวอย่างนี้เป็นบทความสั้นที่มี h1, h2, p และการเน้นข้อความแบบพื้นฐาน

<article>
  <h1>คู่มือเริ่มต้น HTML</h1>
  <p>บทนี้ช่วยให้คุณวางโครงสร้างเนื้อหาได้ถูกต้องตั้งแต่เริ่มต้น</p>

  <h2>ทำไมโครงสร้างจึงสำคัญ</h2>
  <p>
    การเลือกแท็กตามความหมายช่วยให้หน้าเว็บอ่านง่ายขึ้น และ
    <strong>รองรับการเข้าถึง (Accessibility)</strong> ได้ดีขึ้น
  </p>
  <p>
    หากอยากเน้นน้ำเสียงในประโยค สามารถใช้ <em>emphasis (em)</em> ได้อย่างเหมาะสม
  </p>

  <hr />
  <p>หมายเหตุ: br ใช้เมื่อต้องขึ้นบรรทัดใหม่ในข้อความเดียว เช่น ที่อยู่หรือบทกวี<br />แต่ไม่ใช้แทนย่อหน้า</p>
</article>

7. จุดที่ผู้เริ่มต้นมักสับสน

• ใช้ heading กระโดดลำดับ เช่น h1 แล้วไป h4 ทันทีโดยไม่มีเหตุผล
• ใช้ heading เพื่อให้ตัวอักษรใหญ่ แทนที่จะใช้ CSS สำหรับการตกแต่ง
• ใช้ br ซ้อนหลายบรรทัดเพื่อทำย่อหน้า แทนการใช้ p
• สับสนว่า strong/b และ em/i เหมือนกันทุกมุมมอง ทั้งที่ strong/em สื่อความหมายได้ชัดกว่า

8. เปรียบเทียบกับสิ่งที่ใกล้เคียง

ภาพขนาดเล็ก: heading ใช้เป็นหัวข้อ ส่วน paragraph ใช้เป็นเนื้อหาอธิบาย

ตารางนี้สรุปความต่างที่ผู้เริ่มต้นต้องจำให้แม่น

9. สรุปท้ายบทแบบจำง่าย

• เริ่มจากโครงสร้างลำดับชั้น: h1 → h2/h3 → p
• ใช้ p สำหรับย่อหน้า ไม่ใช้ br แทนการแบ่งย่อหน้า
• ใช้ strong และ em เพื่อเน้นความหมายของข้อความ
• ไม่เลือกแท็กเพราะขนาดตัวอักษร ให้เลือกแท็กตามหน้าที่ของเนื้อหา
• หลักจำง่าย: ความหมายมาก่อนหน้าตา

10. Lab 1: สร้างโครงสร้างบทความสั้น

ชื่อ Lab: โครงสร้างบทความพื้นฐาน เป้าหมาย: ใช้ h1 และ p ให้ตรงบทบาทของเนื้อหา โจทย์: ใน <main> ให้สร้าง h1 ข้อความ "คู่มือ HTML สำหรับผู้เริ่มต้น" และสร้าง p จำนวน 2 ย่อหน้าตามข้อความที่กำหนด เงื่อนไข: ต้องมี h1 เพียง 1 ตัว และ p 2 ตัว สิ่งที่ระบบควรตรวจ: selector count + text content แนวทางการคิด: วางหัวข้อหลักก่อน จากนั้นใส่ย่อหน้าอธิบายแยกเป็นคนละ p เฉลยตัวอย่าง: ดูได้ในส่วนเฉลยหลังผ่านทุก check

10. Lab 2: เพิ่มหัวข้อย่อยและข้อความเน้น

ชื่อ Lab: หัวข้อย่อยและการเน้นความหมาย เป้าหมาย: ใช้ h2, strong และ em ให้เหมาะกับบริบท โจทย์: เพิ่ม h2 ข้อความ "กฎสำคัญของบทนี้" และเพิ่ม p ที่มี strong คำว่า "ความหมาย" กับ em คำว่า "ลำดับชั้น" เงื่อนไข: h2 ต้องอยู่หลัง h1 และต้องมี strong/em อย่างน้อยอย่างละ 1 ตัว สิ่งที่ระบบควรตรวจ: selector exists + text content แนวทางการคิด: วางหัวข้อย่อยก่อน แล้วแทรก strong/em ในจุดที่ต้องการเน้นจริง เฉลยตัวอย่าง: ดูได้ในส่วนเฉลยหลังผ่านทุก check

10. Lab 3: แก้บทความที่ใช้แท็กผิดความหมาย

ชื่อ Lab: ซ่อมโครงสร้างจากโค้ดที่ผิดความหมาย เป้าหมาย: แก้โค้ดที่ใช้ br แทน paragraph และใช้ heading ผิดลำดับ โจทย์: เปลี่ยน h3 ให้เป็น h2 ที่เหมาะสม, ลบ br และแยกเนื้อหาเป็น p ให้ถูกต้อง เงื่อนไข: ต้องไม่มี h3 และ br ภายใน main, ต้องมี h1 1 ตัว, h2 2 ตัว, p 3 ตัว สิ่งที่ระบบควรตรวจ: selector count + source text + browser runtime แนวทางการคิด: แก้โครงสร้างลำดับชั้นก่อน แล้วค่อยแก้ข้อความให้สื่อความหมาย เฉลยตัวอย่าง: ดูได้ในส่วนเฉลยหลังผ่านทุก check

10. Lab 4: เพิ่มหัวข้อย่อยหลายระดับในบทความ

ชื่อ Lab: จัดลำดับหัวข้อในบทความ เป้าหมาย: ใช้ h1, h2 และ h3 ให้เรียงตามลำดับชั้นของเนื้อหา โจทย์: ใน article ให้คง h1 ข้อความ "การจัดโครงสร้างเนื้อหา HTML" ไว้ แล้วเพิ่ม h2 ข้อความ "หัวข้อหลักของบท" และ h3 ข้อความ "รายละเอียดของหัวข้อหลัก" เงื่อนไข: ต้องมี h1 1 ตัว, h2 1 ตัว, h3 1 ตัว และลำดับใน DOM ต้องเป็น h1 > h2 > h3 สิ่งที่ระบบควรตรวจ: selector count + browser runtime แนวทางการคิด: เริ่มจากหัวข้อใหญ่สุดก่อน แล้วค่อยเพิ่มหัวข้อย่อยลงมาตามลำดับ เฉลยตัวอย่าง: ดูได้ในส่วนเฉลยหลังผ่านทุก check

10. Lab 5: เพิ่มย่อหน้าใต้หัวข้อย่อยให้สัมพันธ์กัน

ชื่อ Lab: หัวข้อย่อยกับย่อหน้าอธิบาย เป้าหมาย: ใช้ h2 และ p ให้สัมพันธ์กันในเชิงความหมาย โจทย์: ใน section ให้สร้าง h1 ข้อความ "Semantic HTML" จากนั้นเพิ่ม h2 ข้อความ "เหตุผลที่ควรใช้แท็กให้ถูกต้อง" และ p ข้อความ "แท็กที่เหมาะสมช่วยให้โครงสร้างเนื้อหาอ่านง่ายขึ้น" เงื่อนไข: ต้องมี h1 1 ตัว, h2 1 ตัว, p 1 ตัว และ p ต้องอยู่หลัง h2 สิ่งที่ระบบควรตรวจ: selector count + text content + browser runtime แนวทางการคิด: เมื่อมีหัวข้อย่อยแล้ว ควรตามด้วยย่อหน้าที่อธิบายหัวข้อนั้น เฉลยตัวอย่าง: ดูได้ในส่วนเฉลยหลังผ่านทุก check

10. Lab 6: ซ่อมบทความที่ใช้ heading กระโดดลำดับ

ชื่อ Lab: แก้ heading hierarchy ที่ผิดลำดับ เป้าหมาย: ซ่อมโครงสร้าง heading ให้เป็นลำดับที่สมเหตุสมผล โจทย์: จาก starter code ให้แก้โค้ดใน article โดยเปลี่ยน h4 ให้เป็น h2 และเพิ่ม p ข้อความ "หัวข้อย่อยควรอยู่ใต้หัวข้อที่ใหญ่กว่า" เงื่อนไข: ต้องไม่มี h4 ภายใน article, ต้องมี h1 1 ตัว, h2 1 ตัว, p 1 ตัว และลำดับต้องเป็น h1 > h2 > p สิ่งที่ระบบควรตรวจ: selector count + source text + browser runtime แนวทางการคิด: อย่าดูแค่ชื่อแท็ก แต่ต้องดูบทบาทของข้อความว่าเป็นหัวข้อหลัก หัวข้อรอง หรือเนื้อหาอธิบาย เฉลยตัวอย่าง: ดูได้ในส่วนเฉลยหลังผ่านทุก check

11. แนวทางออกแบบโจทย์ให้เหมาะกับระบบ Test

• กำหนดแท็กและจำนวนแท็กให้ชัด เช่น h1 = 1, p = 2 เพื่อตรวจด้วยการนับตัวเลือก (selector count) ได้ตรง
• ใช้การตรวจว่ามีตัวเลือกอยู่จริง (selector exists) เพื่อตรวจองค์ประกอบสำคัญ เช่น article h2, main strong
• ใช้การตรวจข้อความเนื้อหา (text content) ผ่านสคริปต์เบราว์เซอร์ (browser script) เมื่อต้องการความแม่นยำ
• ใช้การตรวจข้อความต้นฉบับ (source text) สำหรับเงื่อนไขที่อยากล็อกโค้ดบางส่วน เช่น ต้องมี <h2> หรือคำเฉพาะ
• หลีกเลี่ยงโจทย์เปิดกว้างเกินไปที่มีคำตอบหลายแท็กจนระบบตรวจยาก

12. ภาพประกอบที่ควรมี

ภาพที่แนะนำสำหรับบทเรียนนี้: - ภาพขนาดกลางแสดงลำดับชั้น h1-h2-p (เหมาะกับเปิดบท) - ภาพขนาดเล็กเปรียบเทียบ heading กับ paragraph (เหมาะกับช่วงเปรียบเทียบ) ตัวอย่าง Prompt ภาษาอังกฤษสำหรับสร้างภาพ: 1) "clean web-friendly diagram showing HTML heading hierarchy with paragraphs" 2) "compact educational visual of article structure using h1 h2 and p tags" 3) "minimal beginner friendly diagram for semantic text structure in HTML"