HTML5

基本

構造

 編集:2022.09.29 by T.A.

以下仕様書などより。

内容モデル

コンテンツ モデル。

ASCII 空白文字は常に要素の間に許可される。ユーザー エージェントは、DOM で Text としてソース マークアップにおける要素間のこれら文字を表す。空の Text ノードおよびそれらの文字の単なる配列から成る Text ノードは、要素間の空白文字と見なされる。

要素間の空白文字、コメント ノード、および処理命令ノードは、要素の内容が要素の内容モデルと一致させるかどうかを確立するときに無視されなければならず、文書および要素のセマンティックスを定義するアルゴリズムをたどるときに無視されなければならない。

nothing内容モデル

要素の内容モデルがnothingである場合、要素は、(要素間の空白文字以外)は、Text ノードおよび要素ノードを一切含んではならない。

内容の種類

コンテンツの種類。


メタデータ内容

メタデータ コンテンツ。見栄えまたは後の内容の振る舞いを設定する、または他の文書との関係を設定する、または他の "帯域外の" 情報を運搬する内容。

BASELINKMETANOSCRIPTSCRIPTSTYLETEMPLATETITLE

フロー内容

フロー コンテンツ。文書およびアプリケーションの BODY で使用される多くの要素は、フロー内容として分類される。

AABBRADDRESSAREAMAP要素の子孫の場合)、ARTICLEASIDEAUDIOBBDIBDOBLOCKQUOTEBRBUTTONCANVASCITECODEDATADATALISTDELDETAILSDFNDIALOGDIVDLEMEMBEDFIELDSETFIGUREFOOTERFORMH1H2H3H4H5H6HEADERHGROUPHRIIFRAMEIMGINPUTINSKBDLABELLINK(BODY内で許可される場合)、MAIN(階層的に正しいMAIN要素の場合)、MAPMARKMATHMENUMETAitemprop属性が存在する場合)、METERNAVNOSCRIPTOBJECTOLOUTPUTPPICTUREPREPROGRESSQRUBYSSAMPSCRIPTSECTIONSELECTSLOTSMALLSPANSTRONGSUBSUPSVGTABLETEMPLATETEXTAREATIMEUULVARVIDEOWBR自律カスタム要素テキスト

セクショニング内容

セクショニング コンテンツ。セクショニング内容は、見出しおよびフッターの範囲を定義する内容。

ARTICLEASIDENAVSECTION

ヘディング内容

ヘディング コンテンツ。ヘディング内容はセクションのヘッダーを定義する(明示的にセクショニング内容要素を用いてマークアップされようとなかろうと、またはヘディング内容自体によって暗黙であろうとなかろうと)。

H1H2H3H4H5H6HGROUP

フレージング内容

記述コンテンツ(phrasing content)。フレージング内容は、文書のテキストおよび段落内レベルでそのテキストをマークアップする要素。段落からフレージング内容が続く。

AABBRAREAMAP要素の子孫の場合)、AUDIOBBDIBDOBRBUTTONCANVASCITECODEDATADATALISTDELDFNEMEMBEDIIFRAMEIMGINPUTINSKBDLABELLINKBODY内で許可される場合)、MAPMARKMATHMETAitemprop属性が存在する場合)、METERNOSCRIPTOBJECTOUTPUTPICTUREPROGRESSQRUBYSSAMPSCRIPTSELECTSLOTSMALLSPANSTRONGSUBSUPSVGTEMPLATETEXTAREATIMEUVARVIDEOWBR自律カスタム要素テキスト

内容モデルのコンテキストにおいてテキストは、何もないか、Text ノードのいずれかを意味する。テキストは時に、そのままで内容モデルとして使用されるが、フレージング内容でもあり、要素間の空白文字でもあるかもしれない(Text ノードが空であるか、単に ASCII 空白文字を含む場合)。

エンベディッド内容

埋め込みコンテンツ(Embedded content)。エンベディッド内容は、他のリソースから文書に取り込む内容であるか、文書へ挿入される他の語彙(ごい)由来の内容。

AUDIOCANVASEMBEDIFRAMEIMGMATHOBJECTPICTURESVGVIDEO

HTML 名前空間以外の名前空間に基づく、メタデータでなく内容を伝える要素は、この仕様で定義される内容モデルの目的のためのエンベディッド内容。(たとえば、MathML、またはSVG。)

一部のエンベディッド内容要素は、フォールバック コンテンツを持つこともできる。これは外部リソースが使用できない場合(たとえば、サポートされていないフォーマットであるため)に使用される内容。もしあれば、要素の定義はどのようなフォールバックであるかを記載する。

インタラクティブ内容

対話型コンテンツ(interactive content)。インタラクティブ内容は、特にユーザーとの交流を意図する内容。

Ahref属性が存在する場合)、AUDIOcontrols属性が存在する場合)、BUTTONDETAILSEMBEDIFRAMEIMGusemap属性が存在する場合)、INPUTtype属性がHidden状態でない場合)、LABELSELECTTEXTAREAVIDEOcontrols属性が存在する場合)。

パルパブル内容

知覚可能コンテンツ(palpable content)。一般的な規則として、内容モデルが任意のフロー内容またはフレージング内容を許可する要素は、内容に少なくとも 1 つのノードを持つべき…。これがパルパブル内容であり、hidden 属性が指定されていない。

しかし、この要件は厳格な要件ではない。というのは、要素が合法的に空にできる多くのケースがあるため。たとえば、スクリプトによって後で埋められるプレースホルダーとして使用される場合、または要素がテンプレートの一部であり、ほとんどのページで埋められるが、一部のページで関係しない場合などがある。

適合性チェッカーは、オーサリングの援助として、この要件を満たせない要素を見つけるためのメカニズムを制作者に提供するよう推奨される。

