HTML
Fundamentals
HTML Document Structure (โครงสร้างเอกสาร HTML)
บทเรียนนี้สอนโครงสร้างพื้นฐานของไฟล์ HTML ตั้งแต่ภาพรวมจนถึงการลงมือแก้เอกสารจริง พร้อม Lab 3 ระดับที่ตรวจผลอัตโนมัติได้ชัดเจนใน Playground
1. หัวข้อนี้คืออะไร
โครงสร้างเอกสาร (Document Structure) คือรูปแบบพื้นฐานที่เบราว์เซอร์ (Browser) คาดหวังเมื่อเปิดไฟล์ HTML หนึ่งไฟล์ ถ้าโครงสร้างถูกต้อง เบราว์เซอร์จะตีความได้ง่าย แสดงผลได้ตรง และรองรับการต่อยอดในอนาคต เช่น การใส่สไตล์ (CSS) และการโต้ตอบ (JavaScript) ส่วนหลักที่ต้องรู้ในบทนี้คือ: - การประกาศประเภทเอกสาร (<!DOCTYPE html>) - รากเอกสาร (html) - ส่วนหัวเอกสาร (head) - เนื้อหาเอกสาร (body) - ชื่อหน้าในแท็บ (title) - ข้อมูลเมตาเบื้องต้น (meta)
2. ทำไมหัวข้อนี้สำคัญ
- ช่วยให้เอกสารถูกต้องตามมาตรฐาน (Standard) และอ่านง่ายทั้งคนและเครื่อง
- ช่วยให้เบราว์เซอร์ (Browser) ตีความเอกสารได้ถูกต้องตั้งแต่บรรทัดแรก
- เป็นพื้นฐานก่อนสร้างหน้าเว็บจริง ไม่ว่าจะเป็นหน้าเล็กหรือเว็บแอปขนาดใหญ่
- ลดบั๊กที่เกิดจากการวางแท็กผิดตำแหน่ง เช่น เอาแท็กที่แสดงผลไปไว้ในส่วนหัวเอกสาร (head)
3. ตัวอย่างจากชีวิตจริง
ลองนึกถึงเอกสารกระดาษหนึ่งฉบับ: - ปกและข้อมูลบรรณานุกรม เปรียบเหมือนส่วนหัวเอกสาร (head) - ชื่อเรื่องบนเอกสาร เปรียบกับชื่อหน้า (title) - เนื้อหาที่ผู้อ่านเห็นจริง เปรียบกับเนื้อหาเอกสาร (body) ดังนั้น ส่วนหัวเอกสาร (head) เอาไว้บอกข้อมูล "เกี่ยวกับเอกสาร" ส่วนเนื้อหาเอกสาร (body) เอาไว้ใส่สิ่งที่ผู้ใช้เห็นบนหน้าเว็บ
4. แนวคิดหลักที่ต้องเข้าใจ
- `<!DOCTYPE html>` คือการบอกชนิดเอกสารว่าใช้ HTML สมัยใหม่
- `<html>` คือรากของเอกสาร (root element) ที่ครอบทุกส่วน
- `<head>` ใช้เก็บข้อมูลเมตา (metadata) เช่น charset, title, viewport
- `<body>` ใช้เก็บเนื้อหาที่แสดงจริงบนหน้าเว็บ
- `<title>` ใช้ตั้งชื่อแท็บของหน้า (ไม่ใช่หัวข้อที่เห็นใน body)
- `<meta charset="UTF-8">` กำหนดชุดอักขระให้รองรับภาษาไทยได้ถูกต้อง
5. การทำงานทีละขั้นตอน
- 1) เบราว์เซอร์อ่าน `<!DOCTYPE html>` เพื่อเข้าโหมดมาตรฐาน (Standards Mode)
- 2) เบราว์เซอร์อ่านแท็กราก `<html>` เพื่อเริ่มต้นโครงเอกสาร
- 3) เบราว์เซอร์อ่านข้อมูลใน `<head>` เช่น `meta` และ `title` (ผู้ใช้ไม่เห็นเป็นเนื้อหาในหน้า)
- 4) เบราว์เซอร์อ่านและแสดงสิ่งที่อยู่ใน `<body>` เช่น heading, paragraph, image, button
- 5) ผู้ใช้เห็นเฉพาะเนื้อหาใน `<body>` แต่ผลจาก `<head>` ยังมีผล เช่น ชื่อแท็บหรือการเข้ารหัสภาษา
6. ตัวอย่างเชิงเทคนิค / โค้ด
คำอธิบายทีละบรรทัด: - `<!DOCTYPE html>`: บอกชนิดเอกสารว่าเป็น HTML - `<html lang="th">`: จุดเริ่มต้นเอกสาร และกำหนดภาษาหลักเป็นไทย - `<head>`: ข้อมูลเมตาที่ไม่แสดงเป็นเนื้อหาหลัก - `<meta charset="UTF-8">`: กำหนดการเข้ารหัสอักขระ - `<title>...`: ชื่อแท็บของหน้า - `<body>`: เนื้อหาที่แสดงบนหน้าเว็บจริง
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8" />
<title>โครงสร้างเอกสาร HTML</title>
</head>
<body>
<h1>สวัสดี HTML</h1>
<p>นี่คือโครงสร้างหน้าเว็บพื้นฐาน</p>
</body>
</html>7. จุดที่ผู้เริ่มต้นมักสับสน
- คิดว่าส่วนหัวเอกสาร (head) เป็นเนื้อหาที่ผู้ใช้จะเห็นบนหน้า
- ลืมใส่ชื่อแท็บ (title) ทำให้แท็บเว็บไม่สื่อความหมาย
- วางแท็กแสดงผล เช่น `<h1>` หรือ `<p>` ไว้ในส่วนหัวเอกสาร (head)
- ไม่เข้าใจบทบาทของ `<!DOCTYPE html>` และเผลอลบออก
8. เปรียบเทียบกับสิ่งที่ใกล้เคียง
สรุปสั้น: ข้อมูลเมตา (Metadata) อยู่ในส่วนหัวเอกสาร (head) ส่วนเนื้อหาที่แสดงจริงอยู่ในเนื้อหาเอกสาร (body)
| หัวข้อ | ส่วนหัวเอกสาร (head) | เนื้อหาเอกสาร (body) |
|---|---|---|
| หน้าที่หลัก | เก็บข้อมูลเมตา (Metadata) | เก็บเนื้อหาที่ผู้ใช้เห็นจริง |
| ตัวอย่างแท็ก | meta, title, link, script (บางกรณี) | h1, p, img, a, section, article |
| ผู้ใช้เห็นบนหน้า? | ไม่เห็นโดยตรง | เห็นโดยตรง |
9. สรุปท้ายบทแบบจำง่าย
- `<!DOCTYPE html>` มาก่อนเสมอ
- `<html>` ครอบทั้งเอกสาร
- `<head>` = ข้อมูลเกี่ยวกับหน้า (ไม่ใช่เนื้อหาที่เห็น)
- `<body>` = เนื้อหาที่ผู้ใช้เห็นบนหน้าเว็บ
- `<title>` อยู่ใน `head` และควรมีเพียงหนึ่งเดียว
- `<meta charset="UTF-8">` ช่วยให้ภาษาไทยแสดงผลถูกต้อง
10. Lab 1: สร้างโครงสร้าง HTML ขั้นต่ำ
ชื่อ Lab: สร้างโครงสร้างขั้นต่ำ (Minimum Document Skeleton) เป้าหมาย: สร้างเอกสาร HTML ที่มีโครงสร้างพื้นฐานครบ โจทย์: เติมไฟล์ให้มี doctype, html, head, title และ body เงื่อนไข: ต้องมี title เพียง 1 ตัว และห้ามลบ doctype สิ่งที่ระบบควรตรวจ: source text + selector exists + selector count แนวทางการคิด: สร้างโครงจากนอกเข้าใน (doctype -> html -> head/body) เฉลยตัวอย่าง: ดูได้ในแท็บโค้ดหลังผ่านทุก check
10. Lab 2: เพิ่มข้อมูลพื้นฐานในส่วนหัวเอกสาร (head)
ชื่อ Lab: เติมข้อมูลเมตาพื้นฐาน (Basic Metadata Setup) เป้าหมาย: ใส่ `meta charset` และ `title` ให้ถูกต้อง โจทย์: เพิ่ม `<meta charset="UTF-8">` และตั้ง `<title>` เป็น "โครงสร้างเอกสาร HTML" เงื่อนไข: ต้องอยู่ใน `<head>` และมี `title` เพียง 1 ตัว สิ่งที่ระบบควรตรวจ: source text + attribute value + browser runtime แนวทางการคิด: เริ่มจากตรวจว่าข้อมูลที่เบราว์เซอร์ต้องใช้ถูกวางใน head แล้วหรือไม่ เฉลยตัวอย่าง: ดูได้ในแท็บโค้ดหลังผ่านทุก check
10. Lab 3: แก้โครงสร้างเอกสารที่เขียนผิด
ชื่อ Lab: ซ่อมโครงสร้างเอกสาร (Structure Repair) เป้าหมาย: ย้ายแท็กแสดงผลออกจาก head ไปไว้ใน body ให้ถูกต้อง โจทย์: ตอนนี้มี `<h1>` และ `<p>` วางผิดที่ใน `<head>` ให้ย้ายไปไว้ใน `<body>` เงื่อนไข: head ต้องเหลือเฉพาะเมตาและ title, body ต้องมี h1 และ p ตามข้อความที่กำหนด สิ่งที่ระบบควรตรวจ: selector exists/count + text content + browser runtime แนวทางการคิด: แยกว่าแท็กไหนเป็นข้อมูลเมตา และแท็กไหนเป็นเนื้อหาที่ผู้ใช้เห็น เฉลยตัวอย่าง: ดูได้ในแท็บโค้ดหลังผ่านทุก check
11. แนวทางออกแบบโจทย์ให้เหมาะกับระบบ Test
- ระบุแท็กและตำแหน่งให้ชัดเจน เช่น `head > title` หรือ `body h1`
- กำหนดข้อความเป้าหมายให้ตายตัวเมื่อจำเป็นต้องตรวจ text content
- ใช้ `selector-count` ล็อกจำนวนแท็กเพื่อกันคำตอบแบบลัด
- ใช้ `text-includes` เพื่อตรวจ source text ที่ต้องมีแน่นอน เช่น doctype
- ใช้ `browser-script` เมื่อต้องตรวจค่า attribute แบบแม่นยำ เช่น charset = UTF-8
- หลีกเลี่ยงโจทย์กว้างเกินไป เช่น 'จัดโครงสร้างให้เหมาะสม' โดยไม่มีเงื่อนไขชัดเจน
12. ภาพประกอบที่ควรมี
ข้อเสนอภาพประกอบสำหรับบทนี้: - ภาพขนาดกลาง: แผนภาพลำดับชั้น doctype -> html -> head/body - ภาพขนาดเล็ก: เปรียบเทียบหน้าที่ head กับ body แบบ side-by-side - เน้นเส้นทางการอ่านง่าย สีเรียบ และองค์ประกอบไม่แน่นเกินคอลัมน์
Prompt ภาษาอังกฤษสำหรับสร้างภาพประกอบอย่างน้อย 3 แบบ
clean web-friendly diagram of HTML document structure with doctype html head and body
compact educational visual comparing head and body in an HTML document
minimal nested diagram of beginner HTML page structure