Media Elements in HTML

Images are one of the most common media elements in HTML. They are added using the <img> tag.

<img src="path/to/image.jpg" alt="Description of image">

Image by Guillaume Meurice from Pexels. License: Free to use under the Pexels License.

HTML5 introduced the <audio> element for embedding audio content.

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

Audio sample from SampleLib.com. License: Free to use (Public Domain).

Videos can be embedded using the <video> element.

<video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Video sample from SampleLib.com. License: Free to use (Public Domain).

When using media in your web projects, always ensure you have the proper rights to use the content:

Use media with clear licensing terms (Creative Commons, royalty-free, etc.)
Always provide proper attribution when required by the license
Consider using content from free media libraries like Pexels, Pixabay, or Unsplash
For commercial projects, ensure you have commercial usage rights
When in doubt, create your own media content or purchase licensed media

The media files used in this example are:

Image: Photo by Guillaume Meurice from Pexels (Free to use under Pexels License)
Audio: Sample from SampleLib.com (Public Domain)
Video: Sample from SampleLib.com (Public Domain)

Working with Media in HTML