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

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

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

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

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

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

    • เช่น <main-article>, <quote-body>

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

  • หากใช้ แท็กที่มีชื่อสื่อความหมาย แทน <div> หรือ <span> จะช่วยให้เข้าใจโค้ดได้ง่ายขึ้น
    • เช่น สามารถใช้ <article-header> แทน <div class="article-header"> ได้
  • ในโครงสร้าง <div> ที่ซ้อนกันหลายชั้น มักดูยากว่าปิดแท็กตรงไหน แต่หากใช้ ชื่อแท็กที่ชัดเจน โครงสร้างจะเข้าใจง่ายขึ้น
    • หากภายใน <main-article> ประกอบด้วย <article-header>, <article-quote> เป็นต้น ก็จะ มองโครงสร้าง DOM ได้อย่างเป็นธรรมชาติ

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

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

บทสรุป

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

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

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

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

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

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

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

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

  • แชร์ประสบการณ์การใช้ custom element มา 3~4 ปี
    ไอเดียนั้น ฉลาดมาก แต่ใช้จริงค่อนข้างยาก
    หากใช้ custom tag มากเกินไป ความสามารถในการอ่านจะลดลง และแยกได้ยากว่าอะไรเป็นบล็อกหรืออินไลน์
    แนวทางที่สมดุลคือ ใช้แท็กพื้นฐานตามเดิม และใช้ custom tag เฉพาะกับ องค์ประกอบเชิงคอมโพเนนต์ อย่าง <x-card> หรือ <x-hero>
    ส่วนองค์ประกอบย่อยให้แยกด้วย แอตทริบิวต์ slot เช่น <div slot="hero-blurb">
    เขาชอบแนวทางที่จำกัดคลาสไว้เพื่อการแก้ไข/คัสตอมไมซ์เท่านั้น และใช้ 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 ทำงานเหมือน <span>
    หากต้องการก็สามารถนิยามพฤติกรรมผ่าน Custom Element API ได้

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

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

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

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

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

  • ชี้ว่าตัวอย่างอย่าง <main-article>, <article-header> สามารถแทนที่ด้วยแท็ก HTML จริงได้
    การใช้ <article>, <header>, <blockquote> จะเหมาะสมกว่า

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

  • custom tag จะเรนเดอร์เป็นอินไลน์เหมือน <span> โดยค่าเริ่มต้น แต่สามารถกำหนด ค่า 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 ที่เคยได้รับความนิยมก็ทำงานด้วยวิธีเดียวกัน