DONT ADD ANYTHING HERE!

  1. The source element specifies one or more media resources for the elements:
    1. picture
    2. audio
    3. video
  2. It is a void element, which means that it has no content and does not require a closing tag
  3. This element is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers

Notes

  1. src
    1. The src attribute gives the URL of the media resource
    2. Required if the parent of source is
      1. audio
      2. video
    3. Not allowed if the parent is picture
  2. srcset
    1. Specifies a comma-separated list of one or more image URLs and their descriptors
    2. Required if the parent of source is picture
    3. Not allowed if the parent is audio or video
  3. codecs
    1. The codecs parameter, which certain MIME types define, might be necessary to specify exactly how the resource is encoded
    2. <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2" '>

Two Rules

  1. The source child element of audio/video must have src but must not have srcset
  2. The source child element of picture must have srcset but must not have src

Example (Picture)

Picture of Green Rectangle

HTML

<picture>

    <source 
        srcset="../images/blueHelloWorld.png" 
        media="(min-width:800px)">

    <source 
        srcset="../images/redHelloWorld.png" 
        media="(min-width: 600px)">

    <img 
        src="../images/greenHelloWorld.png" 
        alt="Picture of Green Rectangle">

</picture>

Example (Video)

HTML

<video controls>
    <source src="../videos/citrus.webm">
    <source src="../videos/citrus.mp4">
</video>

mnemonic

  1. picture > source —> srcset not src
  2. audio/video > source —> src not srcset
  3. (Summary) PSST picture–source–srcset

References

MDN: source element
W3C: source element