iframeだけじゃない！HTMLで便利な埋め込みタグを7つ紹介

HTMLの勉強や、Webサイトを制作している際に、

「HTML内にコンテンツを埋め込めるタグについて知りたい」

「iframe以外に便利な埋め込みタグってあるの？」

と思うことはありませんか？

動画や画像を埋め込むことができるタグで有名なのは、Youtubeなどでも利用さているiframeですが、実は他にも様々な埋め込みタグが存在しています。

そこで今回は、

などについて解説していきます。

5GなどITが加速している現代では、テキストや自作したWebページだけでなく、動画や外部のコンテンツを埋め込むことが当たり前になってきています。

埋め込みタグは、これから覚えておくべき必須スキルと言っても過言ではないので、まずはどんな種類があるのか、基本はどのように使うのかを学んでおきましょう。

【HTML初心者向け】そもそも「埋め込み」とは？

まずはじめに、そもそも「埋め込み」とはどういう意味なのか確認しておきましょう。

HTMLにおける埋め込みとは、Webサイトやブログ記事に外部のコンテンツを挿入することを意味しています。

例えば、動画や他のブログ記事、SNSなどの外部コンテンツをURLリンクとしてHTML内に挿入することも「埋め込む」ということ意味です。

すべてのWebサイトやコンテンツを自分で作成するのは大変なので、外部コンテンツの埋め込みは非常に便利です。

HTMLで使う様々な埋め込みタグを紹介

HTML内に外部コンテンツを埋め込む際には、専用のタグを挿入する必要があります。

埋め込みができるタグには以下のような種類があります。

では、それぞれの特徴と使い方について詳しく見ていきましょう。

別のHTML文書の埋め込み：iframeタグ

インラインフレームと呼ばれているiframeタグは、最も簡単に利用できる埋め込みタグと言われています。

以前はフィッシングサイトへの誘導などに悪用されていたこともあり、HTML4.01で非推奨となっていましたが、利便性の高さからHTML5で復活しています。

現在は脆弱性への対応策もあり、YoutueやTwitterなど様々なメディアの埋め込みで活用されている主流の埋め込みタグです。

基本的な使い方は以下の通りです。

<iframe src="リンク先のURL" target="_blank rel="noreferrer noopener"></iframe>

Youtube動画などのメディアを埋め込む場合は、すでにサイト側でiframeタグが生成されていることがほとんど。

自分で一からコードを記述するしなくても、コピペするだけで利用することが可能です。

また、同じWebサイト内に独自のフレーム（領域）を作成して、そのフレーム内で別のコンテンツを開く設定をもできます。

オブジェクトの埋め込み：object

動画や画像、音声、HTMLページなど様々なオブジェクトを埋め込むことができるobjectタグ。

以前はFlash動画の埋め込みに活躍していましたが、Flash動画自体が非推奨のため、現在はあまり使用されていません。

基本的な使い方は以下の通りです。

<object data="表示する外部コンテンツのデータ" type="表示する外部コンテンツの種類"></object>

archive、border、classidなど見た目の装飾に関係する属性はHTML5から廃止となっているので注意しましょう。

また、画像を埋め込む際は、imgタグの使用が推奨されています。

動画の埋め込み：video

videoは、HTML5から登場した動画を埋め込むためのタグです。

動画の自動再生や、コントロールパネルを表示する指定できる点がiframeと異なります。

videoタグについてより詳しく知りたい方は、以下の記事を参考にしてみてくださいね。

HTMLで動画の埋め込みが簡単に？videoとiframeの使い方を【徹底解説！】

基本的な使い方は以下の通りです。

<video src="sample.mp4（動画データ）" width="横幅の指定" height="縦幅の指定"></video>

音声の埋め込み：audio

audioタグも、HTML5から登場した要素で音声コンテンツを埋め込むことができます。

音楽や音声のストリーム再生も可能で、自動再生やループ再生などを指定する属性も付与することが可能です。

基本的な使い方は以下の通りです。

<audio src="sample.ogg（音声データ）" width="横幅の指定" height="縦幅の指定">
</audio>

また、audioタグ内に「このブラウザーは、音声再生がサポートされていません。」などのテキストを記述することで、未対応ブラウザーの対策が可能です。

マルチメディアの埋め込み:embed

embedは、外部のアプリケーション（動画や画像などのコンテンツ）などを埋め込むことができる要素です。

空要素なので閉じタグを使用する必要がありません。

基本的の使い方は以下の通りです。

<embed src="sample.mp3" width="横幅の指定" height="縦幅の指定">

objectと同様で、見た目の装飾に関わるalign、frame、borderなどの属性はHTML5から廃止されているので使用しないようにしましょう。

画像の埋め込み：img

画像を埋め込むためのimgタグは、HTML初心者でも見たことや使ったことがあるのではないでしょうか？

ローカルファイルに入れた画像をHTMLで呼び出すことだけでなく、外部コンテンツにアップされている画像のURL（絶対パス）を挿入して呼び出すことも可能です。

基本的な使い方は以下の通りです。

<!-- 相対パスでの指定 -->
<img src="img/smaple.jpg alt="○○の画像です">

<-- 絶対パスでの指定 -->
<img src="https://example.com.jpg" alt="○○の画像です">

グラフィックを表す：canvas

canvasはHTML5から登場した要素で、JavaScriptと併用することでグラフや画像など描くことができます。

基本的な使い方は以下の通りです。

<!-- HTMLコード -->
<canvas id="sample" width="200" height="200"></canvas>

// Javascript
var element = document.getElementById( "sample" ) ;
var context = element.getContext( "2d" ) ;

context.beginPath () ;

context.arc( 100, 100, 100, 0 * Math.PI / 180, 360 * Math.PI / 180, false ) ;
context.fillStyle = "#317cc4cc" ;
context.fill() ;

描く図形などによって基本的なコードが異なるため、今回は円形を描くサンプルコードのみご紹介しています。

上記のコードを記述した場合、ブラウザー上では以下のように表示されます。

HTMLの埋め込みタグはコンテンツに最適なものを選択しよう！

いかがでしたでしょうか？

iframeなどの埋め込みタグは様々な種類があり、用途が似ているものもありますが、カスタマイズできる属性が推奨なのか非推奨なのかなど、大きく異なる種類もあるので注意しましょう。

以下はこの記事のまとめです。

imgタグなどはHTML5より以前からよく利用されていますが、HTML5から登場した埋め込みタグはカスタマイズ性が高いものが多いです。

動画の再生方法をコントロールできるvideoタグや、グラフィックをHTMLで描けるcanvasタグなどは時代の流れに合わせて登場したタグとも言えるでしょう。

埋め込みタグを適切に使用して、時代とユーザーに合わせた最高のWebサイトを作りましょう！

---

プログラミングやパソコンを使って働きたい！

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！