แท็กสำคัญที่ทำให้ HTML ทำงานได้ตามที่คาดไว้

• เพื่อให้หน้าเว็บแสดงผลในเบราว์เซอร์ตามที่คาดไว้ จำเป็นต้องใส่ แท็ก HTML พื้นฐาน บางอย่างเสมอ
• `` ช่วยรับประกันการเรนเดอร์ใน standards mode เพื่อป้องกันข้อผิดพลาดในการคำนวณเลย์เอาต์
• `` ช่วย ระบุข้อมูลภาษา ทำให้การเข้าถึง การค้นหา และคุณภาพการแปลดีขึ้น
• และ ใช้ควบคุม การเข้ารหัสอักขระ และ สัดส่วนการแสดงผลบนมือถือ ตามลำดับ
• แท็กเหล่านี้ไม่ใช่แค่องค์ประกอบด้านรูปแบบ แต่เป็นส่วนประกอบหลักที่ช่วยรักษา ความสอดคล้องของมาตรฐานเว็บและประสบการณ์ผู้ใช้

---

ภาพรวมโครงสร้างพื้นฐานของ HTML และแท็กที่จำเป็น

• บทความนี้เขียนขึ้นโดยได้แรงบันดาลใจจากการบรรยายของ Alex Petros ชื่อ “Incantations that make HTML work correctly”
  • ผู้เขียนได้สรุป สไนเป็ตพื้นฐาน ที่ควรใส่ไว้เสมอเมื่อเปิดไฟล์ HTML ตรงในเบราว์เซอร์
  • โครงสร้างพื้นฐานที่ยกมาเป็นตัวอย่างมีดังนี้

• แต่ละแท็กมีหน้าที่ช่วยให้เบราว์เซอร์ ตีความและแสดงผล HTML ตามมาตรฐาน
  • หากขาดไป เบราว์เซอร์อาจเปลี่ยนไปใช้ non-standard mode (quirks mode) หรือเกิดปัญหาอย่างข้อความเพี้ยนและหน้าจอบนมือถือถูกย่อ

`` — ประกาศโหมดมาตรฐาน

• `` คือคำประกาศที่สั่งให้เบราว์เซอร์เรนเดอร์ใน standards mode
  • หากไม่มีคำประกาศนี้ เบราว์เซอร์จะเปลี่ยนไปใช้ quirks mode เพื่อจำลองพฤติกรรม HTML แบบเก่าที่ไม่เป็นมาตรฐาน
  • ผลคือการคำนวณ เลย์เอาต์ ขนาด และการจัดวาง อาจเปลี่ยนไป ทำให้เกิดการแสดงผลผิดพลาดโดยไม่คาดคิด
• ไม่แยกตัวพิมพ์เล็ก-ใหญ่ ดังนั้น หรือ `` ก็ถูกตีความได้เหมือนกัน
  • ผู้เขียนแซวเล่นว่า “ถ้าอยากเขียนมาร์กอัปแบบปี 1998 จะใช้ตัวพิมพ์ใหญ่ทั้งหมดก็ได้”

`` — ระบุภาษาของเอกสาร

• `` คือแท็กที่ใช้ ระบุภาษาหลักของเอกสาร
  • ข้อมูลนี้ถูกใช้งานโดยเครื่องมือหลากหลาย เช่น เบราว์เซอร์ เสิร์ชเอนจิน และสกรีนรีดเดอร์
• ตัวอย่างการใช้งานหลัก
  • สกรีนรีดเดอร์เลือก การออกเสียงและโทนเสียง ได้ถูกต้อง
  • เสิร์ชเอนจินช่วยเพิ่ม ความแม่นยำในการทำดัชนีและการแปล
  • ใช้กับฟีเจอร์ตามโลแคล เช่น การตรวจการสะกด
• แม้จะละเว้นแอตทริบิวต์ภาษาแล้วดูเหมือนไม่มีปัญหาบนหน้าจอ แต่เครื่องมือรอบข้างอาจประมวลผลผิดได้
  • ดังนั้นจึงควรระบุไว้ใน HTML อย่างชัดเจน
