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

公開日: 2021.09.15
更新日: 2024.01.06
iframeだけじゃない!HTMLで便利な埋め込みタグを7つ紹介

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

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

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

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

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

そこで今回は、

  • HTMLで外部コンテンツの埋め込みができるタグの種類
  • それぞれの埋め込みタグの使い方

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

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

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

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

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

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

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

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

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

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

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

  • 別のHTML文書の埋め込み:iframeタグ
  • オブジェクトの埋め込み:object
  • 動画の埋め込み:video
  • 音声の埋め込み:audio
  • マルチメディアの埋め込み:embed
  • 画像の埋め込み:img
  • グラフィックを表す:canvas

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

別の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://sample.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などの埋め込みタグは様々な種類があり、用途が似ているものもありますが、カスタマイズできる属性が推奨なのか非推奨なのかなど、大きく異なる種類もあるので注意しましょう。

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

  • iframeはHTML4.01で非推奨だったが、HTML5で復活し、現在の主流となっている
  • iframeタグよりvideoタグの方が動画表示のカスタマイズ性が高い
  • 画像を埋め込む時はobjectタグではなく、imgタグを使用する

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

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

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


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

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

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

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

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

\プログラミングを学んで/
人生を変えた3名

インタビュー記事一覧 >

\プログラミングスクールを比較/

DMM WEBCAMP

COACHTECH

RUNTEQ

DMM WEBCAMP COACHTECH RUNTEQ
目指せる姿 WEBエンジニアへの転職
フリーランスエンジニア WEBエンジニアへの転職
分割払い
補助金 ×
転職保証 × ×
受講期間 12週間〜 3ヶ月〜 5ヶ月〜
特徴 【IT業界の転職を一番に考えたい方向け】
大手DMMが運営のプログラミングスクール
転職成功率98.8%
豊富なキャンペーンや補助金制度あり
【フリーランスを目指したい方向け】
フリーランスのエンジニアを最短で目指す
エンジニアと共に実際の案件開発を担当
【とことん勉強してから転職したい方向け】
1,000時間(約9カ月)のカリキュラムでしっかり勉強
企業の求める即戦力のWEBエンジニアを目指す
料金 329,350円〜
※給付金適用後
42万9,000円~ 55万円

公式HP

公式HP

公式HP

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5