ウェブ開発者向けの自作ツール
～HTML入れ子構造確認表のご紹介～

❥記事・ツール内の情報は一通り確認してから掲載していますが、誤りが含まれる可能性もあります。ご了承いただけますようお願いします。

ツール本体(Excel)のダウンロード

まずは早速、作成したツールのダウンロードリンクです。下記リンクからHTML入れ子構造確認表のExcelファイルをダウンロードしてください。

「HTML入れ子構造確認表」をダウンロード▽

なお、マクロなどは組み込まず全ての機能を関数のみで作成していますので、セキュリティやコンテンツ許可の設定などは不要かと思います。。

前提: HTMLの入れ子構造について

さて、ツールの使い方についてご紹介する前に、まずはHTMLの入れ子構造ルールについてご説明したいと思います。既にご存じの方は次項の内容まで読み飛ばしてください。

HTML5では「段落の中にリンクを入れる」、「表の中に行を追加する」というように、要素を入れ子構造にすることができます。ただこの入れ子には具体的なルールがあり、どんなものでも子要素にできるという訳ではないんです。

詳細について説明するとHTMLの要素にはそれぞれ「何の子要素に設定できるか」を示す「カテゴリ」と「何の親要素に設定できるか」を示す「コンテンツモデル」という指標があり、今回作成したツールでもこの2つを基準に入れ子構造を判断しています。

メタデータコンテンツ・フローコンテンツ・セクショニングコンテンツ・ヘディングコンテンツ・フレージングコンテンツ・エンベディッドコンテンツ・インタラクティブコンテンツといったカテゴリ/コンテンツモデルがありますが、簡単に言えば「子要素のカテゴリが親要素のコンテンツモデルと一致していれば入れ子にしてよい」ということになります。

HTMLのコンテンツモデルについてより詳しく知りたい方は、こちらのサイトをご参照ください。

ツールの使い方・注意点

使い方

今回作成したツールは、HTML要素のカテゴリとコンテンツモデルを手動で確認するための「一覧表」シートと、入力したタグの子要素として設定できるものを一覧表示してくれる「検索フォーム」シートの2つから構成されています。

「検索フォーム」シートを利用する場合、まずはB1セルに検索したい要素名を小文字で入力してください(例: 「div」、「span」など)。

決定すると自動的に関数が動き、A3・B3セルに検索した要素のカテゴリとコンテンツモデルが、A6以下に子要素として設定できる要素の一覧が表示されます。

表示された一覧の中から、自ら子要素として使いたいタグを選んでご利用ください。

注意点

本ツールは特殊な入れ子構造ルール、例えば必須の子要素や冷害的に子要素とできるもの、例外的に子要素とできないものなどには対応できていません。

あくまでカテゴリ・コンテンツモデルに沿った入れ子構造ルールを確認するためだけのツールですので、ご理解・ご了承の上お使いください。

まとめ

ということで、今回はLUCAが仕事用に作った、HTMLの入れ子確認表についてご紹介しました。

HTMLを知らない方にとっては意味の分からない記事になってしまったかもしれませんが、HTMLに興味のある方・ウェブ開発を勉強中/練習中の方などはぜひご利用ください。