สามารถสร้างและใช้งานแท็ก HTML ได้โดยตรง

 (maurycyz.com)
3 คะแนน โดย GN⁺ 2025-12-30 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • ใน HTML แม้จะใช้ ชื่อแท็กที่ระบบไม่รู้จัก เบราว์เซอร์ก็จะจัดการมันเป็นองค์ประกอบทั่วไป
  • หากระบุชื่อแท็กนั้นเป็นตัวเลือกใน CSS ก็จะสามารถ กำหนดสไตล์และควบคุมการแสดงผล ได้
  • การใช้ชื่อที่มีเครื่องหมายขีดกลาง (-) จะช่วย ป้องกันการชนกับมาตรฐาน HTML ในอนาคต
  • หากใช้ แท็กแบบกำหนดเองที่มีความหมาย แทน หรือ จะช่วยให้อ่านโค้ดได้ง่ายขึ้น
  • แม้ในโครงสร้างซ้อนที่ซับซ้อน ก็ยัง เข้าใจโครงสร้างได้ง่ายจากชื่อแท็กเพียงอย่างเดียว ทำให้ดูแลรักษาได้สะดวก

การใช้งานแท็ก HTML แบบกำหนดเอง

  • เบราว์เซอร์จะเรนเดอร์ แท็กที่ไม่รู้จัก ให้เหมือนองค์ประกอบบล็อกทั่วไป

    • นี่เป็น พฤติกรรมปกติ ที่ระบุไว้ในมาตรฐาน HTML และสามารถควบคุมหน้าตาได้ด้วยการกำหนดสไตล์ใน CSS
    • ตัวอย่างเช่น สามารถกำหนดแท็กอย่าง `` แล้วตกแต่งใน CSS ในรูปแบบ cool-thing { ... } ได้

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

    • เช่น ,

การปรับปรุงความอ่านง่ายและโครงสร้าง

  • หากใช้ แท็กที่มีชื่อสื่อความหมาย แทน หรือ จะช่วยให้เข้าใจโค้ดได้ง่ายขึ้น
    • เช่น สามารถใช้ แทน ได้
  • ในโครงสร้าง `` ที่ซ้อนกันหลายชั้น มักดูยากว่าปิดแท็กตรงไหน แต่หากใช้ ชื่อแท็กที่ชัดเจน โครงสร้างจะเข้าใจง่ายขึ้น
    • หากภายใน ประกอบด้วย, `` เป็นต้น ก็จะ มองโครงสร้าง DOM ได้อย่างเป็นธรรมชาติ

โค้ดตัวอย่าง

  • วิธีเดิม 
    
  Hello, World!
  • วิธีใช้แท็กแบบกำหนดเอง 
    
  Hello, World!
    • ใน CSS สามารถกำหนดสไตล์ในรูปแบบ cool-thing { display: block; font-weight: bold; text-align: center; ... } ได้

