HTML5:  Best Practice semantics for Media

HTML5: Best Practice semantics for Media

·

1 min read

Use image

#Image way 1
<figure>
    <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
    <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

#Image way 2
<figure>
    <img
      style="width: 100%; border-radius: 1rem;"
      src="https://placehold.co/3200x800/png"
      srcset="
        https://placehold.co/400x100/png   400w,
        https://placehold.co/800x200/png   800w,
        https://placehold.co/1200x300/png 1200w,
        https://placehold.co/1600x400/png 1600w,
        https://placehold.co/3200x800/png 3200w
      "
      sizes="(max-width: 800px) 100vw, 800px"
    />
</figure>

Use image responsive best practise

<figure>
    <picture>
      <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
      <source media="(min-width:465px)" srcset="img_white_flower.jpg">
      <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
       Browser can not support
    </picture>
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

Use Video and Audio

#Video
<video width="320" height="240" controls>
  <source src="forrest_gump.mp4" type="video/mp4">
  <source src="forrest_gump.ogg" type="video/ogg">
  <track src="fgsubtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="fgsubtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian">
</video>

#Audio
<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>