PICTURE TAG

 


  • The <picture> element in HTML is used to provide multiple sources of an image, allowing the   browser to choose the most appropriate source based on the user's device, Screen size, and other factors. This is particularly useful for responsive design and ensuring the best quality images are displayed. </picture>

<!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;
            font-weight: bold;
            text-align: center;
            background-color: #efefef;
            /* color: #fff; */
        }

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

<body>
    <h1>HTML PICTURE TAG</h1>
    <picture>
        <source srcset="./images/html.webp" type="image/webp" />
        <source srcset="./images/html.jpg" type="image/jpg" />
        <source srcset="./images/html.jpeg" type="image/jpeg" />
        <source srcset="./images/html.svg" type="image/svg" />
        <img src="./images/html.png" alt="Images" width="500" />
    </picture>
</body>

</html>

Related Posts:

  • PICTURE TAG The <picture> element in HTML is used to provide multiple sources of an image, allowing the   browser to choose the most appropr… Read More
  • HTML Tags What is an HTML Tag?HTML Tags are the basic building block of elements in HTML. tags start with open (< ) and closing  ( … Read More
  • HTML Text Formatting HTML formatting involves enhancing the visual presentation of text. It enables text manipulation for improved aesthetics, eliminating the n… Read More
  • HTML Elements What is an HTML Element?An HTML element is a complete set that consists of a start tag (or opening tag), content, and an end tag (or closing tag… Read More
  • HTML Id & Classes IDs and Classes in HTMLWhat is an ID?An ID is an attribute, a unique identifier assigned to only one HTML element within a page.It is often used… Read More

0 Comments:

Post a Comment

Do leave your comments