Fundamentals
Tags, Elements, Attributes: แยกแท็ก องค์ประกอบ และแอตทริบิวต์ให้ขาด
แยกแยะความต่างและเขียนความสัมพันธ์ระหว่างแท็ก (Tag), องค์ประกอบ (Element) และแอตทริบิวต์ (Attribute) ในไวยากรณ์ HTML อย่างถูกต้อง
1) The Problem: เรียก "แท็ก" กับ "องค์ประกอบ" ปนกันจนแก้ผิดจุด
ในบท What is HTML คุณได้เห็นแล้วว่า **Tag (แท็ก)** ครอบข้อความให้กลายเป็นชิ้นส่วนที่มีความหมาย บทนี้จะเจาะลึกว่าเวลาทำงานจริง คำว่า แท็ก, **Element (องค์ประกอบ)**, และ **Attribute (แอตทริบิวต์)** ต้องแยกออกจากกันให้ชัด ไม่งั้นจะแก้โค้ดผิดจุด ลองดู 2 สถานการณ์ที่เกิดขึ้นบ่อย: 1. เพื่อนคอมเมนต์ในโค้ดรีวิวว่า "แก้แท็ก `<a>` ให้ชี้ url ใหม่" แต่จริง ๆ ตัวแท็ก `<a>` กับ `</a>` ไม่ต้องแตะเลย สิ่งที่ต้องแก้คือ **แอตทริบิวต์** `href` ที่อยู่ในแท็กเปิด ถ้าเรียกให้ตรงตั้งแต่แรก คนแก้จะรู้ทันทีว่าแตะข้อมูลกำกับ ไม่ใช่แตะโครงสร้าง 2. มีคนลืมพิมพ์แท็กปิด `</p>` หนึ่งจุด ทำให้ย่อหน้าถัดไปทั้งหมดถูกดูดเข้าไปเป็นเนื้อหาของ `<p>` เดิม หน้าเว็บเพี้ยนทั้งบล็อก ทั้งที่ค่าแอตทริบิวต์ทุกตัวถูกต้องหมด ปัญหาทั้งสองแก้ง่ายมากถ้าแยกออกว่ากำลังพูดถึงแท็ก องค์ประกอบ หรือแอตทริบิวต์
- สื่อสารกับทีมไม่ตรง: บอกว่า "แก้แท็ก" ทั้งที่ต้องแก้แอตทริบิวต์ คนอ่านไปแก้ผิดที่
- อ่านโค้ดและข้อความ error ของคนอื่นไม่ออก: error มักระบุเจาะจงว่าเป็น element หรือ attribute ตัวไหน
- ไล่แก้บั๊กผิดตำแหน่ง: เห็นหน้าเว็บเพี้ยนแล้วไปนั่งแก้ค่าแอตทริบิวต์ ทั้งที่สาเหตุคือลืมปิดแท็ก
2) Core Vocabulary: แท็ก ≠ องค์ประกอบ ≠ แอตทริบิวต์
นิยามสั้น ๆ ที่ใช้แยกสามคำนี้ได้ในทางปฏิบัติ: - **Tag (แท็ก)** คือข้อความในวงเล็บมุม `< >` ที่เป็นเครื่องหมายของภาษา HTML มีทั้งแท็กเปิด `<p>` และแท็กปิด `</p>` ตัวแท็กเองไม่ใช่เนื้อหา - **Element (องค์ประกอบ)** คือหน่วยเต็มหนึ่งก้อน = แท็กเปิด + เนื้อหา + แท็กปิด รวมกัน เบราว์เซอร์สร้างโครงในหน่วยความจำ (DOM) จากองค์ประกอบ ไม่ใช่จากแท็กลอย ๆ - **Attribute (แอตทริบิวต์)** คือข้อมูลกำกับที่เขียนไว้ใน**แท็กเปิดเท่านั้น** รูปแบบ `name="value"` เช่น `href="/docs"` โค้ดข้างล่างคือองค์ประกอบ `<a>` หนึ่งตัว ลองไล่ดูว่าส่วนไหนเรียกว่าอะไร:
แท็กคือ <a> และ </a> เท่านั้น, href="https://example.com" คือแอตทริบิวต์ในแท็กเปิด, อ่านต่อ คือเนื้อหา, ทั้งบรรทัดรวมกันคือหนึ่งองค์ประกอบ
กฎสำคัญ: หนึ่งประโยคแยกแต่ละคำ
แท็ก (Tag) = เครื่องหมาย
ข้อความในวงเล็บมุม `< >` ที่กำหนดจุดเริ่มและจุดจบ มีแท็กเปิดและแท็กปิด ตัวแท็กเองไม่ถูกนำไปเป็น DOM node โดยตรง
องค์ประกอบ (Element) = หน่วยเต็ม
แท็กเปิด + เนื้อหา + แท็กปิด รวมเป็นก้อนเดียว (หรือแท็กเดียวสำหรับ void element) เบราว์เซอร์ทำงานกับองค์ประกอบ
แอตทริบิวต์ (Attribute) = ข้อมูลกำกับในแท็กเปิด
เขียนในแท็กเปิดเท่านั้น รูปแบบ `name="value"` หนึ่งแท็กเปิดมีได้หลายตัว คั่นด้วยช่องว่าง
3) Anatomy: ผ่าองค์ประกอบหนึ่งตัว
องค์ประกอบหนึ่งตัวอ่านจากซ้ายไปขวาได้เป็นลำดับ: **แท็กเปิด → เนื้อหา → แท็กปิด** และแอตทริบิวต์ (ถ้ามี) จะแทรกอยู่ใน**แท็กเปิด** เสมอ ไม่เคยอยู่ในเนื้อหาและไม่เคยอยู่ในแท็กปิด ลองผ่าองค์ประกอบ `<p class="lead">ยินดีต้อนรับ</p>` ทีละส่วนตามขั้นตอนด้านล่าง
- แท็กเปิด `<p>` — บอกจุดเริ่มและชนิดขององค์ประกอบ
- แอตทริบิวต์ `class="lead"` — เขียนอยู่ในแท็กเปิด เป็นข้อมูลกำกับ ไม่ใช่เนื้อหา
- เนื้อหา `ยินดีต้อนรับ` — ข้อความที่อยู่ระหว่างแท็กเปิดกับแท็กปิด
- แท็กปิด `</p>` — บอกจุดจบ ทั้งสี่ส่วนรวมกันคือหนึ่งองค์ประกอบ
4) Attributes: ข้อมูลกำกับในแท็กเปิด
แอตทริบิวต์เขียนในรูปแบบ `name="value"` โดย `name` คือชื่อแอตทริบิวต์ และ `value` คือค่าที่อยู่ในเครื่องหมายคำพูด ถ้ามีหลายตัวให้คั่นด้วยช่องว่าง เช่น `<img src="/logo.png" alt="โลโก้เว็บ">` จุดที่ต้องจำ: แอตทริบิวต์อยู่ใน**แท็กเปิดเท่านั้น** ไม่ใส่ในแท็กปิด และไม่วางไว้นอกแท็ก
| แอตทริบิวต์ | หน้าที่ | ตัวอย่าง |
|---|---|---|
| class | จัดกลุ่มองค์ประกอบเพื่อใช้ต่อกับ CSS หรือ JavaScript | class="note-text" |
| id | ตั้งชื่อเฉพาะที่ไม่ซ้ำกับใครในหน้าเดียวกัน | id="intro-text" |
| href | ปลายทางของลิงก์ `<a>` | href="/docs" |
| src | ที่อยู่ไฟล์ของรูป `<img>` | src="/logo.png" |
| alt | คำอธิบายรูปสำหรับผู้ใช้ screen reader | alt="โลโก้เว็บ" |
ตำแหน่งและรูปแบบของแอตทริบิวต์ผิดได้ง่าย
แอตทริบิวต์ต้องอยู่ในแท็กเปิดและค่าต้องอยู่ในเครื่องหมายคำพูด ถ้าวางผิดที่หรือลืมคำพูด เบราว์เซอร์จะตีความไม่ตรงหรือมองข้ามแอตทริบิวต์นั้นไป
- ใส่แอตทริบิวต์ในแท็กปิด เช่น `</a href="/docs">` — แท็กปิดรับแอตทริบิวต์ไม่ได้
- ลืมเครื่องหมายคำพูดรอบ value เช่น `href=/docs` — ค่าที่มีอักขระพิเศษหรือช่องว่างจะเพี้ยน
- วางแอตทริบิวต์ไว้นอกแท็กเปิด เช่น `<a>อ่านต่อ</a> href="/docs"` — กลายเป็นข้อความธรรมดา ไม่ใช่แอตทริบิวต์
5) Nesting & Void Elements: การซ้อนชั้น และแท็กที่ไม่มีคู่ปิด
**Nesting (การซ้อนชั้น)** คือการวางองค์ประกอบไว้ในเนื้อหาของอีกองค์ประกอบหนึ่ง กฎคือเปิด–ปิดเป็นชั้นซ้อนกัน: **ปิดชั้นในก่อนชั้นนอก** ถ้าปิดสลับชั้นเบราว์เซอร์จะเดาโครงสร้างเองและมักได้ผลไม่ตรงที่ตั้งใจ **Void Element (องค์ประกอบว่าง)** คือองค์ประกอบที่ไม่มีเนื้อหาและไม่มีแท็กปิด เช่น `<img>`, `<br>`, `<hr>` มีแค่แท็กเดียว บทนี้ให้รู้จักในระดับใช้เป็น ส่วนรายละเอียดของแต่ละตัวจะอยู่ในบท Images และบท Line Break / Horizontal Rule
บรรทัดแรก: <strong> ซ้อนอยู่ในเนื้อหาของ <p> และปิดก่อน. บรรทัดสุดท้าย: <img> เป็น void element ไม่ต้องมี </img>
- ลำดับการปิด: `<p><strong>...</strong></p>` ถูก — `<p><strong>...</p></strong>` ผิดเพราะปิดสลับชั้น
- void element เช่น `<img>`, `<br>`, `<hr>` ไม่ต้องหาแท็กปิด และไม่มีเนื้อหาอยู่ข้างใน
6) Demonstration: เขียนผิด vs เขียนถูก
ก่อนกดดูฝั่ง "เขียนถูก" ลองอ่านโค้ดฝั่ง "เขียนผิด" แล้วทำนายว่าเบราว์เซอร์จะตีความอย่างไร: - ย่อหน้าที่ไม่ปิด `</p>` จะไปจบตรงไหน และดูดอะไรเข้าไปเป็นเนื้อหาบ้าง - `href` ที่เขียนไว้นอกแท็กเปิด จะกลายเป็นแอตทริบิวต์หรือข้อความ - รูปที่ไม่มี `alt` จะบอกอะไรกับผู้ใช้ screen reader แล้วค่อยเทียบกับฝั่งที่แก้ครบทั้งสามจุด
มาร์กอัปเดียวกัน เขียนผิด vs เขียนถูก
ความต่างอยู่ที่สามจุด: การปิดแท็ก `<p>`, ตำแหน่งของแอตทริบิวต์ `href`, และการมี `alt` ของ `<img>`
<p> ไม่ปิด จึงกลืนบรรทัดถัดไปทั้งหมด, href อยู่นอกแท็กเปิดเลยเป็นข้อความ, <img> ไม่มี alt
<p> ปิดครบ, href อยู่ในแท็กเปิด <a> เป็นแอตทริบิวต์จริง, <img> มี alt อธิบายรูป
- ปิด `<p>` ให้ครบ — เบราว์เซอร์จบย่อหน้าตรงที่ตั้งใจ บรรทัดถัดไปไม่ถูกดูดเข้าไปเป็นเนื้อหา
- ย้าย `href` เข้าไปในแท็กเปิด `<a>` — เบราว์เซอร์อ่าน `href` เป็นปลายทางลิงก์จริง ไม่ใช่ข้อความ
- เติม `alt` ให้ `<img>` — screen reader อ่านคำอธิบายรูปให้ผู้ใช้ที่มองไม่เห็นได้
7) Practice: ฝึกทีละระดับ
สาม Lab ต่อไปนี้ค่อย ๆ ถอดตัวช่วยออกทีละระดับ: **ทำตาม** (Lab 1 สร้างองค์ประกอบตามสเปกที่กำหนดเป๊ะ) → **ปรับ** (Lab 2 แก้และเติมแอตทริบิวต์ให้ตรงเงื่อนไขชุดใหม่) → **แก้เอง** (Lab 3 วิเคราะห์มาร์กอัปที่มีบั๊กหลายจุดแล้วซ่อมโดยไม่มีคำใบ้) ก่อนกดรัน Lab 1 ลองทำนายในใจ: เบราว์เซอร์จะถือว่า `id` เป็นส่วนไหนของ element — แท็ก เนื้อหา หรือแอตทริบิวต์? จำคำตอบไว้แล้วเทียบกับผลตรวจ
8) Checkpoint & Next Steps: ตรวจความเข้าใจและก้าวต่อไป
ทบทวนสั้น ๆ ว่าแยกแท็ก องค์ประกอบ และแอตทริบิวต์ออกจากกันได้จริงไหม ก่อนไปเรียนบทถัดไปที่จะพาเขียนองค์ประกอบข้อความหลายชนิดและจัดลำดับหัวข้อ
ตรวจความเข้าใจ: แท็ก องค์ประกอบ แอตทริบิวต์
ตอบให้ครบทุกข้อเพื่อเช็กว่าคุณแยกสามคำนี้ได้
ในโค้ด `<a href="/next">อ่านต่อ</a>` ส่วน `href="/next"` เรียกว่าอะไร?
องค์ประกอบ (Element) หนึ่งตัวประกอบด้วยสามส่วน เติมส่วนที่ขาดตรงกลาง
ตอบเป็นภาษาไทยว่า เนื้อหา หรือภาษาอังกฤษว่า content
`<br>` จัดเป็นอะไร?
- แท็ก (Tag): เครื่องหมาย `< >` ที่กำหนดขอบเขต ไม่ใช่หน่วยที่เบราว์เซอร์นำไปสร้าง DOM โดยตรง
- องค์ประกอบ (Element): แท็กเปิด + เนื้อหา + แท็กปิด รวมเป็นก้อนเดียวที่เบราว์เซอร์ทำงานด้วย
- แอตทริบิวต์ (Attribute): ข้อมูลกำกับในแท็กเปิด รูปแบบ `name="value"` อยู่ที่อื่นไม่ได้
- ก้าวต่อไป: ในบทถัดไป 'Heading, Paragraph, Text Basics' เราจะมาเจาะลึกการจัดลำดับหัวข้อและแท็กข้อความตามความหมาย (สมมติฐานความรู้ก่อนหน้า: เข้าใจโครงสร้างเอกสารมาตรฐานและแยกแยะ tag, element, attribute จากบทเรียนนี้)