Image, Media, and Embedded Content Attributes

Image, Media, and Embedded Content Attributes

Media elements often depend heavily on attributes. This chapter groups the attributes used with images, audio, video, picture sources, and embedded content.

Image Attributes

Tag:

  • <img>

Important attributes:

  • src
  • alt
  • width
  • height
  • loading
  • srcset
  • sizes
  • decoding

Possible loading values:

  • lazy
  • eager

Possible decoding values:

  • auto
  • sync
  • async

Figure-Related Tags

Tags:

  • <figure>
  • <figcaption>

These usually rely mostly on global attributes, but they are valuable when pairing media with descriptions.

Audio and Video Attributes

Tags:

  • <audio>
  • <video>

Important attributes:

  • src
  • controls
  • autoplay
  • muted
  • loop
  • preload
  • poster for <video>
  • playsinline for <video>

Possible preload values:

  • none
  • metadata
  • auto

Source and Track Attributes

Tags:

  • <source>
  • <track>

Important attributes:

  • src
  • type
  • media
  • srcset
  • kind
  • srclang
  • label
  • default

Possible kind values on <track>:

  • captions
  • subtitles
  • descriptions
  • chapters
  • metadata

Embedded Content Tags

Tags:

  • <iframe>
  • <embed>
  • <object>

Important <iframe> attributes:

  • src
  • title
  • width
  • height
  • loading
  • allow
  • sandbox
  • referrerpolicy

Common loading values:

  • lazy
  • eager

Example:

<iframe
    src="https://example.com/embed"
    title="Map preview"
    width="600"
    height="400"
    loading="lazy"
    sandbox="allow-scripts allow-same-origin">
</iframe>

Why These Attributes Matter

They affect:

  • performance
  • accessibility
  • responsive behavior
  • browser compatibility
  • security
PreviousNext Chapter