HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのdata属性とは？object要素でリソースURLを指定する方法を解説

data属性とは

HTMLのdata属性は、<object>要素で埋め込むリソース（音声、動画、PDF、Flashなど）のURLを指定するための属性です。ブラウザはこのURLをもとに、対象となるリソースを読み込んでページ内に表示します。

基本構文

<object data="url">

「url」の部分には、オブジェクトが使用するリソースのURLを記述します。

data属性の使用例

それでは、<object>要素のdata属性を実装した具体的な例を見ていきましょう。

コード例

<!DOCTYPE html>
<html>
<body>
<h2>CSS Demonstrating Application</h2>
    <object data="https://www.tutorialspoint.com/flex/samples/CSSApplication.swf" height="400" width="600"></object>
</body>
</html>

実行結果

HTMLのdata属性とは？object要素でリソースURLを指定する方法を解説

コードの解説

上記の例では、data属性を使ってリソースのURLを設定しています。ここで指定しているのは「.swf」ファイル、つまりFlashファイルです。

<object data="https://www.tutorialspoint.com/flex/samples/CSSApplication.swf" height="400" width="600"></object>

<object>要素内で使用している外部リンクは以下の通りです。

https://www.tutorialspoint.com/flex/samples/CSSApplication.swf

注意点：Flashはすでに廃止されています

かつてdata属性は、Flashコンテンツ（.swfファイル）をWebページに埋め込む際によく利用されていました。しかし、Adobe Flash Playerは2020年12月末にサポートを終了しており、現在の主要ブラウザではFlashコンテンツを再生できません。

そのため、現代のWeb開発では、data属性はPDFファイルやSVG画像などのリソースを埋め込む用途で活用されるのが一般的です。たとえば次のように記述すると、ブラウザ上で直接PDFを表示できます。

<object data="sample.pdf" type="application/pdf" width="600" height="400"></object>

このように、data属性とtype属性を組み合わせることで、埋め込むリソースの種類を明示的に指定でき、より確実な表示が可能になります。

  1. HTMLのvalue属性とは？使い方とサンプルコードをわかりやすく解説

    HTMLのvalue属性は、HTMLドキュメント内で要素の初期値（デフォルト値）を定義するための属性です。この属性は、button、input、meter、li、option、progress、paramといったHTML要素に対して使用できます。value属性はフォームやUIコンポーネントにおいて重要な役割を果たします。例えば、input要素では入力欄にあらかじめ表示されるテキストを指定でき、meter要素やprogress要素では現在の進捗状況を数値で表現できます。構文value属性の基本的な構文は以下のとおりです。<tagname value="text">

  2. HTML DOM Objectのdataプロパティとは？使い方とサンプルコードを解説

    HTML DOM Object dataプロパティとはHTML DOMのObject要素が持つdataプロパティは、<object>要素のdata属性の値に対応する文字列（URL）を取得または設定するためのプロパティです。このプロパティを使うことで、JavaScriptから動的にオブジェクトで埋め込まれたリソースのURLを読み取ったり、変更したりすることができます。構文data属性の値を取得する場合ObjectElement.datadata属性に文字列値（URL）を設定する場合ObjectElement.data = URLStringHTML DOM Object dataプロ