บทสรุป

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

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2025-12-30
ความคิดเห็นจาก Hacker News

  • เน้นว่า ไม่ใช่แท็กที่ไม่รู้จัก พร้อมแนะนำ[บทความในบล็อก](https://dashed-html.github.io)ของตนเอง โดยอธิบายว่า จะถูกจัดการเป็น HTMLUnknownElement จนกว่า WHATWG จะเพิ่มเป็นองค์ประกอบใหม่ แต่ เป็น **HTMLElement ที่ถูกต้อง** ซึ่งมีประโยชน์ต่อการจัดเลย์เอาต์และการจัดสไตล์ หากอัปเกรดด้วย JavaScript Custom Elements API ก็จะกลายเป็น **custom element ที่ถูกนิยามแล้ว** นี่เป็นพฤติกรรมมาตรฐานในทุกเบราว์เซอร์ และ W3C HTML Validator ก็ยอมรับ custom element ที่มีขีดกลางว่าเป็น HTMLElement อย่างไรก็ตาม กฎ `[hidden]{display:none}` ใน UA stylesheet เริ่มต้นจะไม่ถูกสืบทอดมาด้วย จึงต้องกำหนดเอง การที่ มีค่าเริ่มต้นเป็น display:block ก็เป็นเพราะ UA stylesheet เช่นกัน ดังนั้น custom element จึงต้องตั้งค่า display เอง สามารถแยกองค์ประกอบที่ถูกนิยาม/ยังไม่ถูกนิยามได้ด้วยตัวเลือก CSS :defined และ :not(:defined) Declarative Shadow DOM (``) ก็สร้าง custom element ที่ยังไม่ถูกนิยาม ในลักษณะเดียวกัน

    • มีผู้โต้แย้งว่าใน Chromium นั้นไม่ใช่ปัญหาของ UA stylesheet แต่เป็นเพราะ hidden เป็น HTML presentation attribute UA stylesheet ถูกใช้กับ custom element เหมือนกัน และไม่มีกฎ [hidden] อยู่ hidden เป็นตัวอย่างที่แอตทริบิวต์เองถูกตีความเป็นสไตล์ คล้ายกับ align="right"
    • แสดงความเสียดายว่าถ้าสามารถใช้ เครื่องหมายโคลอน (:) แทนขีดกลาง (-) ได้ ก็น่าจะผสาน XML namespace ได้อย่างเป็นธรรมชาติ ยังพูดถึงด้วยว่าน่าจะให้ nginx หรือ apache แปลงโคลอนเป็นขีดกลางได้ ปิดท้ายด้วยน้ำเสียงชวนหวนคิดว่า “เราไม่สามารถกลับไปปี 1999 ได้”
    • ตั้งคำถามว่าทำไมวิธีนี้ถึงไม่กลายเป็น แนวปฏิบัติมาตรฐาน

  • ชี้ว่าโครงสร้างการซ้อน ในโค้ดตัวอย่างนั้นมากเกินไป เสนอว่าการใช้ **semantic tag** อย่าง, , จะเหมาะสมกว่า

    • ชี้ว่า custom tag ต่างจากคลาสตรงที่ มีได้เพียงชื่อเดียว คลาสมีได้หลายตัวและไม่มีลำดับ แต่ custom element ที่ซ้อนกันบังคับลำดับ จึงทำให้แสดงความหมายเดียวกันได้ยาก
    • วิเคราะห์ว่า “div soup” ไม่ได้แย่ในตัวมันเอง แต่เป็นผลจากการตัดสินใจออกแบบ HTML ที่ ผูกโครงสร้างกับสไตล์อย่างแน่นหนา มันอาจสมเหตุสมผลในปี 1996 แต่ตอนนี้ไม่ใช่อีกแล้ว

  • แชร์ประสบการณ์การใช้ custom element มา 3~4 ปี ไอเดียนั้น ฉลาดมาก แต่ใช้จริงค่อนข้างยาก หากใช้ custom tag มากเกินไป ความสามารถในการอ่านจะลดลง และแยกได้ยากว่าอะไรเป็นบล็อกหรืออินไลน์ แนวทางที่สมดุลคือ ใช้แท็กพื้นฐานตามเดิม และใช้ custom tag เฉพาะกับ องค์ประกอบเชิงคอมโพเนนต์ อย่าง หรือ ส่วนองค์ประกอบย่อยให้แยกด้วย แอตทริบิวต์ slot เช่น `` เขาชอบแนวทางที่จำกัดคลาสไว้เพื่อการแก้ไข/คัสตอมไมซ์เท่านั้น และใช้ slot เพื่อแสดงโครงสร้าง

    • บอกว่าสนใจแนวทาง Web Components ที่สมดุลแบบนี้มาก และขอตัวอย่างหรือชุดเครื่องมือ พร้อมแนะนำ Good.HTML ที่ตัวเองทำ โดยบอกว่ารองรับ autohook, interpolation แบบ template literal, และ โครงสร้างคอมโพเนนต์ที่จัดระเบียบแล้ว ยังเสริมว่า custom element แบบ self-closing อย่าง < !app-header /> ก็ทำได้ด้วยเทคนิค comment node
    • ถามว่า หากต้องการเลือกตามแอตทริบิวต์ slot ใน CSS ต้องเขียนแบบ div[slot="hero-blurb"] ใช่ไหม
    • บอกว่าแพตเทิร์นนี้ทำให้นึกถึง โครงสร้าง block–element ของ BEM

  • โดยพื้นฐานแล้ว custom tag ทำงานเหมือน `` หากต้องการก็สามารถนิยามพฤติกรรมผ่าน Custom Element API ได้

    • บอกว่าเคยใช้ custom element อย่างกว้างขวางในปี 2014 และ เสียดายที่ React กลายเป็นกระแสหลัก เขาคิดว่าสำหรับผู้ใช้ส่วนใหญ่ การใช้ HTML+custom element น่าจะดีกว่า SPA
    • บอกว่าควรใช้ semantic element ก่อน และค่อยใช้ custom element เมื่อจำเป็น พร้อมแชร์ตัวอย่าง Hypalink ที่ทำเอง และชี้ว่า Web Components ถูกประเมินค่าต่ำเกินไป

  • แนะนำว่าเคยสร้าง custom tag ชื่อ เพื่อทำหน้าที่ตรงข้ามกับ มันสามารถซ่อนบางส่วนได้เมื่อ JS ถูกปิดใช้งาน พร้อมแชร์ลิงก์โปรเจกต์

    • มีผู้เสนอว่าสามารถใช้ฟีเจอร์ @media (scripting) ของ CSS เพื่อให้ได้ ผลลัพธ์แบบเดียวกันด้วย CSS ล้วนๆ แนบลิงก์อ้างอิงเอกสาร MDN

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

    • มีผู้เสริมว่าจริงๆ แล้วเบราว์เซอร์ส่วนใหญ่ไม่เคย implement `` และ มีเพียง Firefox กับ Opera ที่รองรับจนถึงปี 2013
    • บอกว่ายังรู้สึกเสียดายที่ Flash หายไป
    • มีผู้แชร์โค้ดตัวอย่างว่าทำเอฟเฟกต์ `` ด้วย CSS อย่างเดียวก็ได้ และบอกว่าหากใช้ตัวเลือก blink แทน .blink ก็จะใช้กับแท็กได้โดยตรง
    • อีกความเห็นระบุว่าพฤติกรรมแบบ `` เป็นฟีเจอร์ที่ มีนัยสำคัญมากเกินกว่าจะให้เป็นเพียง HTML element ธรรมดา และยินดีที่มันหายไปแล้ว

  • ชี้ว่าตัวอย่างอย่าง , สามารถแทนที่ด้วยแท็ก HTML จริงได้ การใช้ , , `` จะเหมาะสมกว่า

    • ยังเสริมว่าถ้าใช้แท็ก HTML ที่มีการนิยามไว้แล้ว ก็จะได้ประโยชน์จาก สไตล์เริ่มต้นของเบราว์เซอร์ ไปด้วย

  • custom tag จะเรนเดอร์เป็นอินไลน์เหมือน `` โดยค่าเริ่มต้น แต่สามารถกำหนด ค่า display เริ่มต้น ด้วย CSS ได้ ในอดีตเคยหลีกเลี่ยงเพราะปัญหา namespace แต่เมื่อมาตรฐานอนุญาตให้ใช้ขีดกลาง (-) ความเสี่ยงเรื่องการชนกันก็หายไป มันทำงานได้ดีใน CSS selector และเข้าถึงได้ผ่าน querySelector ทำให้รู้สึกว่าแม้ไม่มีเฟรมเวิร์กอย่าง Vue ก็สามารถแสดงผลได้ดีพอด้วย HTML สมัยใหม่เพียงอย่างเดียว

    • มีผู้เสริมว่าองค์ประกอบนอกมาตรฐานที่มีขีดกลางจะถูกจัดการเป็น HTMLElement ไม่ใช่ HTMLUnknownElement นี่เป็นการออกแบบเพื่อให้เมื่อมีการอัปเกรดในอนาคต prototype chain สามารถขยายต่อได้อย่างเป็นธรรมชาติ

  • หากต้องการกำหนดสไตล์เริ่มต้นให้ custom element ทั้งหมด สามารถทำได้แบบนี้

    :where(:not(:defined)) {
  display: block;
}
    • มีคนตอบว่ากำลังหาวิธีนี้อยู่พอดี พร้อมทั้ง แสดงความทึ่งและขอบคุณ

  • เล่าย้อนว่า IE ในอดีตไม่รู้จักแท็ก HTML5 จึงแก้ด้วยสคริปต์ที่ตัวเองเขียนราวปี 2010 เพียงสร้างแท็กนั้นขึ้นมาหนึ่งครั้งด้วย JS IE ก็จะรู้จักมัน และต่อให้ลบออกภายหลังก็ไม่มีปัญหา เขาบอกว่าวิธีนี้ทำให้ตระหนักว่า แท็กอะไรก็ได้ก็สามารถเรนเดอร์ได้ พร้อมแชร์บทความบล็อกเก่า

    • มีผู้เสริมว่า html5shim ที่เคยได้รับความนิยมก็ทำงานด้วยวิธีเดียวกัน