Image and media tags in HTML are used to embed various forms of media, such as images, audio, and video, into web pages. These tags are essential for creating rich, multimedia content that enhances the user experience.

Image and Media Tags in HTML

1. <img> (Image Tag)

   • Description: The <img> tag is used to embed images into a web page. It is an empty tag, meaning it does not have a closing tag.
   • Attributes:
     • src: Specifies the path to the image file. This can be a relative or absolute URL.
     • alt: Provides alternative text for the image, which is displayed if the image cannot be loaded. It also helps with accessibility for screen readers.
     • width and height: Define the width and height of the image (in pixels or as a percentage).
     • title: Provides additional information about the image, typically displayed as a tooltip when hovering over the image.
   • Usage: The <img> tag is used to insert images like logos, photographs, or icons into a web page.
   • Example:

     <img src="logo.png" alt="Company Logo" width="200" height="100">
     

2. <audio> (Audio Tag)

   • Description: The <audio> tag is used to embed audio files into a web page. Unlike the <img> tag, the <audio> tag is not empty and requires a closing tag.
   • Attributes:
     • src: Specifies the path to the audio file.
     • controls: Adds audio controls (play, pause, volume) for the user.
     • autoplay: Automatically starts playing the audio when the page loads.
     • loop: Replays the audio file continuously.
   • Usage: The <audio> tag is used to embed audio files, such as music tracks, podcasts, or sound effects.
   • Example:

     <audio controls>
         <source src="song.mp3" type="audio/mpeg">
         Your browser does not support the audio element.
     </audio>
     

3. <video> (Video Tag)

   • Description: The <video> tag is used to embed video files into a web page. Like the <audio> tag, it requires a closing tag.
   • Attributes:
     • src: Specifies the path to the video file.
     • controls: Adds video controls (play, pause, volume, fullscreen) for the user.
     • autoplay: Automatically starts playing the video when the page loads.
     • loop: Replays the video file continuously.
     • poster: Specifies an image to be shown while the video is downloading or until the user hits play.
     • width and height: Define the width and height of the video (in pixels or as a percentage).
   • Usage: The <video> tag is used to embed video content, such as tutorials, product demos, or trailers.
   • Example:

     <video width="320" height="240" controls>
         <source src="movie.mp4" type="video/mp4">
         Your browser does not support the video tag.
     </video>
     

4. <source> (Source Tag)

   • Description: The <source> tag is used inside <audio> and <video> tags to specify multiple media resources for different formats. This ensures compatibility with various browsers that may support different media types.
   • Attributes:
     • src: Specifies the path to the media file.
     • type: Specifies the MIME type of the media file.
   • Usage: The <source> tag allows you to provide multiple file formats for audio or video, ensuring that the media plays correctly across all browsers.
   • Example:

     <video controls>
         <source src="movie.mp4" type="video/mp4">
         <source src="movie.ogg" type="video/ogg">
         Your browser does not support the video tag.
     </video>
     

5. <iframe> (Inline Frame Tag)

   • Description: The <iframe> tag is used to embed another HTML document within the current document. This can include other web pages, maps, videos (such as YouTube videos), or any other content from external sources.
   • Attributes:
     • src: Specifies the URL of the page to embed.
     • width and height: Define the dimensions of the iframe.
     • frameborder: Specifies whether the iframe should have a border (0 for no border).
     • allowfullscreen: Allows the iframe content to be displayed in fullscreen mode.
   • Usage: The <iframe> tag is commonly used for embedding third-party content, such as YouTube videos, Google Maps, or other web pages.
   • Example:

     <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
     

Example of Image and Media Tags in Use

Here’s an example that combines different image and media tags in a single webpage:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multimedia Example</title>
</head>
<body>
    <h1>Welcome to My Multimedia Page</h1>

    <h2>Image Example</h2>
    <img src="nature.jpg" alt="Beautiful Nature" width="600" height="400">

    <h2>Audio Example</h2>
    <audio controls>
        <source src="music.mp3" type="audio/mpeg">
        <source src="music.ogg" type="audio/ogg">
        Your browser does not support the audio element.
    </audio>

    <h2>Video Example</h2>
    <video width="640" height="360" controls poster="video-poster.jpg">
        <source src="video.mp4" type="video/mp4">
        <source src="video.ogg" type="video/ogg">
        Your browser does not support the video tag.
    </video>

    <h2>Embedded YouTube Video</h2>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
</body>
</html>