HTML <picture> Tag
In this tutorial, we will learn about picture tag in HTML with the help of examples.
<picture> Tag
Picture tag <picture> is used to provide more flexibilty to developer in specifying image resources.
Note : We have to use two tags inside the <picture> tag to specify images :
<source> tags and <img> tag.
The first source fits the preferences is one being used.
Syntax
<picture>.........</picture>
Example
<!DOCTYPE html>
<html>
<head>
<title>Picture Tag</title>
</head>
<body>
<picture>
<source media = "(min-width : 1000px)" src = "../images/boat.jpg">
<source media = "(min-width : 500px)" src = "../images/girl.jpg">
<img src = "sun.jpg">
</picture>
</body>
</html>Output
Global Attribute
Picture Tag support all the global attributes of HTML.
Event Attribute
Picture Tag support all the event attributes of HTML.
Next Tutorial
We hope that this tutorial helped you develop better understanding of the concept of <picture> tag in HTML.
Keep Learning : )
In the next tutorial, you'll learn about HTML <pre> Tag.