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>の代わりに意味のある名前のタグを使うと、コードの理解がしやすくなる
    • たとえば<div class="article-header">の代わりに<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> は WHATWG が新要素として追加するまでは HTMLUnknownElement として扱われる一方、<tag-name> は 有効な HTMLElement としてレイアウトやスタイリングに有用だと説明している
    JavaScript の Custom Elements API でアップグレードすると 定義済みカスタム要素 になる
    これはすべてのブラウザで標準の動作であり、W3C HTML Validator もダッシュを含むカスタム要素を HTMLElement として認識する
    ただしデフォルトの UA スタイルシートにある [hidden]{display:none} ルールは継承されないため、自分で指定する必要がある
    <DIV> がデフォルトで display:block なのも UA スタイルシートのおかげなので、カスタム要素には自分で display プロパティを設定する必要がある
    CSS の :defined と :not(:defined) セレクタにより、定義済み／未定義の要素を区別できる
    Declarative Shadow DOM（<template shadowrootmode="open">）も同様に 未定義のカスタム要素 を生成する

    • Chromium 基準では UA スタイルシートの問題ではなく、hidden が HTML プレゼンテーション属性 だからだと反論している
      UA スタイルシートはカスタム要素にも同じように適用され、[hidden] ルールは存在しない
      hidden は align="right" のように、属性そのものがスタイルとして解釈される例だという
    • ダッシュ（-）の代わりに コロン（:） を使えていれば、XML 名前空間を自然に統合できただろうと惜しんでいる
      nginx や apache でコロンをハイフンに変換することもできただろうと述べている
      「1999年に戻ることはできないが」と、回顧的な調子で締めくくっている
    • なぜこのやり方が デフォルトの慣行 になっていないのか疑問を呈している

  • サンプルコードの <div> の入れ子構造が過剰だと指摘している
    <article>、<header>、<blockquote> などの セマンティックタグ を使うほうが適切だと提案している

    • カスタムタグは class 属性と違って 1つの名前しか持てない と指摘している
      class は複数持てて順序もないが、入れ子のカスタム要素は順序を強制するため、同じ表現をするのが難しい
    • 「div soup」が悪いのではなく、HTML が構造とスタイルを 強く結び付けた設計判断 の結果だと分析している
      1996年には妥当だったが、今ではそうではないと評価している

  • 3〜4年間カスタム要素を使ってきた経験を共有している
    アイデアは 巧妙だが実務では扱いにくい
    カスタムタグを多用しすぎると可読性が落ち、ブロック／インラインの区別もしにくくなる
    バランスの取れたアプローチとして、基本タグはそのまま使い、<x-card> や <x-hero> のような コンポーネント型要素 にだけカスタムタグを使う
    下位コンポーネントは <div slot="hero-blurb"> のように slot 属性 で区別する
    class は修正・カスタマイズ用途に限定し、構造は slot で表現する方式を好んでいる

    • バランスの取れた Web Components アプローチに強い関心があるとして、例やツールセットを求めている
      自作のGood.HTMLを紹介し、自動フック（autohook）、テンプレートリテラルベースの補間、整然としたコンポーネント構造 をサポートすると説明している
      < !app-header /> のような 自己終了カスタム要素 もコメントノードのトリックで実装したと付け加えている
    • CSS で slot 属性を基準に選択するなら div[slot="hero-blurb"] のように書けばよいのかと質問している
    • このパターンは BEM の block–element 構造 を思い起こさせると述べている

  • 基本的にカスタムタグは <span> のように動作する
    必要であれば Custom Element API で動作を定義できる

    • 2014年にカスタム要素を広範に使っており、React が主流になったことを残念に思う と述べている
      ほとんどのユーザーにとっては SPA よりも HTML+カスタム要素の組み合わせのほうがよかったはずだと考えている
    • セマンティック要素を優先して使い、必要なときだけカスタム要素を使うのがよいとしている
      自作のHypalinkの例を共有し、Web Components が過小評価されている と指摘している

  • <yes-script> というカスタムタグを作って <noscript> の逆の役割を実装したと紹介している
    JS が無効化されている場合に特定の領域を隠せる
    プロジェクトリンクを共有している

    • CSS の @media (scripting) 機能を使えば 純粋な CSS だけでも同じ効果 を出せると提案している
      MDN ドキュメントへの参考リンクを添えている

  • 過去にブラウザから削除された <blink> タグを 自分で再現 した経験を共有している
    jQuery と visibility 操作で実装し、ブラウザが任意のタグを許容する事実に驚いたという
    コードは 10行程度しかないので公開はしていないが、似た試みは多いだろうと推測している

    • 実際にはほとんどのブラウザは <blink> を実装したことがなく、Firefox と Opera だけが2013年までサポート していたと説明している
    • Flash がなくなったことを今でも惜しんでいる
    • CSS だけでも <blink> 効果を出せるとして、サンプルコードを共有している
      .blink の代わりに blink セレクタを使えばタグに直接適用できるという
    • <blink> のような動作は単なる HTML 要素として提供するには 意味が大きすぎる機能 であり、なくなってよかったと述べている

  • <main-article>、<article-header> などの例は実際の HTML タグで置き換えられると指摘している
    <article>、<header>、<blockquote> を使うほうが適切だという

    • あらかじめ定義された HTML タグを使えば、ブラウザの デフォルトスタイリングの恩恵 も受けられると付け加えている

  • カスタムタグは基本的に <span> のようにインラインでレンダリングされるが、CSS で デフォルトの display プロパティ を指定すればよい
    以前は名前空間の問題で避けていたが、標準でハイフン（-）が許可されたことで衝突の危険はなくなった
    CSS セレクタでも問題なく動作し、querySelector からもアクセスできる
    Vue のようなフレームワークがなくても 現代の HTML だけで十分に表現可能 だと感じている

    • ハイフンを含む非標準要素は HTMLUnknownElement ではなく HTMLElement として扱われると補足している
      これは将来アップグレードされる際にプロトタイプチェーンが自然に拡張されるようにするための設計だという

  • すべてのカスタム要素にデフォルトスタイルを指定するには、次のようにすればよい

    :where(:not(:defined)) {
  display: block;
}
    • この方法を探していたとして、感嘆と感謝 を示している

  • 昔の IE は HTML5 タグを認識できなかったため、2010年ごろに自作スクリプトで対処したと振り返っている
    JS でタグを一度生成すれば IE が認識し、その後削除しても問題なかった
    この方法で 任意のタグもレンダリング可能 だと気づいたという
    当時のブログ記事も共有している

    • 人気のあった html5shim も同じ仕組みで動いていたと付け加えている