/

HTML / CSS / JavaScript Tutorial

HTML Element: <picture>

[this page | pdf | back links]

The HTML <picture> element indicates a container for multiple image resources. A <picture> element contains zero or more <source> elements followed by one <img> element. The source element(s) will be differentiated by different srcset attributes (required, defines the URL of the image to be shown by the <picture> element) and by the media attribute (optional, a CSS media query that identifies which media relates to that URL). The browser uses the first matching <source> element, and if none match then it defaults to the <img> element.

 

The attributes it can take are HTML global attributes and HTML event attributes.

 

To create or access such an element in JavaScript see here. The corresponding HTML DOM object supports standard DOM properties and methods. The default style applicable to this element is shown here.

 


NAVIGATION LINKS
Contents | Prev | Next | HTML Elements


Desktop view | Switch to Mobile