• แม้จะส่งข้อมูลภาษาได้ผ่าน response header ของเซิร์ฟเวอร์ แต่ เมื่อต้องเปิดไฟล์โลคัลโดยตรง การระบุไว้ใน HTML จะปลอดภัยกว่า
  • ตัวอย่างโค้ด

    return new Response(
        "Hello world
    
    

", { status: 200, headers: { "Content-Type": "text/html; charset=utf-8" }, } ); ```

`` — ระบุการเข้ารหัสอักขระ

• `` ช่วยให้เบราว์เซอร์ รับรู้รูปแบบการเข้ารหัสอักขระ ของเอกสาร
  • ทำให้ อักขระที่ไม่ใช่ ASCII อย่าง é, ü, ñ, ©, ™, ®, …, 👍 แสดงผลได้ถูกต้อง
• หากไม่มีแท็กนี้ อักขระพิเศษหรือ smart quotes ภายในเอกสารอาจแสดงผลเพี้ยน
  • ผู้เขียนยกตัวอย่างกรณี “smart quotes” ในบล็อกของตนเองที่แสดงผลผิด
• ตัวอย่างการเปรียบเทียบ
  • กรณีไม่มี ``: อักขระพิเศษและอีโมจิแสดงผลเพี้ยน
  • กรณีมีแท็กนี้: อักขระทั้งหมดแสดงผลปกติ
• ในบล็อกมี ภาพสกรีนช็อต ที่แนบมาเพื่อเปรียบเทียบทั้งสองกรณี

`` — ตั้งค่า viewport บนมือถือ

• แท็กนี้ใช้ควบคุม สัดส่วนหน้าจอและอัตราการซูม ในเบราว์เซอร์บนมือถือ
  • หากไม่มี บนอุปกรณ์มือถือหน้าเว็บอาจ ถูกย่อจนดูเล็ก
• ผู้เขียนเล่าว่า “บนเดสก์ท็อปดูปกติดี แต่พอเปิดบนมือถือ ทุกอย่างกลับดูเล็กไปหมด” พร้อมยกตัวอย่าง กรณีลืมใส่ meta viewport
  • เขาอธิบายความต่างด้วยภาพสกรีนช็อตเปรียบเทียบด้านซ้าย (ไม่มีแท็ก) และด้านขวา (มีแท็ก)
• ดังนั้นแม้จะเป็นเพียงโปรโตไทป์ง่าย ๆ ก็ควรใส่แท็กนี้ไว้ เพื่อรักษา สัดส่วนเลย์เอาต์ตามที่คาดหวัง

บทสรุป — พื้นฐานที่แท้จริงของ HTML

• ผู้เขียนทิ้งท้ายด้วยมุกว่า “ลืมสไนเป็ตที่สำคัญที่สุดไป”
  • โดยยกตัวอย่างโค้ดดังนี้

• นี่คือการพูดเชิงล้อเลียนถึง โครงสร้างแอปแบบ JavaScript-based ที่พบได้บ่อยในการพัฒนาเว็บสมัยใหม่
• โดยรวมแล้วบทความนี้เน้นว่า แท็กพื้นฐานของ HTML คือองค์ประกอบสำคัญที่ทำให้เว็บทำงานตามมาตรฐานได้จริง

[ahwjdekf]

ถ้าจำเป็นขนาดนั้น ทำไมมันถึงไม่ทำงานเป็นค่าเริ่มต้นล่ะ? แต่เอาเถอะ โลกเว็บนี่ช่างแปลกจริง ๆ นะ วิธีคิดไม่เหมือนใครเลย

[dongho42]

น่าจะเป็นเพราะความเข้ากันได้ย้อนหลังหรือเปล่าครับ? ถ้าเปลี่ยนพฤติกรรมการทำงานเริ่มต้นไปเลย สิ่งที่ก่อนหน้านี้ทำงานได้ดีก็อาจพังได้

[GN⁺]

ความคิดเห็นจาก Hacker News

• ข้อเท็จจริงที่น่าสนใจคือ HN และ paulgraham.com ทั้งคู่เรนเดอร์ใน Quirks Mode เพราะไม่มีการประกาศ DOCTYPE ตรวจสอบได้ในเครื่องมือนักพัฒนาด้วย document.compatMode ฉันใช้ userscript สำหรับคัดลอกข้อความขององค์ประกอบที่ถูกเมาส์โอเวอร์ได้ง่าย ๆ และมันทำงานไม่เสถียรใน Quirks Mode แม้จะบังคับเปลี่ยนได้ด้วย document.write("" + document.documentElement.innerHTML) แต่จะรีเซ็ตทั้งเอกสารและทำให้เกิดปัญหา เลยสงสัยว่าจากมุมผู้ใช้จะมีวิธีที่ สะอาดกว่า ในการบังคับให้เป็น Standards Mode ได้หรือไม่
  • อยากให้ dang ช่วยปรับปรุง การใช้งาน ของ HN บ้าง ขนาดฟอนต์เริ่มต้นประมาณ 12px ซึ่งเล็กเกินไปสำหรับอุปกรณ์สมัยใหม่ส่วนใหญ่ CSS ก็ดูเหมือนยังใช้ โค้ดเดิม ที่เปิดเผยเมื่อราว 13 ปีก่อน
  • แก้ได้ด้วย ตัวกรอง uBlock ตัวอย่าง: `||news.ycombinator.com/*$replace=/