QuerySquish.com

In the previous lesson, we learned about HTML semantic elements. Now, let's learn about HTML media elements and how to use them to embed media content in your web pages.

Common Media Elements

Here are some common media elements that you will use frequently:

• <img>: Embeds an image
• <audio>: Embeds sound content
• <video>: Embeds video content
• <source>: Specifies multiple media resources for media elements (<audio> and <video>)
• <track>: Specifies text tracks for media elements (<audio> and <video>)
• <embed>: Embeds external content or interactive content
• <object>: Embeds an external resource, typically used for multimedia
• <param>: Defines parameters for <object>
• <iframe>: Embeds another HTML page within the current page

Example Usage

Let's see how to use some of these media elements in an HTML document:

    <!-- Embedding an image -->
    <img src="image.jpg" alt="Description of image">

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

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

    <!-- Embedding an iframe -->
    <iframe src="https://www.example.com" width="600" height="400">
        Your browser does not support iframes.
    </iframe>