次の要素はパルパブル内容:

AABBRADDRESSARTICLEASIDEAUDIOcontrols属性が存在する場合)、BBDIBDOBLOCKQUOTEBUTTONCANVASCITECODEDATADETAILSDFNDIVDL(要素の子が少なくとも1つの名前‐値グループを含む場合)、EMEMBEDFIELDSETFIGUREFOOTERFORMH1H2H3H4H5H6HEADERHGROUPIIFRAMEIMGINPUTtype属性がHidden状態でない場合)、INSKBDLABELMAINMAPMARKMATHMENU(要素の子が少なくとも1つLI要素を含む場合)、METERNAVOBJECTOL(要素の子が少なくとも1つLI要素を含む場合)、OUTPUTPPREPROGRESSQRUBYSSAMPSECTIONSELECTSMALLSPANSTRONGSUBSUPSVGTABLETEXTAREATIMEUUL(要素の子が少なくとも1つLI要素を含む場合)、VARVIDEO自律カスタム要素要素間の空白文字でないテキスト

フォーム関連内容

フォーム関連コンテンツ(form-associated content)は form 属性によって表される、フォーム オーナーを持つ要素を含みます。フォーム オーナーは、このカテゴリーの要素を内包する <FORM> 要素か form 属性で id が指定された要素です。

BUTTONFIELDSETINPUTKEYGEN 非推奨LABELMETEROBJECTOUTPUTPROGRESSSELECTTEXTAREA

¶省く。

スクリプト サポート要素

スクリプト サポート要素は、自分自身で何も表さない(つまりこれらはレンダリングされない)が、たとえばユーザーに機能を提供するために、スクリプトをサポートするために使用される。

次の要素は、スクリプト サポート要素:

SCRIPTTEMPLATE

透過的な内容モデル

透過的なコンテンツ モデル(transparent content model)。いくつかの要素は透過的といわれる。内容モデルの説明でそれらの要素は“透過的”とされる。透過的な要素の内容モデルは、その親要素の内容モデルを受け継ぐ。“透過的”である内容モデルの役割で要求される要素は、透過的な要素がある、透過的な親要素の内容モデルの役割で要求されるものと同じ要素。

DELINS、?。

段落

典型的な段落は、活版印刷において見られるような、特定の主題を議論する 1 つ以上の文をもつテキストのブロックを形成する、フレージング内容の連続であるが、より一般の主題に関する分類に対しても用いられる。たとえば、住所もまた段落であり、フォームの一部、署名、詩のスタンザも同様。


グローバル属性

次の属性は共通で、(この仕様で定義されない属性でさえも)すべてのHTML要素で指定してよいもの:

DOM は、すべての名前空間ですべての要素に classidslot 属性に対するユーザー エージェントの要求を定義する。[DOM]

class、id、slot 属性は、すべてのHTML要素に指定されてもよい。

イベントハンドラー内容属性

以下のイベントハンドラー コンテンツ属性は任意のHTML要素に指定されてもよい:

* BODY 要素上で指定される場合、異なる意味を持つ。
data-*属性

カスタムデータ属性は、文字列 "data-" で始まる名前空間のない名前をもつ属性であり、ハイフンの後に少なくとも1文字を持ち、XML 互換であり、ASCII 大文字を含まない。

カスタムデータ属性は、ページまたはアプリケーションへ私的なカスタム データ、ステート、アノテーションなど類似のものを記憶することを意図する。これ以上適切な属性や要素は存在しない。

この属性は、属性を使用するサイトの管理者に知られないソフトウェアによる使用を意図しない。複数の独立したツールによって使用される一般的な拡張のために、この仕様は明示的に機能を提供するために拡張されるべき…、またはマイクロデータのような技術は(標準化された語彙で)使用されるべきかのいずれか。

たとえば、音楽に関するサイトは、各トラックの長さを含むカスタム データ属性でアルバム内のトラックを表すリスト項目に注釈を付けるかもしれない。その後この情報は、ユーザーがトラックの長さでリストをソートできるようにするため、または一定長さのトラックのリストをフィルターリングするために、サイト自体が使用するかもしれない。

<OL>
 <LI data-length="2m11s">Beyond The Sea</LI>
 ...
</OL>

しかし、このデータを見ることで一定の長さの曲を検索するために、ユーザーがその音楽サイトに関連付けられていない一般的なソフトウェアを使用することは、不適当だろう。

これは、この属性がサイトの独自スクリプトによる使用を意図し、公開で利用可能なメタデータのための一般的な拡張メカニズムでないため。

同様に、ページ著者は、使用しようとしている翻訳ツールに対して情報を提供するマークアップを書くことができる:
<P>The third <SPAN data-mytrans-de="Anspruch">claim</SPAN> covers the case of <SPAN
translate="no">HTML</SPAN> markup.</P>

この例において、"data-mytrans-de" 属性は、フレーズ "claim" をドイツ語に翻訳するときに使用するための MyTrans 製品に特定のテキストを提供する。しかし、標準 translate 属性はすべての言語で翻訳であることを伝えるために使用される。"HTML" は不変のまま。標準属性が使用可能である場合、使用されるカスタムデータ属性に対するニーズは存在しない。

この例において、カスタムデータ属性は、チェックアウト ページの異なるスタイル付けをするために CSS で使用できる、PaymentRequest の機能検出の結果を格納するために使用される。
<SCRIPT>
 if ('PaymentRequest' in window) {
   document.documentElement.dataset.hasPaymentRequest = '';
 }
</SCRIPT>

ここでは、data-has-payment-request 属性は事実上 真偽属性として使用されている。属性の有無を確認するだけで十分である。しかし、著者が望む場合、後で何らかの値を持つことができる、制限された機能を示すかもしれない。