Bisa membuat dan menggunakan tag HTML sendiri secara langsung

 (maurycyz.com)
3 poin oleh GN⁺ 2025-12-30 | 1 komentar | Bagikan ke WhatsApp
  • Di HTML, meskipun memakai nama tag yang tidak dikenali, browser akan tetap menanganinya sebagai elemen biasa
  • Jika nama tag tersebut ditentukan sebagai selector di CSS, maka pemberian style dan kontrol tampilan bisa dilakukan
  • Menggunakan nama yang mengandung tanda hubung (-) dapat mencegah benturan dengan standar HTML di masa depan
  • Alih-alih <div> atau <span>, memakai tag kustom yang bermakna dapat meningkatkan keterbacaan kode
  • Bahkan dalam struktur nested yang kompleks, struktur lebih mudah dipahami hanya dari nama tag, sehingga perawatan jadi lebih mudah

Pemanfaatan tag HTML kustom

  • Browser merender tag yang tidak dikenal seperti elemen blok biasa

    • Ini adalah perilaku normal yang dijelaskan dalam standar HTML, dan tampilannya dapat dikendalikan secara visual jika style ditetapkan di CSS
    • Sebagai contoh, tag seperti <cool-thing> bisa didefinisikan dan dihias di CSS dalam bentuk cool-thing { ... }

  • Jika nama tag menyertakan tanda hubung (-), maka tidak akan berbenturan dengan penambahan pada standar HTML di masa depan sehingga tidak ada risiko konflik

    • Contoh: <main-article>, <quote-body>

Peningkatan keterbacaan dan struktur

  • Menggunakan tag dengan nama yang bermakna alih-alih <div> atau <span> membuat kode lebih mudah dipahami
    • Misalnya, <div class="article-header"> bisa diganti dengan <article-header>
  • Dalam struktur <div> yang bertingkat, posisi tag penutup sulit dikenali, tetapi dengan nama tag yang eksplisit struktur menjadi lebih jelas
    • Jika di dalam <main-article> ada <article-header>, <article-quote>, dan sebagainya, maka struktur DOM lebih intuitif untuk dipahami

Contoh kode

  • Cara lama 
    <div class="cool-thing">
  Hello, World!
</div>
  • Cara dengan tag kustom 
    <cool-thing>
  Hello, World!
</cool-thing>
    • Di CSS, style bisa ditetapkan dalam bentuk cool-thing { display: block; font-weight: bold; text-align: center; ... }

Kesimpulan

  • Dengan memanfaatkan fitur definisi tag yang fleksibel yang diizinkan oleh standar HTML,
    kita bisa menulis markup struktural yang lebih mudah dibaca
  • Namun, jika sudah ada tag bermakna yang didefinisikan, maka menggunakan tag yang sudah ada tetap menjadi prioritas

Bacaan terkait

