Fundamentals
HTML Document Structure (โครงสร้างเอกสาร HTML)
เขียนโครงสร้างมาตรฐานของไฟล์ HTML ตั้งแต่การประกาศ <!DOCTYPE html>, แท็ก <html>, <head> ไปจนถึง <body> เพื่อสร้างหน้าเว็บที่ถูกต้องตามมาตรฐาน
1) The Problem: เมื่อเอกสารไม่มีโครงสร้างมาตรฐาน (Document Skeleton)
ลองนึกภาพว่าคุณสร้างไฟล์ `.html` แล้วพิมพ์เพียง `<h1>สวัสดี</h1>` โดยไม่มีโครงสร้างอื่นครอบไว้เลย เบราว์เซอร์สมัยใหม่อาจพยายาม "เดาใจ" และแสดงข้อความนั้นขึ้นมาได้ แต่เบื้องหลังจะเกิดปัญหาตามมามากมาย: - **เสี่ยงต่อ Quirks Mode**: หากไม่มีการประกาศชนิดเอกสาร เบราว์เซอร์อาจถอยหลังเข้าสู่โหมดจำลองความเข้ากันได้แบบโบราณ ทำให้การจัดสไตล์ CSS และขนาดกล่องทำงานผิดเพี้ยน - **อักขระภาษาไทยเพี้ยน**: หากไม่ระบุการเข้ารหัสภาษา (`UTF-8`) ตัวอักษรไทยอาจกลายเป็นตัวยึกยือ (Mojibake) - **แท็บและ Search Engine สับสน**: หากไม่มีการตั้งชื่อหน้าเว็บ (`<title>`) แท็บบนเบราว์เซอร์จะแสดงเป็นชื่อไฟล์หรือ URL ยาวเหยียด และเครื่องมือค้นหาจะไม่เข้าใจชื่อของเอกสาร เพื่อให้หน้าเว็บแสดงผลอย่างเสถียร สวยงามตรงกันทุกเบราว์เซอร์ และรองรับการเติบโตต่อไป จึงต้องมี **"กระดูกสันหลัง" (Document Skeleton)** ที่ได้มาตรฐานกำกับไว้เสมอ
- ไร้ DOCTYPE เสี่ยง Quirks Mode: เบราว์เซอร์อาจใช้กฎเรนเดอร์รุ่นเก่า ทำให้ CSS ทำงานผิดเพี้ยน
- ไร้ Metadata ตัวอักษรเพี้ยน: หากไม่กำหนด UTF-8 อักขระภาษาไทยและสัญลักษณ์พิเศษอาจแสดงผลผิดพลาด
- ไร้ Title แท็บไร้ความหมาย: ผู้ใช้และ Search Engine แยกไม่ออกว่าหน้านี้มีจุดประสงค์อะไร
2) Core Architecture: ผ่าโครงสร้าง 4 เสาหลัก (DOCTYPE, html, head, body)
เอกสาร HTML ที่สมบูรณ์ทุกหน้าในโลก ประกอบด้วย 4 เสาหลักสำคัญที่ซ้อนกันเป็นลำดับชั้น (Hierarchy) อย่างเป็นระเบียบ:
แม่แบบโครงสร้างเอกสาร HTML5 มาตรฐานที่กระชับและถูกต้องครบถ้วน
- 1. <!DOCTYPE html> — ประกาศที่บรรทัดแรกสุด เพื่อบอกเบราว์เซอร์ให้ประมวลผลตามมาตรฐาน HTML5 ล่าสุด (Standards Mode)
- 2. <html lang="th"> — Root Element (รากของเอกสาร) ที่ครอบทุกส่วนของเอกสารไว้ และระบุภาษาหลักเป็นภาษาไทย
- 3. <head> — ห้องควบคุมข้อมูลเมตา (Metadata) รวบรวมข้อมูลเกี่ยวกับเอกสาร เช่น ชุดอักขระ และชื่อแท็บ (ผู้ใช้ไม่เห็นบนหน้าเว็บโดยตรง)
- 4. <body> — ผืนผ้าใบเนื้อหาจริง บรรจุทุกแท็กที่ต้องการให้ผู้ใช้งานมองเห็นและมีปฏิสัมพันธ์บนหน้าจอ
3) Head vs Body: ห้องควบคุมเบื้องหลัง vs เวทีที่ผู้ชมมองเห็น
จุดสำคัญที่ผู้เริ่มต้นมักสับสนคือ "แท็กใดควรวางใน `<head>` และแท็กใดควรวางใน `<body>`" หลักการแยกหน้าที่ตามกลไกของเบราว์เซอร์: - **<head> เก็บข้อมูลเมตาและการตั้งค่าเบื้องหลัง**: เช่น การเข้ารหัสภาษา (charset), ชื่อแท็บ (title), และการเชื่อมไฟล์สไตล์ ผู้ใช้ไม่ได้มองเห็นแท็กเหล่านี้บนหน้าเอกสารโดยตรง แต่เบราว์เซอร์ใช้ควบคุมการเรนเดอร์ - **<body> เก็บเนื้อหาหน้าฉากที่มองเห็นได้ทั้งหมด**: ทุกข้อความ หัวข้อ ย่อหน้า รูปภาพ และปุ่มกดที่ต้องการให้ผู้ใช้มองเห็นและมีปฏิสัมพันธ์ *(เปรียบเทียบได้กับทีมงานควบคุมเบื้องหลังกับเนื้อหาที่แสดงหน้าเวที)*
| ประเด็นเปรียบเทียบ | ส่วนหัวเอกสาร (<head>) | เนื้อหาเอกสาร (<body>) |
|---|---|---|
| บทบาทหน้าที่ | เก็บข้อมูลกำกับ (Metadata) และการตั้งค่าของเอกสาร | เก็บเนื้อหาและองค์ประกอบที่แสดงผลจริง |
| ปรากฏบนหน้าจอเว็บ? | ไม่ปรากฏบนหน้าจอ (ปรากฏเฉพาะที่แท็บเบราว์เซอร์) | ปรากฏบนหน้าจอเว็บทั้งหมด |
| ตัวอย่างแท็กที่ถูกต้อง | <meta>, <title>, <link>, <style>, <script> | <h1>-<h6>, <p>, <a>, <img>, <button>, <section> |
| ข้อผิดพลาดที่ห้ามทำ | ห้ามนำแท็กแสดงผล เช่น <h1> หรือ <p> มาใส่ใน <head> | ห้ามนำแท็ก <meta> หรือ <title> มาใส่ใน <body> |
4) Essential Metadata: การตั้งชื่อแท็บ (<title>) และชุดภาษา (<meta charset="UTF-8">)
ภายในส่วนหัวเอกสาร `<head>` มี 2 องค์ประกอบพื้นฐานที่ทุกหน้าเว็บจำเป็นต้องมีเสมอ:
- <meta charset="UTF-8">: กำหนดการเข้ารหัสอักขระเป็น UTF-8 รองรับตัวอักษรทุกภาษาในโลก รวมถึงภาษาไทยและ Emoji ป้องกันข้อความกลายเป็นตัวยึกยือ
- <title>: กำหนดชื่อเรื่องของหน้าเว็บ ปรากฏบนแท็บของเบราว์เซอร์ ใช้เป็นชื่อ Bookmark และเป็นหัวข้อลิงก์บนผลการค้นหาของ Search Engine
ทำไมต้องกำหนด lang="th" ในแท็ก <html>?
แอตทริบิวต์ lang="th" บอกให้เบราว์เซอร์และ Screen Reader ทราบว่าเนื้อหาหลักเป็นภาษาไทย ช่วยให้เครื่องมือช่วยอ่านออกเสียงได้อย่างถูกต้อง และช่วยให้เบราว์เซอร์เลือกฟอนต์ภาษาไทยที่เหมาะสมในการแสดงผล
5) Contrast & Anti-Patterns: ข้อผิดพลาดที่พบบ่อยของมือใหม่
ลองเปรียบเทียบตัวอย่างโค้ดสองชุดนี้ ระหว่างโค้ดที่วางแท็กผิดตำแหน่งจนโครงสร้างพัง กับโครงสร้างที่ถูกต้องตามมาตรฐาน HTML5:
Misplaced Tags vs Standard HTML5 Skeleton
เปรียบเทียบผลกระทบของการนำแท็กแสดงผลไปวางใน <head> กับการจัดวางแยกส่วนอย่างถูกต้อง
ไม่มี <!DOCTYPE html>, วาง <h1> และ <p> ไว้ใน <head> ทำให้เบราว์เซอร์ปิด head ก่อนเวลาอันควร
ประกาศ <!DOCTYPE html>, <head> มีเฉพาะ meta/title, และเนื้อหาทั้งหมดอยู่ใน <body> อย่างเป็นระเบียบ
- เมื่อเบราว์เซอร์พบแท็กเนื้อหา เช่น <h1> ภายใน <head> เบราว์เซอร์จะตัดจบและบังคับปิด <head> ทันที
- ข้อมูลเมตาหรือลิงก์สไตล์ที่เขียนไว้ด้านล่างแท็ก <h1> อาจหลุดออกไปนอก <head> และไม่ถูกประมวลผล
- การแยก <head> สำหรับข้อมูลเมตา และ <body> สำหรับเนื้อหา เป็นมาตรฐานสากลที่ต้องรักษาไว้เสมอ
6) Key Rules: 5 กฎเหล็กของโครงสร้างเอกสาร HTML
กฎเหล็กเพื่อโครงสร้างเอกสารที่ถูกต้องและแข็งแกร่ง
จดจำและปฏิบัติตาม 5 กฎนี้ทุกครั้งที่เริ่มต้นสร้างไฟล์ HTML ใหม่
<!DOCTYPE html> บรรทัดแรกเสมอ
ต้องอยู่บนสุดของไฟล์ ก่อนแท็ก <html> เสมอ เพื่อเปิดใช้งาน Standards Mode
<html> คือ Root Element เพียงหนึ่งเดียว
ครอบคลุมทั้งเอกสาร และควรกำหนดภาษาหลักผ่านแอตทริบิวต์ lang เช่น lang="th"
<head> เก็บเฉพาะข้อมูลเมตาเบื้องหลัง
มีไว้สำหรับ <meta>, <title>, <link> ห้ามนำแท็กแสดงผลใดๆ มาใส่ในส่วนนี้เด็ดขาด
<body> เก็บเนื้อหาที่ต้องการให้มองเห็นทั้งหมด
ทุกข้อความ หัวข้อ ย่อหน้า รูปภาพ และปุ่มกด ต้องอยู่ภายใน <body> เท่านั้น
<title> ต้องมี 1 ตัวและอยู่ใน <head>
ตั้งชื่อเรื่องของเอกสารให้สื่อความหมายชัดเจน เพื่อชื่อแท็บและผลการค้นหาบน Search Engine
7) Practice: ฝึกสร้างและปรับแต่งโครงสร้างเอกสารจริง
สาม Lab ต่อไปนี้ค่อย ๆ ถอดตัวช่วยออกทีละระดับ: **ทำตาม** (Lab 1 ประกอบโครงสร้างพื้นฐานให้ครบตามสเปก) → **ปรับ** (Lab 2 เติมข้อมูลเมตา charset และ title ให้ถูกต้อง) → **แก้เอง** (Lab 3 ซ่อมแซมเอกสารที่วางแท็กแสดงผลผิดตำแหน่งใน head) ลองสังเกตการทำงานของเบราว์เซอร์ในแต่ละขั้นตอน เพื่อสร้างความมั่นใจก่อนนำไปสร้างหน้าเว็บจริง
8) Checkpoint & Next Steps: ตรวจสอบความเข้าใจและก้าวต่อไป
ทบทวนความเข้าใจเกี่ยวกับโครงสร้างเอกสาร HTML บทบาทของ DOCTYPE, head, body และ metadata ก่อนก้าวสู่บทถัดไป
ตรวจความเข้าใจ: โครงสร้างเอกสาร HTML
ตอบคำถามเพื่อเช็กความแม่นยำเกี่ยวกับโครงสร้างมาตรฐานของไฟล์ HTML
เหตุผลสำคัญที่สุดในการใส่ `<!DOCTYPE html>` ไว้บรรทัดแรกสุดของไฟล์ HTML คืออะไร?
หากคุณต้องการใส่แท็กหัวข้อ `<h1>ยินดีต้อนรับ</h1>` คุณควรวางแท็กนี้ไว้ในส่วนใดของเอกสาร?
แท็กที่ใช้สำหรับกำหนด 'ชื่อเรื่องของหน้าเว็บ' ซึ่งจะแสดงผลบนแท็บบนเบราว์เซอร์คือแท็กใด?
ตอบเป็นชื่อแท็กสั้นๆ ภาษาอังกฤษ เช่น title หรือ h1
- 4 เสาหลัก: <!DOCTYPE html>, <html>, <head>, และ <body> ต้องเรียงลำดับชั้นให้ถูกต้องเสมอ
- เบื้องหลัง vs หน้าฉาก: <head> เก็บข้อมูลเมตาและการตั้งค่า, <body> เก็บเนื้อหาที่มองเห็นได้
- ก้าวต่อไป: ในบทถัดไป 'Tags, Elements, Attributes' เราจะมาเจาะลึกการแยกแยะชิ้นส่วนพื้นฐานของ HTML และการใช้งานแอตทริบิวต์ (สมมติฐานความรู้ก่อนหน้า: เข้าใจโครงสร้างเอกสารมาตรฐานและบทบาทของ HTML จากบทเรียนนี้)