Fundamentals
Heading, Paragraph, Text (หัวเรื่อง ย่อหน้า และข้อความพื้นฐานใน HTML)
เขียนและจัดลำดับชั้นเนื้อหาด้วย h1-h6, แบ่งย่อหน้าด้วย p, และเน้นข้อความด้วย strong และ em เพื่อสื่อความหมายอย่างถูกต้อง
1) The Problem: ทำไมหน้าเว็บถึงห้ามเลือกแท็กเพราะ "ขนาดตัวอักษร"
หนึ่งในข้อผิดพลาดที่พบบ่อยที่สุดของผู้เริ่มต้น คือการเลือกแท็ก HTML จาก **"หน้าตาและขนาดตัวอักษร"** ที่เห็นบนหน้าจอ เช่น อยากได้ตัวหนังสือขนาดใหญ่จึงเลือก `<h1>` หรืออยากเว้นวรรคบรรทัดจึงกดใส่ `<br><br>` รัวๆ พฤติกรรมนี้ก่อให้เกิดปัญหาตามมามากมาย: - **Screen Reader สับสน**: ผู้พิการทางสายตาพึ่งพาโปรแกรมช่วยอ่านที่ใช้ Heading ในการนำทางข้ามหัวข้อ หากเราเลือก `<h1>` มั่วซั่ว โครงสร้างบทความจะพังทลายทันที - **Search Engine (SEO) หลงทาง**: Google และ Search Engine ใช้ลำดับ Heading เพื่อจัดทำสารบัญของหน้าเว็บและสรุปใจความสำคัญ - **CSS ดูแลยาก**: หากเราใช้แท็กผิดความหมาย วันข้างหน้าเมื่อต้องการปรับดีไซน์ด้วย CSS กฎการจัดสไตล์จะขัดแย้งกันเองจนแก้ไขได้ยากมาก หลักการสำคัญที่สุดของเว็บคือ **"ความหมาย (Semantic) ต้องมาก่อนรูปลักษณ์ (Presentation)"** เสมอ
- Heading คือสารบัญ ไม่ใช่ขนาดฟอนต์: เลือก h1-h6 ตามระดับความสำคัญของหัวข้อ ไม่ใช่เลือกเพราะอยากได้ตัวอักษรตัวโต
- Paragraph คือก้อนความคิด: ใช้ <p> ครอบเนื้อหาที่เป็นย่อหน้า เพื่อให้เบราว์เซอร์จัดการระยะห่างและความหมายได้ถูกต้อง
- รูปลักษณ์เป็นหน้าที่ของ CSS: หากต้องการให้ตัวหนังสือใหญ่ เล็ก หนา หรือบาง ให้ใช้สไตล์ CSS จัดการ ไม่ใช่เปลี่ยนแท็ก HTML ผิดประเภท
2) Heading Hierarchy: บันได 6 ขั้นแห่งความหมาย (h1 ถึง h6)
HTML มีแท็กหัวเรื่องทั้งหมด 6 ระดับ ได้แก่ `<h1>` ถึง `<h6>` โดยเรียงตามระดับความสำคัญจากมากที่สุดไปหาน้อยที่สุด:
ตัวอย่างการจัดลำดับชั้นหัวเรื่องในบทความ h1 ➔ h2 ➔ h3 อย่างเป็นระบบ
- <h1> — หัวข้อหลักสูงสุดของหน้าเว็บ: ควรมีเพียง 1 หัวข้อต่อหน้า เพื่อบอกว่าเอกสารนี้มีใจความเกี่ยวกับอะไร
- <h2> — หัวข้อใหญ่ประจำแต่ละส่วน (Section): ใช้แบ่งตอนหลักๆ ของเนื้อหาในบทความ
- <h3> ถึง <h6> — หัวข้อย่อยตามลำดับชั้น: ใช้แตกประเด็นย่อยภายใต้หัวข้อใหญ่ ห้ามกระโดดข้ามระดับ (เช่น จาก h1 ข้ามไป h4 ทันที)
3) Paragraphs & Breaks: ย่อหน้า (<p>) vs ขึ้นบรรทัดใหม่ (<br>) vs เส้นคั่น (<hr>)
เมื่อมีหัวข้อแล้ว เนื้อหาบรรยายจะถูกแบ่งออกเป็นช่วงความคิด โดยมี 3 แท็กสำคัญที่ทำหน้าที่ต่างกัน:
| แท็ก | บทบาทหน้าที่ | กรณีการใช้งานที่ถูกต้อง | ข้อควรระวัง |
|---|---|---|---|
| <p> | Paragraph (ย่อหน้า) | เนื้อหาบรรยาย 1 ช่วงความคิดที่สมบูรณ์ | ห้ามนำ <p> ไปครอบแท็กหัวข้อ หรือวางแท็กบล็อกใหญ่ข้างใน |
| <br> | Line Break (ขึ้นบรรทัดใหม่) | ตัดบรรทัดในข้อความเดียวกัน เช่น ที่อยู่ หรือบทกวี | ห้ามใช้ <br><br> เพื่อเว้นวรรคช่องว่างระหว่างย่อหน้า (ใช้ margin ใน CSS) |
| <hr> | Thematic Break (เส้นแบ่งช่วงตอน) | แบ่งการเปลี่ยนผ่านของประเด็นหรือฉากในบทความ | เป็นเส้นแนวนอนเชิงความหมาย ไม่ใช่แค่ของตกแต่งลายเส้น |
4) Text Emphasis: ความหมาย (<strong>, <em>) vs หน้าตา (<b>, <i>)
เมื่อต้องการเน้นข้อความในย่อหน้า HTML มีแท็ก 2 คู่ที่ดูเผินๆ เหมือนกัน แต่มีความหมายต่างกันอย่างสิ้นเชิง:
- <strong> (Important): บ่งบอกว่าข้อความนี้มีความสำคัญจริงจัง เช่น คำเตือนหรือข้อควรระวัง เบราว์เซอร์แสดงเป็นตัวหนา และ Screen Reader จะเน้นเสียงอย่างหนักแน่น
- <em> (Emphasized): บ่งบอกการเน้นน้ำเสียงในการอ่านเพื่อเปลี่ยนความหมายของประโยค เบราว์เซอร์แสดงเป็นตัวเอียง และ Screen Reader จะเปลี่ยนระดับเสียง
- <b> และ <i> (Stylistic Only): เป็นแท็กดั้งเดิมที่ทำตัวหนา (bold) หรือตัวเอียง (italic) โดยไม่มีน้ำหนักทางความหมาย แนะนำให้ใช้ CSS font-weight/font-style แทน
ตัวอย่างการเปลี่ยนความหมายด้วย <em>
ประโยค 'ฉันไม่ได้บอกว่าเขาขโมยเงิน' หากใส่ <em>ฉัน</em> จะหมายถึงคนอื่นเป็นคนบอก แต่หากใส่ <em>ขโมย</em> จะหมายถึงเขาอาจจะแค่ยืมไป การเน้นน้ำเสียงจึงเปลี่ยนความหมายของข้อความโดยสิ้นเชิง
5) Contrast & Anti-Patterns: ข้อผิดพลาดที่พบบ่อยในการจัดข้อความ
ลองเปรียบเทียบตัวอย่างโค้ดสองชุดนี้ ระหว่างการเขียนที่พึ่งพาแท็กตามหน้าตา กับการเขียนแบบ Semantic HTML ที่ถูกต้อง:
Presentation-First vs Semantic Heading Hierarchy
เปรียบเทียบการเลือกแท็กตามความเคยชินกับการจัดลำดับชั้นเนื้อหาตามมาตรฐาน
กระโดด h1 ➔ h3, ใช้ <br> แทนการแยก <p>, และวาง h2 ต่อท้าย h3 ทำลายลำดับชั้นสารบัญ
เรียง h1 ➔ h2 ➔ p อย่างเป็นธรรมชาติ สารบัญอ่านง่าย และ Screen Reader เข้าใจโครงสร้างทันที
- ห้ามกระโดดระดับหัวเรื่อง: การข้ามจาก h1 ไป h3 หรือ h4 ทำให้ระบบนำทางคิดว่ามีหัวข้อย่อยที่ขาดหายไป
- ห้ามใช้ br ซ้ำๆ เพื่อสร้างระยะห่าง: ให้ใช้แท็ก <p> และปล่อยให้ CSS margin จัดระยะห่างอย่างสม่ำเสมอ
- ความหมายมาก่อนเสมอ: เมื่อเลือกแท็กถูกประเภท การเขียน CSS ปรับแต่งรูปลักษณ์จะง่ายและเป็นระเบียบขึ้นมาก
6) Key Rules: 5 กฎเหล็กของการใช้แท็กข้อความใน HTML
กฎเหล็กสำหรับการจัดการข้อความและหัวเรื่อง
แนวทางปฏิบัติที่ต้องยึดถือเพื่อให้เอกสารเว็บเข้าถึงได้ง่ายและมีมาตรฐาน
<h1> มีได้เพียง 1 ตัวต่อหน้า
ใช้เป็นชื่อเรื่องหลักของหน้าเว็บ เพื่อให้ผู้ใช้และ Search Engine ระบุจุดประสงค์ของเอกสารได้ทันที
เรียงลำดับหัวข้อตามลำดับชั้น ไม่กระโดด
ไล่เรียงจาก h1 ➔ h2 ➔ h3 ➔ h4 อย่างเป็นระเบียบ ห้ามข้ามขั้นเพียงเพราะอยากได้ขนาดฟอนต์
แยกก้อนความคิดด้วย <p>
ทุกย่อหน้าต้องครอบด้วย <p> และห้ามใช้ <br><br> มาทดแทนการแบ่งย่อหน้า
ใช้ <strong> และ <em> ตามความหมายจริง
ใช้ strong สำหรับข้อมูลสำคัญ และ em สำหรับการเน้นเสียง อย่าใช้เพื่อตกแต่งให้ตัวหนาตัวเอียงเล่นๆ
ความหมาย (HTML) แยกจาก รูปลักษณ์ (CSS)
เลือกแท็กจากหน้าที่ของเนื้อหา ส่วนเรื่องขนาด สี หรือฟอนต์ ให้ส่งต่อให้ CSS จัดการ
7) Practice: ฝึกจัดลำดับหัวข้อและย่อหน้าจริง (Lab 1 ถึง 6)
แบบฝึกหัด 6 ระดับต่อไปนี้ค่อยๆ ปูพื้นฐานตั้งแต่การสร้างบทความพื้นฐาน การเน้นข้อความ ไปจนถึงการซ่อมแซมลำดับชั้นหัวเรื่องที่ผิดพลาด เพื่อให้คุณมั่นใจในการเขียนโครงสร้างจริง
8) Checkpoint & Next Steps: ตรวจสอบความเข้าใจและก้าวต่อไป
ทดสอบความเข้าใจเกี่ยวกับการเลือกแท็กข้อความ ลำดับชั้นของ heading และบทบาทของ strong/em ก่อนก้าวสู่บทถัดไป
ตรวจความเข้าใจ: การจัดลำดับข้อความและหัวเรื่อง
ตอบคำถามเพื่อเช็กความแม่นยำในการเลือกแท็กข้อความตามความหมาย
ข้อใดคือเกณฑ์ที่ถูกต้องที่สุดในการเลือกใช้แท็ก <h2> บนหน้าเว็บ?
หากคุณต้องการแบ่งเนื้อหาออกเป็น 2 ย่อหน้า วิธีการเขียนใดถูกต้องตามหลัก Semantic HTML?
แท็กที่ใช้สำหรับเน้น 'ความสำคัญอย่างยิ่ง' (Importance) ของข้อความบนหน้าเว็บคือแท็กใด?
ตอบเป็นชื่อแท็กภาษาอังกฤษ เช่น strong หรือ em
- Heading คือสารบัญ: h1 ➔ h2 ➔ h3 ไล่เรียงตามลำดับชั้นความสำคัญ ห้ามกระโดดข้ามขั้น
- Paragraph คือก้อนความคิด: ใช้ <p> แยกย่อหน้า และใช้ CSS ดูแลระยะห่าง ไม่ใช้ <br><br>
- ก้าวต่อไป: ในบทถัดไป 'Comments and Code Formatting' เราจะมาเรียนรู้การจัดระเบียบโค้ด HTML ให้สะอาด อ่านง่าย และร่วมงานกับทีมได้อย่างราบรื่น (สมมติฐานความรู้ก่อนหน้า: เข้าใจ heading hierarchy และ paragraph text basics จากบทเรียนนี้)