1 komentar

 
GN⁺ 2025-12-30
Pendapat Hacker News

  • Menekankan bahwa <tag-name> bukanlah tag yang tidak dikenali
    Memperkenalkan tulisan blog miliknya, dan menjelaskan bahwa <tagname> diperlakukan sebagai HTMLUnknownElement sampai WHATWG menambahkannya sebagai elemen baru, tetapi <tag-name> adalah HTMLElement yang valid sehingga berguna untuk layout dan styling
    Jika di-upgrade dengan JavaScript Custom Elements API, itu menjadi custom element yang terdefinisi
    Ini adalah perilaku standar di semua browser, dan W3C HTML Validator juga mengakui custom element yang mengandung dash sebagai HTMLElement
    Namun aturan [hidden]{display:none} dari stylesheet UA bawaan tidak diwariskan, jadi harus ditentukan sendiri
    Fakta bahwa <DIV> secara default memiliki display:block juga berkat stylesheet UA, jadi untuk custom element kita perlu mengatur properti display sendiri
    Dengan selector CSS :defined dan :not(:defined), elemen yang terdefinisi dan belum terdefinisi bisa dibedakan
    Declarative Shadow DOM (<template shadowrootmode="open">) juga dengan cara yang sama membuat custom element yang belum terdefinisi

    • Membantah bahwa menurut Chromium ini bukan masalah stylesheet UA, melainkan karena hidden adalah atribut presentasional HTML (presentation attribute)
      Stylesheet UA diterapkan sama pada custom element, dan tidak ada aturan [hidden]
      hidden adalah contoh di mana atribut itu sendiri ditafsirkan sebagai style, seperti align="right"
    • Menyesalkan bahwa seandainya bisa memakai titik dua (:) alih-alih dash (-), integrasi namespace XML akan terasa lebih alami
      Menyebut bahwa di nginx atau apache, titik dua pun bisa diubah menjadi tanda hubung
      Menutup dengan nada nostalgia, “kita tidak bisa kembali ke tahun 1999”
    • Mempertanyakan mengapa cara ini bukan praktik default

  • Menunjukkan bahwa struktur nested <div> pada contoh kode terlalu berlebihan
    Menyarankan bahwa memakai tag semantik seperti <article>, <header>, dan <blockquote> akan lebih tepat

    • Menunjukkan bahwa custom tag, tidak seperti atribut class, hanya bisa punya satu nama
      Class bisa ada banyak dan tidak memiliki urutan, sedangkan custom element yang bersarang memaksakan urutan, sehingga sulit mengekspresikan hal yang sama
    • Menganalisis bahwa yang buruk bukan “div soup”-nya, melainkan keputusan desain HTML yang menggabungkan struktur dan style secara kuat
      Itu masuk akal pada 1996, tetapi dinilai tidak lagi demikian sekarang

  • Membagikan pengalaman memakai custom element selama 3–4 tahun
    Idenya cerdas, tetapi rumit dalam praktik
    Jika terlalu banyak custom tag dipakai, keterbacaan menurun dan sulit membedakan blok dengan inline
    Dengan pendekatan yang seimbang, tag bawaan tetap dipakai apa adanya, dan custom tag hanya digunakan untuk elemen berbentuk komponen seperti <x-card> atau <x-hero>
    Subkomponen dibedakan lewat atribut slot, misalnya <div slot="hero-blurb">
    Mereka lebih suka membatasi class hanya untuk modifikasi dan kustomisasi, sementara struktur diekspresikan lewat slot

    • Mengatakan sangat tertarik pada pendekatan web component yang seimbang, lalu meminta contoh atau toolkit
      Memperkenalkan Good.HTML buatannya, dan menjelaskan bahwa itu mendukung autohook, interpolasi berbasis template literal, dan struktur komponen yang tertata
      Menambahkan bahwa custom element self-closing seperti < !app-header /> juga diimplementasikan dengan trik comment node
    • Bertanya apakah untuk menyeleksi berdasarkan atribut slot di CSS cukup menulis seperti div[slot="hero-blurb"]
    • Menyebut bahwa pola ini mengingatkan pada struktur block–element milik BEM

  • Secara default custom tag berperilaku seperti <span>
    Jika perlu, perilakunya bisa didefinisikan melalui Custom Element API

    • Mengungkapkan bahwa pada 2014 mereka pernah memakai custom element secara luas, dan menyayangkan React menjadi arus utama
      Mereka merasa bagi kebanyakan pengguna, kombinasi HTML + custom element akan lebih baik daripada SPA
    • Mengatakan bahwa sebaiknya elemen semantik diprioritaskan, dan custom element hanya dipakai bila diperlukan
      Membagikan contoh Hypalink buatan mereka, sambil menyoroti bahwa Web Components kurang dihargai

  • Memperkenalkan custom tag bernama <yes-script> yang dibuat untuk menjalankan peran kebalikan dari <noscript>
    Saat JS dinonaktifkan, area tertentu bisa disembunyikan
    Membagikan tautan proyek

    • Mengusulkan bahwa fitur CSS @media (scripting) bisa memberi efek yang sama hanya dengan CSS murni
      Melampirkan tautan referensi dokumen MDN

  • Membagikan pengalaman pernah menciptakan ulang tag <blink> yang dulu dihapus dari browser
    Itu dibuat dengan jQuery dan manipulasi visibility, dan mereka terkejut mengetahui browser mengizinkan tag arbitrer
    Karena kodenya hanya sekitar 10 baris, mereka tidak mempublikasikannya, tetapi menduga banyak percobaan serupa sudah ada

    • Menjelaskan bahwa sebenarnya sebagian besar browser tidak pernah mengimplementasikan <blink>, dan hanya Firefox dan Opera yang mendukungnya sampai 2013
    • Mengungkapkan bahwa mereka masih menyayangkan hilangnya Flash
    • Mengatakan bahwa efek <blink> juga bisa dibuat hanya dengan CSS, lalu membagikan contoh kode
      Jika memakai selector blink alih-alih .blink, efeknya akan diterapkan langsung ke tag
    • Mengatakan bahwa perilaku seperti <blink> punya makna yang terlalu besar untuk disediakan sebagai elemen HTML sederhana, jadi mereka senang fitur itu dihapus

  • Menunjukkan bahwa contoh seperti <main-article> dan <article-header> sebenarnya bisa diganti dengan tag HTML nyata
    Menggunakan <article>, <header>, dan <blockquote> akan lebih tepat

    • Menambahkan bahwa memakai tag HTML yang sudah didefinisikan sebelumnya juga memberi keuntungan berupa styling bawaan browser

  • Custom tag pada dasarnya dirender inline seperti <span>, tetapi properti display default bisa ditentukan lewat CSS
    Dulu ini dihindari karena masalah namespace, tetapi setelah standar mengizinkan tanda hubung (-), risiko bentrokan hilang
    Ini juga bekerja baik dalam selector CSS, dan bisa diakses lewat querySelector
    Terasa bahwa bahkan tanpa framework seperti Vue, HTML modern saja sudah cukup ekspresif

    • Menambahkan bahwa elemen nonstandar yang mengandung dash diperlakukan sebagai HTMLElement, bukan HTMLUnknownElement
      Ini adalah desain agar saat di-upgrade di masa depan, rantai prototipe dapat diperluas secara alami

  • Jika ingin menetapkan style default untuk semua custom element, bisa dilakukan seperti berikut

    :where(:not(:defined)) {
  display: block;
}
    • Mengatakan bahwa inilah cara yang mereka cari, sambil menyampaikan kekaguman dan terima kasih

  • Mengenang bahwa IE lama dulu tidak mengenali tag HTML5, jadi sekitar tahun 2010 mereka menyelesaikannya dengan skrip buatan sendiri
    Begitu tag dibuat sekali lewat JS, IE akan mengenalinya, dan setelah itu tidak masalah meski dihapus
    Dari situ mereka sadar bahwa tag arbitrer pun bisa dirender dengan cara ini
    Mereka juga membagikan tulisan blog saat itu

    • Menambahkan bahwa html5shim yang dulu populer juga bekerja dengan cara yang sama