Loading...
HTML <picture> Tag

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.

- Related Topics