DEV Community

Cover image for HTML tags | source
Carlos Espada
Carlos Espada

Posted on • Edited on

3 2

HTML tags | source

It is used to specify multiple media assets for the <picture>, <video> and <audio> elements. Based on the specified criteria, the browser will decide which of them it uses to offer the multimedia content to the user.

It is an empty element, that is, it has no content and does not require a closing tag, that is, it can never be used </source>. It is often used to offer the same multimedia content in multiple file formats to provide compatibility with the largest possible number of browsers depending on the multimedia and image support they have.

It has several attributes:

  • media: specifies a media query like the ones we specify in CSS.
<picture>
   <source srcset="mdn-logo-wide.png" media="(min-width: 800px)" />
   <source srcset="mdn-logo-medium.png" media="(min-width: 600px)" />
   <img src="mdn-logo-narrow.png" alt="MDN Web Docs">
</picture>
Enter fullscreen mode Exit fullscreen mode
  • sizes: is a list of sizes that describes the final width of the image rendered by the browser. Each size consists of a comma-separated list of condition-length pairs. This information is used by the browser to determine, before generating the page layout, which image defined in srcset to use. This attribute only has an effect if width descriptors are specified in the srcset attribute, not if pixel ratios are specified (Ex: 200w instead of 2x).
<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy" />
Enter fullscreen mode Exit fullscreen mode
  • srcset: is a list of one or more comma separated strings indicating a set of possible images that the browser can use. It is required if the parent of <source> is <picture>. To be valid, each string in the list must have either a width descriptor or a pixel density descriptor. These two descriptors should not be used together; only one should be used consistently throughout the list. The value of each descriptor in the list must be unique. At a certain point, the browser will choose which one is the most suitable to display. Each chain is made up of:
    • A URL specifying the image
    • A width descriptor, consisting of a string containing a positive integer followed directly by w, for example 300w. The default value, if not specified, is infinite.
    • A pixel density descriptor, consisting of a positive float number directly followed by x, for example 2.5x. The default value, if not specified, is 1x.
  • src: it is a mandatory attribute for <audio> and <video>, and it specifies the address of the content that we want to indicate in each <source>. This attribute is ignored if the <source> is a child of a <picture> element.
  • type: the MIME type of the <source>, optionally with a codecs parameter. If the type attribute is not specified, the media type is retrieved from the server and checked if the browser can process it. If it cannot be rendered, the following <source> is checked. If the type attribute is specified, it is compared with the types that the browser can present, and if it is not recognized, the server is not even queried. Instead, the following <source> element is checked at the same time. When this attribute is used within a <picture> element the browser will fall back to the image specified in the <img> of the <picture> if it is unable to find a suitable image after examining each <source>.
<video controls>
  <source src="foo.webm" type="video/webm" />
  <source src="foo.ogg" type="video/ogg" />
  <source src="foo.mov" type="video/quicktime" />
  I'm sorry; your browser doesn't support HTML5 video.
</video>
Enter fullscreen mode Exit fullscreen mode

The sizes and srcset attributes, in addition to height and width, can only be used when <source> is a child of a <picture> element.

  • Type: -
  • Self-closing: Yes
  • Semantic value: No

Definition and example | Support

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay