プログラミングをしているとHTMLに触れる機会はよくあります。そういったHTMLタグ（<b>など）の名前から英単語を覚えてみましょう。
記事の英語難易度は「初〜中級」です。
今回はimgやaudioなど、メディアに関連するタグ（要素）の1回目です。
＜img＞
<img>は「image」のことです。imageは「画像、イメージ」という名詞で、プログラミング必須英単語600+でベーシック300の英単語です。
名前の通り、画像を表示するための要素です。
このimg要素のsrc属性（下記サンプルの青下線）には画像のURLが入ります。srcはsourceの略で、プログラミング必須英単語600+の略語70に入っています。また、alt属性（下記サンプルの緑下線）には、画像が表示できないときの代替テキストが入ります。altは「alternative」の略です。「代替の」という形容詞で、同じくベーシック300の英単語です。srcもaltも、HTMLに限らずよく使われる略語です。
▼ HTMLのサンプル
<img src="https://progeigo.org/wp-content/uploads/2023/01/test-image.jpg" alt="サンプル画像">▼ 実際の表示
＜picture＞
<picture>はそのままpictureで、「写真」という名詞です。前述のimageは類義語になります。
では、<picture>と<img>はどう使い分けるのでしょうか。picture要素は内部に1個のimg要素、0個以上のsource要素（後述）を含み、画面サイズなどに応じて表示を切り替えます。つまりimgは子要素となるわけです。
下記サンプルの場合、最低1000pxの表示幅（青下線部分）があれば、source要素にある「test-image-large.jpg」が表示されます。その条件に合わなければ、img要素の画像が表示されます。もしパソコンのブラウザーでこの記事を読んでいるようであれば、ウィンドウ幅を変えて実際に切り替わるか試してみてください。
▼ HTMLのサンプル
<picture>
<source srcset="https://progeigo.org/wp-content/uploads/2023/01/test-image-large.jpg" media="(min-width:1000px)">
<img src="https://progeigo.org/wp-content/uploads/2023/01/test-image.jpg" alt="サンプル画像">
</picture>▼ 実際の表示
＜source＞
<source>もそのままsourceです。「ソース、〜元（送信元など）」という名詞で、プログラミング必須英単語600+でベーシック300の英単語です。
source要素では、上記picture要素で取り上げたように、画像データのソースを指定します。またpicture要素以外にも、後述のaudio要素やvideo要素のデータソースの指定にも使われます。
サンプルは上記picture要素のものを参照してください。緑の下線部分です。
＜audio＞
<audio>もやはりそのままaudioです。「オーディオ、音声」という名詞で、ベーシック300の英単語です。
audio要素は、オーディオや音声のファイルをページ上に埋め込む際に用いられます。
下記サンプルでは「controls」という属性がありますが、これを指定すると再生ボタンなど（コントロール）が表示されます。なおcontrolは「制御、コントロール」という名詞、または「制御する」という動詞で、ベーシック300に入っています。
▼ HTMLのサンプル
<audio controls src="https://progeigo.org/wp-content/uploads/2023/01/sample-audio.mp3">▼ 実際の表示
＜video＞
<video>もそのまま「video」です。「ビデオ、動画」という名詞です。
video要素も、audio要素と同じように動画をページに埋め込む際に用いられます。やはりcontrols属性の指定でボタンなどのコントロールが表示されます。
▼ HTMLのサンプル
<video controls src="https://progeigo.org/wp-content/uploads/2023/01/sample-video.mp4">▼ 実際の表示
＜track＞
<track>もやはりそのままtrackです。「トラック」という名詞で、メディアの文脈では映像や音声などの各データが配置される場所を指します。なお、一般英語では「道」、（競技場の）「走路」、「線路」、「足跡」といった意味があります。
track要素は、.vttというファイル形式で指定し、字幕などテキスト情報のトラックになります。video要素やaudio要素の下に置きます。下記サンプルでは、メニューで「字幕」を選択すると、ビデオ上に「サンプル」という日本語字幕が表示されるようになります。
▼ HTMLのサンプル
<video controls src="https://progeigo.org/wp-content/uploads/2023/01/sample-video.mp4">
<track src="https://progeigo.org/wp-content/uploads/2023/01/sample-subtitle.vtt" srclang="ja" label="日本語" kind="subtitles"/>
</video>▼ 実際の表示
英単語まとめ
- image【名詞】画像、イメージ
- ベーシック300
- src：sourceの略
- 略語70
- alt：alternativeの略
- alternativeは「代替の」という形容詞でベーシック300）
- picture【名詞】写真
- imageは類義語
- source【名詞】ソース、〜元（送信元など）
- ベーシック300
- audio【名詞】オーディオ、音声
- ベーシック300
- control【名詞】制御、コントロール
- ベーシック300
- 動詞の場合は「制御する」
- track【名詞】トラック
- 一般英語では、道、（競技場の）走路、線路、足跡など
[筆者紹介]
