← Back to Demos

HTML Media Elements Demo

Images with Different Formats

Basic Image

A blue rectangle with text
<img src="image.jpg" alt="Description">

Image with Dimensions

Green rectangle showing dimensions
<img src="image.jpg" alt="Description" width="300" height="200">

Figure with Figcaption

A gradient chart example
Figure 1: This is a chart showing gradient colors from blue to purple
<figure> <img src="chart.png" alt="Chart description"> <figcaption>Figure 1: Chart caption</figcaption> </figure>

Picture Element (Responsive Images)

Responsive image example

Try resizing your browser! The picture element loads different images based on screen size.

<picture> <source media="(min-width: 800px)" srcset="large.jpg"> <source media="(min-width: 400px)" srcset="medium.jpg"> <img src="small.jpg" alt="Description"> </picture>

Audio Element

<audio controls> <source src="audio.mp3" type="audio/mpeg"> <source src="audio.ogg" type="audio/ogg"> Your browser doesn't support audio. </audio>

Audio Attributes

Video Element

<video controls width="640" height="360" poster="poster.jpg"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <track kind="subtitles" src="subs.vtt" srclang="en" label="English"> Your browser doesn't support video. </video>

Embedding Content

iframe Example

<iframe src="https://example.com" width="600" height="400" title="Description"> </iframe>

Embed and Object Elements

<!-- Embed element for plugins --> <embed src="file.pdf" type="application/pdf" width="600" height="400"> <!-- Object element with fallback --> <object data="file.pdf" type="application/pdf" width="600" height="400"> <p>Fallback: <a href="file.pdf">Download PDF</a></p> </object>

Best Practices for Media

  1. Always include alt text for images
  2. Specify dimensions to prevent layout shift
  3. Use appropriate formats:
    • JPEG for photos
    • PNG for graphics with transparency
    • SVG for logos and icons
    • WebP for modern browsers
  4. Provide multiple sources for audio/video
  5. Include fallback content for unsupported browsers
  6. Add captions/subtitles for accessibility
  7. Optimize file sizes for performance
  8. Use lazy loading for images below the fold:
    <img src="image.jpg" alt="Description" loading="lazy">