Images
As already mentioned, images are displayed using the <img> element. They enhance the visual appeal and convey information on your webpages.
Example:
<img src="image.jpg" alt="Description of the image"/>
In this example, we have an image element with the src attribute specifying the image source URL or file path. The alt attribute provides alternative text that describes the image for accessibility purposes or if the image fails to load.
Here are some commonly used image formats:
- JPEG: It's best for photographs or images with lots of colors. JPEGs can be compressed considerably, which can result in a faster load time.
- PNG: It's ideal for images that require transparency and higher quality. PNGs are usually larger than JPEGs and should be used sparingly.
- SVG: Ideal for vector graphics as they are resolution-independent and typically smaller in file size.
- WebP: A modern image format that provides superior lossless and lossy compression for images on the web.
Picture element
The <picture> HTML element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.
The browser will consider each child <source> element and choose the best match among them. If no matches are found or the browser doesn't support the <picture> element, the URL of the <img> element's src attribute is selected. The selected image is then presented in the space occupied by the <img> element.
<picture>
<source srcset="/media/some-image-320.png" media="(orientation: portrait)" />
<img src="/media/some-image.png" alt="" />
</picture>
Audio
Audio content can be embedded using the <audio> element. It allows you to provide audio files playable directly on your webpages.
Example:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
In this example, the <audio> element contains one or more <source> elements specifying the audio source URL or file path and the corresponding MIME type. The controls attribute adds playback controls to the audio player. The text between the opening and closing <audio> tags serves as a fallback message for browsers that do not support the <audio> element.
Video
Video content can be embedded using the <video> element. It allows you to provide video files playable directly on your webpages.
Example:
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
In this example, the <video> element contains one or more <source> elements specifying the video source URL or file path and the corresponding MIME type. The controls attribute adds playback controls to the video player. The text between the opening and closing <video> tags serves as a fallback message for browsers that do not support the <video> element.
SVG’s
SVGs, or Scalable Vector Graphics, are used to include vector-based images in your HTML document. They are resolution-independent and can scale without loss of quality, which makes them ideal for graphics like logos or icons.
<svg width="50" height="50">
<circle cx="25" cy="25" r="20" stroke="black" stroke-width="3" fill="red" />
</svg>
Iframes
An iframe is used to embed another HTML document within the current one. You can use this to include content from another website, like a YouTube video or a map from Google Maps.
<iframe src="https://www.youtube.com/embed/ScMzIvxBSi4"
title="YouTube video"
width="600"
height="400">
</iframe>
Enhancing Accessibility
When using media elements, it's important to consider accessibility. Provide meaningful alternative text (alt) for images to describe their content to users who rely on screen readers or when the image cannot be displayed. For video and audio content, include captions, transcripts, or audio descriptions to make them accessible to users with hearing impairments.
Example:
<img src="https://placehold.co/600x400"
alt="Description of the image"
title="Additional information about the image"/>
In this example, the alt attribute provides alternative text for the image, while the title attribute provides additional information or a tooltip about the image.
By incorporating images, audio, and video using HTML media elements, you can create engaging and interactive web pages.
Congratulations on learning about HTML media elements! In the next lecture, we'll explore HTML 5 semantic elements and how they contribute to the structure and semantics of web pages.
Continue practicing and experimenting with media elements to expand your skills in web development.
