HTML Course 6. Images and basic multimedia

1. The img Element

The <img> tag is used to embed images in an HTML page. It is a void element (no closing tag) and supports several important attributes:

• src: URL of the image file
• alt: Alternative text for accessibility and when image fails to load
• width / height: Display dimensions in pixels
• loading: Lazy-loading hint (lazy, eager)

Basic example:

    
    
      alt='A scenic mountain view' 
      width='600' 
      height='400'
      loading='lazy'            
    >
  

1.1 Responsive Images with srcset and sizes

The srcset and sizes attributes allow the browser to pick the best image variant depending on screen resolution and viewport width.

Explanation:

• If viewport ≤600px, use a 480px-wide image.
• Otherwise use an 800px-wide image (medium).

1.2 The <picture> Element

For art direction (different crops or file formats), wrap sources in a <picture>:

2. Image Maps

Image maps allow clickable areas within an image using <map> and <area>:

3. Audio Embedding with <audio>

The <audio> element provides native playback controls and can include multiple source formats:

Key attributes:

• controls: display play/pause controls
• autoplay: start automatically (often muted by default)
• loop: restart when ended
• muted: start muted
• preload: auto, metadata, or none

4. Video Embedding with <video>

The <video> element works similarly to audio, with additional attributes:

• poster: URL of an image shown before playback
• width / height: display dimensions

4.1 Accessibility and Subtitles

You can include captions or subtitles using the <track> element:

5. Embedding External Multimedia

To embed content like Flash (obsolete) or other plugins, HTML provides <object> and <embed>, but modern practice favors native <video>, <audio>, or <iframe> for external pages or widgets.

Summary

HTML provides versatile tags for images and multimedia. Key takeaways:

• Use <img> with srcset/sizes or <picture> for responsive art direction.
• Provide meaningful alt text and loading='lazy' for performance.
• Use <audio> and <video> with multiple source formats and fallback content.
• Include <track> for captions to improve accessibility.
• For external content, favor <iframe> over deprecated plugin tags.