DEV Community

antony stark
antony stark

Posted on

Html media tags

Picture tag:-

  • It used to what content to be shown according to the display size or width of the screen,it is combined additional two tags they are img and src tag
  • We should give the default image for this picture tag or else the rest of the image will not be displayed
  • Example
<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Enter fullscreen mode Exit fullscreen mode

Audio tag:-This tag is mainly used to insert the audio file into the webpage

  • There are three supported audio formats in HTML: MP3, WAV, and OGG.

  • Example:-

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>
Enter fullscreen mode Exit fullscreen mode

Video tag:-

  • video tag is mainly used to insert the video content into the webpage
  • There are three supported video formats in HTML: MP4, WebM, and OGG.
  • Example
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)