figure tag

       No comments

 



  • The figure element is particularly useful for images, illustrations, diagrams, videos, audio clips, and other types of media.
  • Use the alt attribute for images within the figure element to provide alternative text for accessibility.
  • The figure element helps improve accessibility and search engine optimization by indicating the content and its context.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&family=Urbanist:wght@300;400;600;700;800;900&display=swap");

        html {
            font-family: "jost", sans-serif;
            background-color: #efefef;
        }

        h1 {
            font-weight: bold;
        }

        img {
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
            border-radius: 8px;
        }
    </style>
</head>

<body>
    <h1>HTML FIGURE TAG</h1>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum nihil magni illum. Ullam delectus cum corporis
        illo suscipit est excepturi eveniet blanditiis dicta officia, mollitia fugit saepe temporibus nesciunt
        quibusdam!
    </p>
    <!-- add figure tag here  -->
    <figure>
        <img src="../images/E3CCA633-C689-4DD9-8B20-79E7C5A88487.jpg" alt="my image" width="500" height="auto" />
        <figcaption>This is my image</figcaption>
    </figure>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque dignissimos repellendus libero odio delectus
        quisquam a in, at quos vitae deserunt ipsam non odit maiores quis? Ea vitae officiis impedit.
    </p>
</body>

</html>


0 Comments:

Post a Comment

Do leave your comments