วัตถุประสงค์ของ `` คืออะไร?

Question

วัตถุประสงค์ของ `<!DOCTYPE html>` คืออะไร?

Accepted Answer

`` คือบรรทัดแรกสุดของเอกสาร HTML ซึ่งบอกให้เบราว์เซอร์เรนเดอร์ในโหมด **standards mode** แทนที่จะเป็น **quirks mode** (โหมดเก่าที่เข้ากันได้กับข้อบกพร่อง ซึ่งเลียนแบบเบราว์เซอร์ยุค 1990) ```html ... ``` ## โหมด standards vs quirks mode หากไม่มี doctype เบราว์เซอร์จะกลับไปใช้ **quirks mode** ซึ่งเปลี่ยนพฤติกรรมการจัดวางในรูปแบบที่น่าประหลาดใจ — โดยเฉพาะอย่างยิ่ง **box model**: ```text Quirks mode: width includes padding + border (old IE box model) Standards mode: width is the content box (CSS spec) — predictable ``` ปัญหาอื่น ๆ ได้แก่ การจัดการ line-height ที่แตกต่างกันในเซลล์ตาราง ระยะห่างของรูปภาพ และหน่วย CSS ข้อแตกต่างเหล่านี้ทำให้ CSS ที่คุณเขียนอย่างระมัดระวังแสดงผลแตกต่างกัน ดังนั้นคุณจึงต้องการ standards mode เกือบตลอดเวลา ## เหตุใดจึงสั้นลง ใน HTML4/XHTML doctype คือ URL ยาว ๆ ที่อ้างอิง DTD (Document Type Definition): ```html ``` HTML5 ทำให้มันง่ายขึ้นเป็นเพียง `` — มันไม่ชี้ไปที่ DTD อีกต่อไป เป็นเพียงการสลับโหมดที่เบราว์เซอร์รู้จัก ## ทำไมจึงมีความสำคัญ รวม `` เป็นบรรทัดแรกเสมอ มันเป็นการรับประกันบรรทัดเดียวว่าหน้าของคุณใช้กฎการเรนเดอร์สมัยใหม่และสอดคล้องกัน ซึ่งเป็นสิ่งที่บทช่วยสอน CSS และเฟรมเวิร์กทุกชิ้นคาดหวัง — การละเว้นสิ่งนี้อาจนำไปสู่ความแตกต่างของเลย์เอาต์ที่สับสน และยากต่อการแก้ไข