figure tag

 



  • 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>


Related Posts:

  • More on Tables Adding a CaptionTo add a title to your table, you can use the <caption> element. This element helps both in terms of SEO and acc… Read More
  • iFrames in HTMLWhat is an iFrame?An iFrame is an HTML element that enables an inline frame for the embedding of external content. Essentially, you can load another w… Read More
  • HTML TablesThe <table> HTML element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of ce… Read More
  • block level element What are Block-level Elements?Block-level elements are those that start on a new line and take up the entire width of their container by default… Read More
  • INLINE ELEMENTS Inline Elements don't start on a new line. It only takes the width required to cover the content.HTML elements are generally divided into two ca… Read More

0 Comments:

Post a Comment

Do leave your comments