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