このサイトについて
サイトの概要や操作方法などを掲載しています。
1・このサイトについて
このサイトは、「HTML Standard（HTML Living Standard）」のHTML要素に関するチートシートです。主に、HTML要素の全体把握や、ネストの条件を深追い調査しやすくする目的で公開しています。
※ ネストの読み解き方の説明が必要な場合は、ヘッダーの「本のアイコン」をクリックしてください。
2・情報元と掲載内容
チートシートの情報は、主にHTML Standard（公式／英語）の日本語訳ページ（@Momdo Nakamura）からの転記です。※翻訳の二次著作権と注意事項については、日本語訳のトップページ上部に記載されています。
基本的には、日本語訳ページの第4章「HTMLの要素」と、「索引 > 要素」に記載されている情報を整理して、全体像を見渡せるようにテーブル形式で情報を一覧化しています。表組みの列の題名については独自の表現が混在しており、また、「読み」「意味（要約）」「関連する要素」の列については、当サイトで独自に追加したものになります。
管理者 : twitter @croo_mps
3・注意事項
当サイトに掲載している情報は、管理者の解釈による表現が含まれることからも、その正確さを保証できるわけではないことにご注意ください。 このチートシートは、あくまで補佐的なツールとして捉えて頂き、正確な情報が必要な場合は公式ドキュメントを確認するなど、必ずご自身で正否を判断してください。
情報の閲覧に関しては、テーブルの幅が広いため、ブラウザの横スクロールが必須になります。単にネスト条件を知りたいだけの場合には最良のビューとは言い難く、また、スマートフォンなどのスクリーン面積が狭いものでの閲覧に適しているとは言えません。HTML要素をブロック形式で列挙したモードも検討中ですが、現在は目的に則したビューのみを提供しています。
4・情報の更新
HTML Standard（HTML Living Standard）の仕様変更や、当サイトに記載している情報に誤りがあると気づいた場合は、日本語訳のページを元に更新をおこない、状況に応じて公式も参照します。
もし、ご意見や情報に不備などがありましたら、twitter@croo_mps までご連絡いただけると幸いです。
5・機能と使い方
このチートシートは、Excelのオートフィルタに、語句検索とネスト条件の表示機能が加わったような作りになっています。語句検索で目的の要素を絞り込んだり、ソートボタンで閲覧しやすくしたり、ネスト調査ボタンを使ってコード記述の仕様を調査できます。
チートシートの基本表示
チートシートは、行と列を使った一般的な表組みになっています。
横方向のスクロールが必要になりますが、大体のブラウザは、shift を押しながらマウスのスクロールボタンを回すと、横スクロールになります。
詳細情報の表示
表組みの「HTML要素 / 要素名」の列にあるHTML要素の名称を押下するとカード状の詳細情報が開きます。
詳細情報の中腹にあるリンクアイコンから、その要素に該当する日本語訳ページにリンクしています。記載している情報の量はHTML要素の仕様によって異なるため、内容が見切れている場合には詳細部分を下にスクロールしてください。
テーブルのソート
列の題名のうち、3段目のグレーのバー部分はソートボタンとなっています。押下すると、列の降順・昇順を切り替えできます。shift キーを押しながら操作すると、複数を組み合わせたソートが可能です。
ページアクセス時のデフォルトの並びは「No. / 連番」の列の昇順です。これは、日本語訳ページにおける要素の掲載順に、上から番号を割り振った通し番号をもとに並んでいます。ソートをデフォルトの状態に戻したい場合は、「連番」の列を昇順（※アイコンが下向き三角の状態）にしてください。
検索フォーム
語句検索フォーム（虫眼鏡のアイコンのフォーム）に任意の文字列を入力することで、表組みの行を絞り込めます。半角スペースに続けて更に文字列を入力すると、AND検索になります。
検索対象は、表組みの列に存在する文字列です。検索に不要そうな列はあらかじめ検索対象から除外しています。
カテゴリ、特徴、属性など、アイコン表示の列はテキストを表示していませんが、コード内部にテキストが存在するため語句検索に反応します。例えば、「フレージングコンテンツ」と入力すると、表の題名「フレージング」の列で丸と三角のアイコンのものがヒットします。
語句検索のフォームをクリックすると、カテゴリ名などが一覧で表示されます。これは、検索したくなると予想される語句を、あらかじめHTMLファイル側で記述したものです。この一覧の項目を選択すると、その語句がフォームに自動入力され、該当する行を絞り込めます。目的の語句があれば、入力のショートカットとしてお使いください。
検索機能は、特定の画面幅以下（スマートフォン相当）では非表示としています。
ネスト調査
「ネスト調査」は、HTML要素のネストとラップの条件を調べるための機能です。
「親」の列にあるボタンを押下すると、その行のHTML要素に対してラップ可能な要素が絞り込まれます。「子」の列にあるボタンを選択すると、その行のHTML要素に対してネスト可能な要素が絞り込まれます。
どのような方法で調査するかについての詳しい情報は、ヘッダーの「本のアイコン」を押下して表示されるドキュメントをご覧ください。
検索フォームとネスト調査の併用
検索フォームによる語句絞り込みと、ネスト調査の機能は併用できません。どちらか一方を利用すると、もう片方は解除されます。
表示調整
チートシートの表示サイズは、ある程度の調整がおこなえます。調整するには、検索窓右側にあるスライダーのようなアイコンを押下します。表示されたスライダーを左右にドラッグして調整してください。
ブラウザには拡大・縮小機能があるため不要かもしれませんが、表題などの文字サイズは変更せずに、内容だけ拡大・縮小したい、といった場合にお試しください。
特定の画面幅以下（スマートフォン相当）では、この機能を非表示にしています。
6・閲覧デバイス
表形式のチートシートのため、閲覧デバイスはPCモニタやタブレットなど、広いスクリーン面積のものを想定しています。 スクリーン面積の小さなモバイル端末については、利用シーンが限られると判断し、綿密な表示対応はおこなっていません。
7・リンク
- HTML Standard（HTML Living Standard） 公式／英語
- HTML Standard（HTML Living Standard） 日本語訳
利用方法と解説
HTML要素の仕様に関する情報や、チートシートを使ったネスト条件の調査方法などを紹介します。
個人が読み解いた内容を記載しているため、「解釈が誤っている可能性もある」とご注意いただいた上で、正確な情報が必要な場合は、必ずご自身で公式のドキュメントをご確認ください。
詳細を確認しやすいように、随所で日本語訳ページの該当箇所にリンクしています。
1・ネスト条件の読み解き方（概要）
基本
HTML要素のネスト条件は、基本的に要素ごとに定められている「コンテンツモデル」と「コンテキスト」の2つを使って読み解きます。
「コンテンツモデル」は、内部にネストできるもの（子）の条件になります。「コンテキスト」は、その要素を記述できる文脈（親）を表します。
読み解き方の例
例えば、Xという要素の「コンテンツモデル」が「フローコンテンツ」ならば、要素Xの子には、カテゴリーが「フローコンテンツ」の要素を記述できます。
また、Yという要素の「コンテキスト」が「フロー」や「フローコンテンツが期待される場所。」と書かれていた場合、要素Yは、「コンテンツモデル」が「フローコンテンツ」の要素の子に記述できます。
上記の例の場合、要素Yのカテゴリーがフローコンテンツであるならば、以下のような状態になります。
双方の条件が合致しているため「要素Xの子に要素Yを記述できる」という事になります。
様々な条件
カテゴリーだけが条件になっているものを見れば非常にシンプルな法則に見えますが、ネスト条件はカテゴリーだけで決まるわけではありません。
「コンテンツモデル(子)」と「コンテキスト(親)」には、カテゴリー以外にも様々な条件が記載されています。
特定の要素名を指定していたり、また逆に除外していたり、個数や記述順序などの特殊な条件が指定されている場合もあります。
要素ごとに条件を読み解いていけばパズルのように全てが合致するはずですが、公式ドキュメントのページを繰りながら全容を把握するのは結構な労力と時間が必要になります。
2・チートシートを使ったネスト調査の方法
調査に必要な仕様が一覧化されていれば、ネスト条件を調査しやすくなります。
しかし、一覧化したところで「コンテンツモデル(子)」と「コンテキスト(親)」の両方をバラバラに追いかけていくと、基準が変わってしまい混乱するばかりです。調査するときには「常に一方方向に読み解く」方が楽になります。
考え方と方針
どういう事かというと、例えば
ulの子にliが記述してあるのは正しい構造です。これは、「親から子の方向」に条件を確認しても「子から親の方向」に確認しても、お互いの条件が合致しているからです。逆に、どちらかの条件が合っていなければ間違いになります。つまり、確認する方向を親か子のどちらか一方方向に絞っても、最終的に正しい条件は必ず同じになります。このことから、基準を変えて仕様を追いかけるよりも、まずは一方方向を意識して確認していく方が読み解きしやすくなる、という事です。この考え方のもと、このチートシートでは、ネストの条件を「子の方向」に見て行きやすいように構成しています。
具体的な使い方
ネスト条件の調査をおこなうには、チートシートの「ネスト調査」の列の「親」と「子」のどちらかのボタンを押します。どちらを押した場合でも、調査方法は同じです。ボタンを押すと、条件に該当する要素がアクティブになります。アクティブになった要素の親側（要素名の列で左に飛び出しているもの）の「コンテンツモデル」を確認してから、子の「コンテキスト」や「カテゴリ」の列を見て、互いの条件が合致しているかどうかを確認します。
使い方の例
headの「子」のボタンを押してみます。headのコンテンツモデルは「メタデータ」です。アクティブになるのはtitle、base、linkなどの要素です。これらの「主要コンテンツカテゴリ > メタデータ」の列を見ると「○」になっており、headのコンテンツモデルと一致しています。また、アクティブになった要素の「コンテキスト」を確認するとheadが指定されているため、条件は合致しています。逆に、
headの「親」のボタンを押下してみます。アクティブになったのはhtmlのみです。htmlのコンテンツモデルは「head, body」です。対して、headはカテゴリがありませんが、コンテキストはhtmlで、条件は合致しています。深追い確認
もし表記が食い違っている場合や違和感がある場合は、「HTML要素 / 要素名」の列の要素の名称をクリックして詳細情報を開きます。詳細を確認すると、例外などの条件が書いてある場合があります。さらに詳しい情報が必要な場合は、開いたカードの中腹にあるリンクボタンから日本訳ページに遷移して、コードのサンプルや特殊条件の解説がないかを確認します。
混乱しやすい例としては、親となる要素のコンテンツモデルには「フロー」と書いてあるのに、アクティブになったコンテキストには「フレージング」と書かれているパターンです。これは、公式では省略してこのように表記されているためです。どういうことかというと、フローコンテンツは、ほぼ全ての要素を包括する大きなカテゴリであり、すべてのフレージングコンテンツはフローコンテンツになります。この場合、子となる要素のカテゴリを確認すると、フレージングとフローの両方に該当していることが確認できます。
一覧に記載している情報
チートシートの「コンテンツモデル」と「コンテキスト」の列は、日本語訳ページの「索引 > 要素」の内容を転記したものです。「*」印があるものは、遷移先の表の末尾に注記があるとおり、何らかの制限や条件によって複雑であることを示しています。このマークがあるものは、大体が何らかの注記が書かれているため、要素名をクリックして詳細を確認してみてください。
3・データの分類（カテゴリー）について
カテゴリーの理解は、HTML要素とネスト条件の読み解きに必要となるため、簡単に説明します。
カテゴリーは、コンテンツモデルの一種として定義されています。（コンテンツモデルの公式上の定義は「3 セマンティックス、構造、HTML文書のAPI群」の「3.2.5 コンテンツモデル」から確認できます。）
HTML要素の多くは、何らかのカテゴリーに該当していますが、どれか1つだけに該当するのではなく、複数に該当するものがあり、また、どれにも該当しないものもあります。これは、チートシート上で各要素の行を横に見ていけば把握できます。
主要なカテゴリー（コンテンツカテゴリー）
主要なカテゴリーは以下の7つです。それぞれ日本語訳ページの説明にリンクしています。
重複や包括の関係性については、以下のリンクで表示される図を参考にすると、直観的に捉えやすくなるかもしれません。
Google画像検索結果
重複や包括の関係性をテキストで言い表すと、以下のような表現になります。（日本語訳ページより抜粋）
引用元 : https://momdo.github.io/html/dom.html#kinds-of-content
他のカテゴリー
その他、以下のカテゴリーがあります。
セクショニングルートについては、公式上では「4.3.11 見出しとセクション」の説明の一部として登場し、公式文書上の目次レベルでは定義されていませんが、チートシートでは便宜上「他のカテゴリー」の中に入れています。※ この記載方法は今後変更するかもしれません
この他にも、フォーム関連をまとめたカテゴリーがあります。チートシート上ではこれらを整理して「フォーム関連カテゴリ」の列に記載しています。
ネスト条件に影響するカテゴリー
ネスト条件に影響する（条件としてドキュメントに記載されている）カテゴリーは、「主要コンテンツカテゴリー」の7つ全てと、「スクリプトサポート要素」を合わせた合計8つです。
ネスト条件に影響しないカテゴリー
「パルパブルコンテンツ」と、チートシート記載の「フォーム関連カテゴリ」はネスト条件には影響しません。
パルパブルコンテンツ
「パルパブルコンテンツ」は、明白、明瞭な（palpable）コンテンツで、「人間がコンテンツとして認知できるもの」といったニュアンスのカテゴリです。
この要素の内部には、hidden属性が指定されていない1つ以上のノードをもつべき（分かりやすく言い換えれば、文章や画像など、人間がコンテンツと認識できるものが存在すべき）との指針が記されていますが、パルパブルコンテンツに該当するかどうかはネスト条件には直接影響しません。
フォーム関連のカテゴリー
フォーム関連のカテゴリーは、通常のカテゴリーの追加情報の扱いとして存在しているため、直接ネスト条件に影響することはありません。
引用元 : https://momdo.github.io/html/forms.html#categories
4・特殊なコンテンツモデル
チートシート上で「コンテンツモデル・概要（特性／子）」を見ていくと、カテゴリーに比べて、特殊に感じるものがあります。これらは公式の「3.2.5 コンテンツモデル」に説明が記載されていますが、ここではチートシートの記載内容をもとに説明します。
空（Nothing。)
コンテンツモデルの「空（nothing）」は、HTMLの構文に終了タグがない要素か、中に何も記述してはならない要素です。要素名を押下して開く詳細情報では「Nothing。」と表記されていますが、意味は同じです。※ チートシートで検索フォームに「空」と入力すると、該当する要素が絞り込めます。
テキスト（Text。）
テキストは「Textノード」であり、「Textノード」とは、タグ以外の文字データ（ASCII文字）です。空白、タブ、改行なども含みます。テキストはフレージングコンテンツであるため、コンテンツモデルが「フレージング」の内部にネストできます。例えば、
bemikbdなどの要素のコンテンツモデルは「フレージング」であるため、内部にテキストを記述できます。要素名を押下して開く詳細情報で「Text。」と表記されていますが、意味は同じです。
透過的
コンテンツモデルには「透過的」と表現されているものがあります。
原文では「transparent」（トランスペアレント）です。※ チートシートで「特徴 / 透過的」の列のソートボタンを押して昇順にするか、検索フォームに「透過的」と入力すると、該当する要素が分かりやすくなります。
透過的なコンテンツモデルは、親のコンテンツモデルを受け継ぎます。言い方を変えると、既存のコードのネスト条件が正しいのであれば、透過的な要素をそのコードの間に差し挟めると言えます。既存コードのネスト条件が正しくないのに、透過的なコンテンツモデルの要素を差し込んで、正しくないネストの状態をキャンセルする目的で記述することはできません。
透過的なコンテンツモデルは、複雑な条件が指定されているものがあるため、仕様をよく確認する必要があります。
例えば、
aのコンテンツモデルの詳細を見ると、「透過的であるが、インタラクティブコンテンツの子孫、a要素の子孫、またはtabindex属性が指定された子孫が存在してはならない。」と記載されています。[MATHML]による, [SVG]による
mathとsvgが該当します。公式のコンテンツモデルの解説では、「3.2.5.4 段落」の注意書きに登場する程度で、コンテンツモデルとして見出しレベルでの定義はなされていないようですが、「索引」の「子」の列には[SVG]による, [MATHML]による、と記載されていることから、チートシートでは「コンテンツモデル(子)」の枠に記載しています。
5・ネスト条件のとらえかた
ネスト条件に関係するもの
ネスト条件を調査していると、以下の内容が関わっていることが分かります。
このうち、特に把握しづらいのは「例外や注記・補足情報」に該当するものです。
例えば、
main要素（4.4.14 main要素）の「この要素を使用できるコンテキスト」には、「フローコンテンツが期待される場所、ただしそのフローコンテンツが階層的に正しいmain要素である場合に限る。」と記載されていますが、その少し下のエリアには「文書は、hidden属性が指定されないmain要素を複数持ってはならない。」から続く説明が記載されていいます。ネスト条件を読み解くには、このような情報も注意深く確認する必要があります。
ネスト条件の種類
ネスト条件は、大雑把に以下の種類があると捉えると分かりやすくなるかもしれません。
グループによる条件
該当するHTML要素が複数存在している条件指定です。カテゴリーや、特定のコンテンツモデルなどが該当します。
直接指定による条件
条件にHTML要素名が表記されているものです。例としては、
rt,rpは「コンテキスト(親)」にrubyのみを指定しています。このため、rubyが親に存在していない状態でコードを記述するのは、仕様に則していないことになります。その他の条件
上記以外の条件があるものです。例えば、
dlのコンテンツモデル（子）は、詳細を見ると「1つ以上のdt要素の後に来る1つ以上のdd要素からなり、任意でスクリプトサポート要素と混合される0個以上のグループ。または：オプションでスクリプトサポート要素と混合される、1つ以上のdiv要素。」との記載があり、数量を含んだ複雑な条件になっています。条件の混在
グループと直接指定などが混在している条件も多くみられます。例えば、
olのコンテンツモデル（子）は、liの直接指定と「スクリプトサポート」のカテゴリーです。これに該当するのは、li、script、templateの3つです。また別の例では、
thのコンテンツモデルは「フロー」ですが、詳細を見ると「フローコンテンツ、ただしheader、footer、セクショニングコンテンツ、またはヘディングコンテンツの子孫を除く。」との記載があり、混在して除外しています。