Monday, 9 December 2024

Grouping the content using figure element in html

The <figure> element in HTML is used to group together content like images, diagrams, or code snippets, that are part of the main content of a webpage. This content often comes with a caption, which is provided using the <figcaption> element.

The <figcaption> element is used to provide a caption or a description for the content inside the <figure>. It’s usually placed as the first or last child of the <figure> element.

 

figure-demo.html

<!DOCTYPE html>

<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>Figure Demo</title>
    </head>

    <body>

        <figure>

            <figcaption>Look deep into nature, and then you will understand everything better.</figcaption>
            
            <ul>
                <li>
                    <p>Birds flying</p>
                    <img src="img/birds.avif" alt="Birds" width="200" height="200">
                </li>

                <li>
                    <p>Desert</p>
                    <img src="img/desert.avif" alt="Desert" width="200" height="200">
                </li>

                <li>
                    <p>Sunset</p>
                    <img src="img/sunset.avif" alt="Sunset" width="200" height="200">
                </li>
            </ul>
            
        </figure>
        
    </body>
</html>

 

  

Previous                                                    Next                                                    Home

No comments:

Post a Comment