HTML Media or Multimedia
In this article, we will explore HTML media in detail, including the different types of media that can be embedded using HTML, the tags and attributes used to embed media, and best practices for using HTML media in web development.
HTML Media – what is it?
HTML Media refers to any type of content that can be consumed by users, such as images, videos, and audio.
HTML provides various tags and attributes that allows you to embed media into web pages, making the content more engaging and interactive.
HTML supports several types of media, including:
| Types | Overview |
| Images | Images are the most common type of media used in web development. They can be used to enhance the visual appeal of a web page or to convey information to the user. Images can be in various formats, such as JPEG, PNG, and GIF. |
| Videos | Videos can be embedded into web pages using HTML. They can be used to provide instructional content or entertainment to the user. Videos can be in various formats, such as MP4, WebM, and Ogg. |
| Audio | HTML also supports the embedding of audio files into web pages. Audio files can be used to provide background music or sound effects to the user. Audio can be in various formats, such as MP3, WAV, and Ogg. |
Html Media Formats
The HTML media format stores multimedia elements (such as audio and video) in media files.
By looking at the file extension, you can usually determine what type of file a file is.
Various formats and extensions exist for multimedia files like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
Video formats commonly used:
 | There are a variety of video formats available. HTML supports MP4, WebM, and Ogg formats. According to YouTube, MP4 files are the most suitable file type. |
| Format | File | Overview |
|---|---|---|
| AVI | .avi | AVI (Audio Video Interleave). A Microsoft product. Often used in TVs and video cameras Equipment. Suitable for Windows computers but not compatible with web browsers. |
| MPEG | .mpg .mpeg | A project of the Moving Pictures Expert Group. The first widely used video format on the Internet. It is not compatible with HTML. |
| QuickTime | .mov | The QuickTime player. An Apple product. This is often used in video cameras and television hardware. Suitable for Apple computers but not compatible with web browsers. |
| WMV | .wmv | WMV (Windows Media Video). The product of Microsoft. Video cameras and TV hardware often use this component. Suitable for Windows computers but not compatible with web browsers. |
| RealVideo | .rm .ram | RealVideo is not compatible with web browsers, and it doesn’t facilitate HTML media. Developed by Real Media to permit video streaming with low bandwidths. |
| Ogg | .ogg | Theora Ogg. Product of the Xiph.Org Foundation. Permissible by HTML. |
| WebM | .webm | Created by Mozilla, Opera, Adobe, and Google. Permissible by HTML. |
| Flash | .swf .flv | Flash. Produced by Macromedia. Install an additional component (plug-in) to play in web browsers is often required. |
| MPEG-4 or MP4 | .mp4 | Product of the Moving Pictures Expert Group. Video cameras and TV hardware frequently use this component. Compatibility is supported by all browsers and preferred by YouTube. |
IMPORTANT: HTML standard / HTML media only supports MP4, WebM, and Ogg videos.
Audio Formats
When it comes to HTML media, MP3 is the preferred format for compressed recorded music. In the digital music world, MP3 is synonymous with digital music.
The MP3 file format is best suited to websites that feature recorded music.
RealAudio.rm
.ramA product of Real Media. To provide low-latency streaming of audio bandwidth. Web browsers do not support this video.
| Format | File | Overview |
|---|---|---|
| WMA | .wma | WMA (Windows Media Audio). The product of Microsoft. Suitable for Windows computers but not compatible with web browsers. |
| MIDI | .mid .midi | All electronic devices use this format. PC sound cards and synthesizers are among the devices that produce music. A MIDI file contains digital notes but no sound. Web browsers do not support this software, although it works on all computers and music hardware. |
| Ogg | .ogg | Product by the Xiph.Org Foundation. Compatible with HTML. |
| MP4 | .mp4 | The MP4 format can be used both for video and audio. Compatible with all browsers. |
| MP3 | .mp3 | MP3 files are the sound component of MPEG files. Music players are most often equipped with MP3 players. It provides a good balance Optimization of small files of high quality. Compatible with all browsers. |
| AAC | .aac | Advanced Audio Coding format – Apple uses as a default for iTunes products. Suitable for Apple computers but not compatible with web browsers. |
| WAV | .wav | Product of IBM and Microsoft. Suitable on Windows, Macintosh, and Linux operating systems. Compatible with HTML. |
Important: HTML only supports MP3, WAV, and Ogg audio.
HTML Media Tags and Attributes
HTML provides several tags and attributes that allow you to embed media into web pages.
Here are some of the most commonly used tags and attributes:
The <img> Tag
The <img> tag is used to embed images into web pages. The src attribute is used to specify the URL of the image file.
The alt attribute is used to provide a textual description of the image for users who cannot see the image.
<img src="image.jpg" alt="A picture of a cat">
The <video> Tag
The <video> tag is used to embed videos into web pages.
The src attribute is used to specify the URL of the video file.
The controls attribute is used to display playback controls, such as play, pause, and volume.
The poster attribute is used to specify an image to display before the video starts playing.
<video src="video.mp4" controls poster="poster.jpg"> Your browser does not support the video tag. </video>
For Complete guide visit our html video tag post.
The <audio> Tag
The <audio> tag is used to embed audio files into web pages.
The src attribute is used to specify the URL of the audio file.
The controls attribute is used to display playback controls, such as play, pause, and volume.
<audio src="audio.mp3" controls> Your browser does not support the audio tag. </audio>
Browsers Compatibility:
HTML media enabled web browsers to display text only and only one font in one color in the past.
Colors, fonts, images, and multimedia were added afterward by browsers.
HTML Media Best Practices
Here are some best practices for using HTML media.
- Use appropriate file formats for different types of media. For example, use JPEG for images with complex color gradients, and use PNG for images with transparent backgrounds.
- Optimize media files to reduce their size and improve page loading times. Use tools such as Photoshop or GIMP to reduce image file size without sacrificing quality. Use video compression software to reduce the size of video files.
- Provide alternative text for images and video content. Alternative text allows users who cannot see the media to understand what it represents.
- Use autoplay sparingly for video and audio content. Autoplay can be annoying to users, especially if the media is loud or distracting.
- Ensure that media content is accessible to all users, including those with disabilities. Use captions or transcripts for video content and ensure that audio content can be accessed with screen readers.
- Test media content on different browsers and devices to ensure that it works correctly and is displayed correctly. Consider using responsive design to ensure that media content is displayed correctly on different screen sizes.
- Use a CDN to deliver media content to users faster. A CDN can store media content on multiple servers around the world, reducing the distance that the content has to travel to reach the user.
