<figure> Tag and <figcaption> Tag

<figure> element is use to mark up a photo in a document, and a <figcaption> element to define a caption for the photo:

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

While the content of the <figure> element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.

The <figcaption> tag defines a caption for a <figure> element.

The <figcaption> element can be placed as the first or last child of the <figure> element.

Audio and Video Support:

HTML5 introduced native support for audio and video. You can embed audio and video content like this:

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

</audio>

<source src="video.mp4" type="video/mp4"> Your browser does not support the video element.

</video>

<audio controls autoplay muted>

    <source src="./assets/file_example_MP3_700KB.mp3">

    </audio>
    <video controls autoplay muted>
        <source src="./assets/file_example_MP4_480_1_5MG.mp4">
    </video>

<picture> Tag

The <picture> tag gives web developers more flexibility in specifying image resources.

The most common use of the <picture> element will be for art direction in responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport.

The <picture> element contains two tags: one or more <source> tags and one <img> tag.

The browser will look for the first <source> element where the media query matches the current viewport width, and then it will display the proper image (specified in the srcset attribute). The <img> element is required as the last child of the <picture> element, as a fallback option if none of the source tags matches.

Tip: The <picture> element works "similar" to <video> and <audio>. You set up different sources, and the first source that fits the preferences is the one being used.

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

<embed> Tag

The <embed> tag defines a container for an external resource, such as a web page, a picture, a media player, or a plug-in application.

<embed src="./assets/UI FULL STACK COURSE CONTENT.pdf" height="500" >

<iframe> Tag

The <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current HTML document.

Playing a YouTube Video in HTML

To play your video on a web page, do the following:

Upload the video to YouTube(or you can take any permissible video)
Take a note of the video id
Define an <iframe> element in your web page
Let the src attribute point to the video URL
Use the width and height attributes to specify the dimension of the player
Add any other parameters to the URL (see below)

<iframe width="560" height="315" src="https://www.youtube.com/embed/5oH9Nr3bKfw?si=R-eEJSANqqjsFLnR?autoplay=0&mute=1&loop=1"
        title="YouTube video player" frameborder="0"
        allow=""
        referrerpolicy="strict-origin-when-cross-origin"></iframe>

Advance features like Canvas, svg, geolocation, data attributes)

will be discussed with Javascript

Complete Code With all the above features

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <figure>
        <img src="./images/pexels-anjana-c-674010.jpg" alt="image" height="50" width="50">
        <figcaption>My Image</figcaption>
    </figure>

    <audio controls autoplay muted>

    <source src="./assets/file_example_MP3_700KB.mp3">

    </audio>
    <video controls autoplay muted>
        <source src="./assets/file_example_MP4_480_1_5MG.mp4">
    </video>
    <picture>
        <source media="(min-width: 786px)"
            srcset="https://thumbs.dreamstime.com/b/baby-cat-sleeping-together-white-sheet-45209305.jpg">
        <source media="(min-width:480px)" srcset="https://i.etsystatic.com/10515806/r/il/97771f/4554658918/il_570xN.4554658918_hbmw.jpg">

        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTSLdfwCBPLnRXRg2Ihw0QollE3JeusOVYYw&s">
    </picture>
    <embed src="./assets/UI FULL STACK COURSE CONTENT.pdf" height="500" >
    <iframe width="560" height="315" src="https://www.youtube.com/embed/5oH9Nr3bKfw?si=R-eEJSANqqjsFLnR"
        title="YouTube video player" frameborder="0"
        allow=""
        referrerpolicy="strict-origin-when-cross-origin"></iframe>
      <iframe src="./assets/UI FULL STACK COURSE CONTENT.pdf" frameborder="0" height="500"></iframe>
</body>
</html>

Day 11 Features of HTML-5