Media-related Tags

This article explains media-related tags.

Explains how to describe images, videos, audio, etc. in HTML, as well as collapsible elements and inline frames.

YouTube Video

Media-related Tags

<img> Tag

1<img src="/images/image.jpg" alt="Description of the image" width="200">

• The <img> tag is used to embed images. The src attribute specifies the image path, and the alt attribute provides a description when the image cannot be displayed.

<figure> and <figcaption> Tags

1<figure>
2    <img src="/images/image.jpg" alt="A beautiful scenery" width="200">
3    <figcaption>A beautiful scenery</figcaption>
4</figure>

• The <figure> tag groups media content like images or illustrations along with a caption using the <figcaption> tag.

<picture> Tag

1<picture>
2    <source media="(min-width: 800px)" srcset="/images/large.jpg">
3    <source media="(min-width: 400px)" srcset="/images/medium.jpg">
4    <img src="/images/small.jpg" alt="Responsive image" width="200">
5</picture>

• The <picture> tag is used to support responsive images, allowing the appropriate image to be selected based on different display conditions.

• The media attribute specifies conditions in the same format as CSS media queries.

  • You can specify conditions such as the minimum width (min-width), maximum width (max-width), or screen orientation (orientation).

• In this example, the following images are displayed depending on the screen width.

  • If the screen width is 800px or more, large.jpg is displayed.
  • If the screen width is 400px or more but less than 800px, medium.jpg is displayed.
  • If the screen width is less than 400px, small.jpg (the image in the <img> tag) is displayed.

<canvas> Tag

1<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000;"></canvas>
2<script>
3    var canvas = document.getElementById('myCanvas');
4    var ctx = canvas.getContext('2d');
5    ctx.fillStyle = "#FF0000";
6    ctx.fillRect(10, 10, 150, 100);
7</script>

• The <canvas> tag provides a region where dynamic graphics can be drawn using JavaScript.

<map> Tag

1<img src="/images/example.jpg" usemap="#example-map" alt="Example Map">
2<map name="example-map">
3    <area shape="rect" coords="34,44,270,350" alt="Area 1" href="https://codesparklab.com">
4</map>

• The <map> tag is used to define an image map. Clickable areas within the map are defined using the <area> tag. This allows specific parts of an image to be clickable, leading to a link.
• Specify the name of the associated map element (<map> tag) in the usemap attribute of the <img> tag, prefixed with #.
• By appropriately specifying the alt attribute of the <area> tag, you can improve accessibility for visually impaired users.

<embed> Tag

1<embed src="movie.mp4" width="300" height="200">

• The <embed> tag is used to embed external content such as PDFs, videos, or audio.

<video> Tag

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>

• The <video> tag is used to embed video content. You can specify multiple formats using the <source> tag.

1<video controls width="300" preload="none">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>

• The preload attribute allows you to specify how much of a video should be loaded by the browser before playback begins.
  • auto instructs the browser to preload the entire media. It can reduce the delay at the start of playback, but data may be downloaded even if the user does not play the media.
  • metadata only loads the media's metadata (e.g., duration, track information). The media data itself is not loaded until the user initiates playback. This is suitable when you need summary information about the media.
  • none does not preload the media file. The media does not download resources until playback starts. This is suitable when you want to minimize data usage.

<audio> Tag

1<audio controls>
2    <source src="sound.mp3" type="audio/mpeg">
3    <source src="sound.ogg" type="audio/ogg">
4    Your browser does not support the audio element.
5</audio>

• The <audio> tag is used to embed audio content. The <source> tag supports multiple formats.
• Like the <video> tag, the preload attribute can be used to specify how much audio should be loaded before playback begins.

<track> tag

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
4    <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
5    Your browser does not support the video tag.
6</video>

• The <track> tag is used to specify text tracks such as subtitles and captions. It can be used inside <audio> or <video> tags.
• The kind attribute allows you to specify the purpose of the track (e.g., subtitles, captions, chapters, etc.). You can specify the following values.
  • subtitles provide subtitles that translate the content of video or audio or make it easier to understand for viewers. Its main purpose is the direct translation of audio.
  • captions provide additional information such as music and sound effects for people who are deaf or hard of hearing, in addition to audio.
  • descriptions are tracks that describe the visual content of a video, such as actions and scenery, for visually impaired people.
  • chapters provide chapter markers (chapter titles) to indicate specific points within the video.
  • metadata provides additional information for parsing or processing the media but is not displayed to users.

<iframe> Tag

1<iframe src="https://codesparklab.com" width="300" height="200"></iframe>

• The <iframe> tag is used to embed other HTML pages or external content (such as websites, videos, or documents) into the current page. It is often used for embedding YouTube videos on a page.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video