HTML Media Elements

Welcome to the lecture on HTML Media Elements. Multimedia content such as images, audio, and video play a vital role in engaging and enriching webpages. 

In this lecture on HTML Media Elements, you'll learn how to incorporate multimedia content such as images, audio, and video into your webpages. You'll explore the <img>, <audio>, <video>, <iframe> and <svg> elements, and understand how to specify sources, control playback, and add accessibility features to media elements.

Desired Outcomes:

By the end of this lecture, you should be able to:

  • Understand the purpose and usage of HTML media elements
  • Insert and display images on your webpages
  • Embed and control audio and video content
  • Enhance accessibility of media elements

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

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>
Video element
Video element

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>
SVG element
SVG element

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>
IFrame element
IFrame element

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"/>
Image element with placeholder image
Image element with placeholder 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.

-75%

Time remaining:
days 00: 00: 00

Learn to code HTML & CSS

From Zero to Hero

Check out this course on Udemy, now at 75% off! Inside this interactive course, I will teach you how to develop websites from scratch moving from beginner to advanced concepts. I take time to explain every detail and finish off by building some real-world websites.

HTML & CSS: From Zero to Hero
Learn to code HTML & CSS

-75%

Time remaining:
days 00: 00: 00

Learn to code JavaScript & jQuery

From Zero to Hero

Check out this course on Udemy, now at 75% off! Inside this interactive course, I will teach you how to develop components from scratch moving from beginner to advanced concepts. I take time to explain every detail and finish off by building some real-world reusable components.

JavaScript & jQuery: From Zero to Hero
Learn to code JavaScript & jQuery

-75%

Time remaining:
days 00: 00: 00

Learn Frontend Web Development

From Zero to Hero

Check out this course on Udemy, now at 75% off! A bundle of the previous two courses. Inside this interactive course, I will teach you how to develop websites from scratch moving from beginner to advanced concepts. I take time to explain every detail and finish off by building some real-world websites.

Frontend Web Development: From Zero to Hero
Learn Frontend Web Development