チョコパイを240こ食べたエンジニア

PHPエンジニアをやった後、現在はフロントエンドエンジニアに・・。好物は『チョコパイと焼き鳥』。Twitterは@chooringo(ちょうりんご)

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で表示したとき
f:id:chooringo:20190525010034p:plain

カテゴリ
・フローコンテンツ
・フレージングコンテンツ
・エンベディッドコンテンツ
・サブミット可能な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要素の子要素として、フローコンテンツの前に置く