HTML5のEmbedded Content~object要素とparam要素~
素人が書く備忘録
基本的にはHTML 5.2を元に記載。
Embedded Content関連
object要素
外部リソースを表す。
リソースの種類に応じて、画像や入れ子のブラウジングコンテキスト、プラグインを用いたコンテンツなどを表す。
Flashコンテンツを表示する際によく使われていたが、現在はブラウザ対応も減りFlash自体も2020年には終わりを迎えるみたい。
<figure> <object data="object_nested.html" width="300" height="50"></object> <figcaption>↑別ドキュメントを埋め込んでいるよ</figcaption> </figure> <figure> <object data="500_ice.JPG" height="100"></object> <figcaption>↑画像だよ</figcaption> </figure>
chromeで表示したとき
カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・エンベディッドコンテンツ
・サブミット可能なform関連要素、リスト化form関連要素
・パルパブルコンテンツ
コンテンツモデル
・0個以上のparam要素とそれに続くトランスペアレントコンテンツ
コンテンツ属性
・グローバル属性
・data - リソースのURL
・type - 埋め込むリソースのMIME TYPE
・typemustmatch - 使用するリソースに対してtype属性とContent-Type値が一致する必要があるかどうかを指定。論理属性を指定。
・name - 入れ子にしたブラウジングコンテキスト名
・form - form要素との関連付け。form要素のid値を指定する。
・width - 横幅(CSSピクセル指定のみ)
・height - 高さ(CSSピクセル指定のみ)
タグの記載場所
・エンベディッドコンテンツを配置できる場所
param要素
object要素によって呼び出されるプラグインのパラメータを定義する。それ自体では何も表わさない。
nameとvalueの両方が存在しなければならない。
<figure> <object data="XXXXXXXXXXXX.swf" type="application/x-shockwave-flash"> <param name="foods" value="chocopie"> </object> <figcaption>↑Flashだとこんな感じ(中身は適当なので何も表示されない)</figcaption> </figure>
カテゴリ
・なし
コンテンツモデル
・なし
コンテンツ属性
・グローバル属性
・name - パラメータ名
・value - パラメータの値
タグの記載場所
・object要素の子要素として、フローコンテンツの前に置く