この記事の途中に、以下の記事の引用を含んでいます。
You can make up HTML tags
常識が覆る!?「HTMLタグ、自作可能」という新常識
今回紹介するのは、「HTMLにおけるタグの自作」という一見イレギュラーなアイデアです。
既存の <div> や <span> などの”お決まり”タグしか使っていない方は、この記事を読むとHTMLに対する認識が大きく変わるでしょう。
なぜなら、「自分だけのタグを”名乗って”使っても、ブラウザは正しく表示してくれる」というのが、この記事の核心だからです。
一見ハッキングや裏技っぽく見えますが、実はこれはW3Cの標準仕様に沿った正当な挙動であり、多くのエンジニアがまだ気付いていない表現力豊かなHTMLの活用術なのです。
驚きの事実！タグ名を勝手に作っても動く
まずは、記事のエッセンスを引用してご説明します。
Browsers handle unrecognized tags by treating them as a generic element, with no effect beyond what’s specified in the CSS. This isn’t just a weird quirk, but is standardized behavior.
「ブラウザは、認識できない（標準タグでない）タグを、汎用の要素として扱い、CSSで指定されたことしか影響しない。これはたまたまそうなっているのではなく、標準化された仕様だ」と述べられています。
また、次のようなサンプルコードも引用されています。
… you can write HTML like this:
<cool-thing>Hello, World!</cool-thing>
… and CSS like this:
cool-thing { display: block; font-weight: bold; text-align: center; filter: drop-shadow(0 0 0.5em #ff0); color: #ff0; }
つまり <cool-thing> という見慣れないタグをHTML内で勝手に使っても、ちゃんとブラウザで「Hello, World!」が表示されるのです。
しかも、CSSでタグ名そのものをセレクタとして指定でき、普通の要素と全く同様に見た目もコントロールできます。
汎用タグだらけの世界から卒業！独自タグのメリットと注意点
1. 仕様には明記されている標準挙動
一部の人は「自作タグなんてグレーな裏技では？」と疑いたくなります。
ところがこの挙動は、HTML Living Standard（WHATWG仕様）などできちんと定義された、「既定外の要素(unrecognized elements)」の振る舞いです。
要するに、未登録のタグは「ほぼ <div> や <span> のようなただのブロック/インライン要素」として処理され、見た目や意味的な影響はありません。
ただし「unknown elements」には標準でスタイル指定も意味付けも何もされませんから、見た目は完全にCSS頼みになります。
2. 独自タグ=コードの分かりやすさ・メンテの容易さ
なぜ独自タグが重要か。
それは、特に「入れ子構造」や「再利用パーツ」が増えるサイト・アプリケーションにおいて、HTMLが驚くほど読みやすくなるからです。
たとえば、従来のパターンだと・・・
“`html
“`
このように <div> の入れ子にclassが増えていく一方、見た目だけでなく構造による「意味」も埋もれてしまいます。
慎重に <div> の数を数え合わせながら閉じるのは、誰でも一度は経験がある「HTMLあるある」でしょう。
これに対して――
“`html
“`
のように読んだ瞬間に構造が明確です。
実際、Web Componentsやカスタムエレメントといった現代的な技術も、まさにこういった「カスタムタグ思想」を公式に取り入れています。
3. 衝突リスク回避の制度：ハイフン入りがベスト
記事でも強調されていますが、
If you include hyphens in the name, you can guarantee that your tag won’t appear in any future versions of HTML.
つまり、タグ名にハイフンさえ含めれば（例：<my-widget>）、今後どんな新バージョンのHTMLが出ても、公式タグとかぶるリスクは極端に低くなります。
これは実際にWeb Componentsのカスタムエレメントが「必ずハイフンを入れる」という仕様になっている理由と一致します。
カスタムタグ活用──機能の奥深さと制約
1. 構造と意味を両立するマークアップが簡単に
独自タグ利用でもっともありがたいのは、「見て分かるHTML」になることです。
特に大規模なプロジェクトや自チーム独自のドメイン知識を盛り込んだサイト、あるいはマークダウン→HTML自動変換のような用途でも、「タグ自体が部品の意味を持つ」ことで可読性・メンテ性を劇的に高めてくれます。
2. SEO/アクセシビリティへの課題
一方で、独自タグが”何者なのか”をブラウザや検索エンジンは知りません。
WAI-ARIA属性の活用や、role等によるセマンティクス指定が不可欠になる場面もあるでしょう。
例えば <nav> であれば「navigation領域」であることが明示されますが、<nav-bar> というオリジナルタグは何なのか、検索ロボットは理解できません。
ビジュアル用途であれば良いですが、「意味によるSEO最適化」や「スクリーンリーダー対応」を視野に入れるとタグ選びは慎重さが求められます。
3. Web Componentsとの違い・使い分け
「じゃあWeb Components（カスタムエレメント）と何が違うの？」と疑問を持つ方も多いかもしれません。
Web Componentsは、”自作タグ”に加えて「ふるまい」や「状態」までセットできますが、この記事が紹介するのは単に見た目やDOM構造を分かりやすくするだけの『素タグ』自作です。
スクリプトを使わずに、単純にHTMLを整理したい場合や、スタイルだけカスタムしたい場合にはこの技法が手軽で便利です。
批評的視点：「独自タグ」は銀の弾丸ではない
HTMLタグの自作は一見魔法のようですが、「適切な場面で使う」ことが必要です。
過剰な自作タグは保守リスク
プロジェクト毎・個人毎にタグを作りすぎると、他の開発者が参照したとき「そのタグの意味が直感的に分からない」「他のシステムと統合できない」といった問題も生じます。
とりわけ、エディタの補完やパーサー、Lintツールなどが「知らないタグ」として警告を出すこともありえます。
不必要に「何でもかんでも自作タグ」にはせず、プロジェクトの方針やチーム共通認識の範囲で運用すべきでしょう。
充実したHTML5要素の活用が大前提
HTML5で導入された<nav>, <main>, <section>, <aside>, <article>, <figure>, <details>など、もはや「全部div」から「意味ごとにタグを分ける」のが自然になりました。
まずは既存の標準タグで表現できるところは素直に任せ、「既存タグではまかなえない構造・ドメイン独自の概念」にだけ自作タグを充てるのが正しい姿勢です。
まとめ：HTMLの「柔軟性」と「読みやすさ」の美味しいとこ取りを目指そう
本記事が伝えている「HTMLタグ自作」が与えてくれる最大のメリットは、構造の意味付けと可読性への貢献です。
クラス名管理や入れ子タグの呪縛から逃れ、チームや個人の中で通じるコンポーネント設計やパーツ分割が可能になります。
一方で、SEOやアクセシビリティ、将来のメンテ性を守るためにも「標準タグの積極活用」「チーム合意による命名」「Web Componentsとの使い分け」など、適切な知識と運用ルールが不可欠です。
普段何気なく使っていたHTMLにも、まだまだ伸ばせる表現力が隠されていることは、Web制作に関わる多くの人にとって新鮮な発見だったのではないでしょうか。
ぜひ一度、自分のHTMLコードを見直して「ここは独自タグで読みやすくできるか？」と考えてみてください。
categories:[technology]
コメント