ハクソク

世界を動かす技術を、日本語で。

HTMLタグを作成できます

2025年12月29日原文(maurycyz.com)

概要

  • HTML では独自タグの利用が可能
  • CSS で未認識タグのスタイル指定が標準動作
  • タグ名に ハイフン を含めることで将来の衝突を回避
  • 独自タグは 可読性向上 に役立つ
  • ネスト構造の管理が容易になる利点

独自タグによるHTMLとCSSの記述改善

  • HTML では、例えば<div class=cool-thing>の代わりに<cool-thing>といった 独自タグ を使用可能
  • CSS では、cool-thing { ... }のように独自タグ名をそのままセレクタとして利用
  • 未認識タグ は標準で「汎用要素」として扱われ、 CSS指定 のみが反映される
  • タグ名に ハイフン（-） を含めることで、将来のHTML標準タグとの 名前衝突を回避
  • 既存の 意味的タグ がある場合はそれを優先、なければ独自タグの方が 可読性向上 に寄与

ネスト構造の可読性向上

  • 複雑なネストも、<div class=article> ... </div>のような divとclass名の組み合わせ より、<main-article> ... </main-article>のような 独自タグ で明確化
  • divの数を数える必要がなくなり、どこに要素を追加すべきか直感的に分かりやすい
  • 例：
    • <div class=article> <div class=article-header> <div class=article-quote> <div class=quote-body> ... </div> </div> </div> </div>のようなネスト構造
    • 独自タグの場合：<main-article> <article-header> <article-quote> <quote-body> ... </quote-body> </article-quote> <!-- ここに追加可能 --> </article-header> </main-article>

独自タグ利用の注意点

  • 意味的タグ （例：<section>, <header>, <footer>）が存在する場合はそれを使用
  • それ以外で divやspanの乱用 を避けたい場合に独自タグが有効
  • HTMLの標準仕様 に準拠した方法であり、主要ブラウザで 問題なく動作

まとめ

  • 独自タグ の活用でHTMLの 可読性・保守性向上
  • CSS でのスタイリングも直感的
  • 複雑な構造も 明確なタグ名 で管理しやすい

Hackerたちの意見

もちろんできるよ！全部インラインデフォルトがあって、必要に応じてCSSのベースラインを設定できるけど、これってHTMLの隠れた秘密みたいなもんだよね？知らないタグはHTMLUnknownElementになって、spanみたいに振る舞うよ。追記：過去にこれを避けてた理由は名前空間の問題だったけど、標準ではハイフンを使えるって言ってるから大丈夫。ネイティブ要素は-を使わないし。追記2：CSSセレクタともちゃんと動くからすごくいいよ。普通のHTMLドキュメントにみたいなものを書いても問題ないし。追記3：あと、タグとか、すぐにはHTML標準に採用されないものも、要素名と衝突しなければ使えるよ。将来的に要素名として採用されるかもしれない珍しいケースも、テキスト検索/置換で簡単に解決できるし。追記4：これって実際にはJavaScriptとはあまり関係ないけど、querySelectorやquerySelectorAllをこれらの作った名前でもネイティブ名と同じように使えるから、書くのがすごく楽しいよ。必要な時に少しだけVueを使って好きだったけど、今のHTMLがその隙間を埋めてくれてるね。

└

細かい指摘だけど、非標準の要素名にハイフンが含まれていて（他は構文的に有効なカスタム要素名である場合）、その要素のDOMオブジェクトはHTMLUnknownElementではなくHTMLElementのインスタンスになるんだ。標準の言葉を借りると、「有効なカスタム要素名の場合、HTMLElementを使うのは、将来的なアップグレードが要素のプロトタイプチェーンをHTMLElementからサブクラスへ直線的に移行させることを保証するためであり、HTMLUnknownElementから無関係なサブクラスへ横移動させることを避けるためです。」

デフォルトでは、spanのように振る舞うよ。Custom Element APIを使ってカスタマイズできるよ： https://developer.mozilla.org/en-US/docs/Web/API/Web_compone...

└

2014年にサポートがあまり広まっていない時に、カスタム要素をたくさん使ってたよ。美しくてエレガントな解決策だと思うし、Reactがあんなに大きくなったのはちょっと悔しいな。今は開発者がReactを使いたがるから、すべてがSPAじゃなきゃいけないみたいだけど、実際にはほとんどのユーザーは必要に応じてカスタム要素を使った良い古きHTMLの方がいいと思うよ。

└

記事にあるような例には、セマンティックな要素を使った方がいいと思うし、適切なところではウェブコンポーネントやカスタム要素を使いたいな。ウェブコンポーネントは確実に過小評価されてるよ。カスタム要素が必要だったことがあって、実装はそんなに難しくなかったよ。

これを使って、JSが無効の時にページのセクションを隠せるように、の逆を実装したよ。もちろんクラスを使って同じこともできるけど、カスタムタグは楽しいよ。 https://github.com/aaviator42/yes-script

これはあまり良い例じゃないね。この場合、実際のHTMLタグを使えばよかったかも。

... もっとたくさんのHTML ... この特定の例について一つだけ言わせてもらうと（広い概念については問題ないけど）、最初からdivの山にする必要はなかったかも。こんな感じの方がもっと理にかなってたかも： ... もっとたくさんのHTML ...

└

この例は、カスタムタグの弱点も示してるね。要素は一つの名前しか持てないけど、複数のクラスを持つことができる。クラスは順序のない集合だから、一般的には複数の要素でそれをエミュレートすることはできない。入れ子構造がクラスリストにはない順序を生むからね。

何年も前、blink タグを復活させることに決めたんだ。ブラウザを作るモンスターたちがサポートを削除しちゃったからね。タグを自由に作れるなんて知らなかったけど、試してみることにしたんだ。ちょっと jQuery を使って、可視性の設定をいじったら、ブラウザを直して素晴らしい点滅を復活させることができた。こんなことができるなんて驚いたよ。タグの種類は決まってると思ってたから。オープンソースにしようかとも考えたけど、コードは本当に10行くらいで、同じことをやってるものがたくさんあるんじゃないかと思った。

└

私は、blink がもう存在しないことに嬉しいよ。あれは、単純な HTML 要素では考えなきゃいけない行動だと思うから。

└

今は CSS だけで完全にできると思うよ！ https://www.w3docs.com/tools/code-editor/13719 .blink を blink に変更したら、クラスじゃなくてタグをターゲットにできて、うまくいったみたい。

Hacker Newsで議論の続きを見る