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:

  • HTML Page Structure Understanding the Structure of an HTML Document <!DOCTYPE html> // let browser know it's an HTML5 Document.<html> // Root of an… Read More
  • HTML FormsThe <form> tag is used to create an HTML form for user input.The <input> HTML element is used to create interactive controls for web-based… Read More
  • More on forms Common AttributesactionThe action attribute specifies the URL where the form data should be sent after submission.<form action="/su… Read More
  • HTML Working How do websites work?When a user sends a request to a server by typing  (www.devjunctionpoint.blogspot.com) on the internet or browseryour … Read More
  • HTML Introduction  What is HTML5?HTML stands for Hypertext Markup LanguageHypertext is Text which contains links to other textsmarkup language it's a way to … Read More

0 Comments:

Post a Comment

Do leave your comments