HTML Media Elements

Download (.odt) Download (Markdown)

Image

[hook]

src: URL of the image (can be inside the website repo or external source, but keeping image file inside repo is recommended)

alt: Alternative text which is displayed when image can't load (e.g. due to metered Internet connection). It's also used by screen readers (like GNOME's Orca) to determine what the image is about (for blind users).

figure: semantic element to contain image and its caption (optional)

figcaption: image caption which usually includes a short description about the image or a credit to the source of the image (optional)

picture: provide multiple image sources to display one of them based on specified conditions (usually min-width or max-width for specifying viewport width).

source: image source which displays image provided in srcset attribute if condition specified in media attribute is met. Otherwise the condition of the next source is tested. If no conditions are met, source provided in img element will be used. If that last image file can't be displayed either, alt text (This is an image.) will be displayed.

Audio

[hook]

Tries to load the first source. If file type isn't supported by the browser, it tries the next one and so on ("Your browser does not support audio files." is displayed if none of them is supported). HTML supports the following formats: MP3, Wav, Ogg (latter isn't supported by WebKit browsers like Safari or GNOME Web).

controls (optional): adds play/pause and volume buttons

autoplay (optional): automatically starts playing when loaded

Video

[hook]

Works similarly as audio element. HTML supports the following formats: MP4, WebM, Ogg (latter isn't supported by WebKit browsers like Safari or GNOME Web).

controls (optional): adds play/pause, volume and fullscreen buttons

autoplay (optional): automatically starts playing when loaded

muted (optional): video is muted by default (users can still adjust volume if controls attribute is added)

Embedded video

[hook]

You can embed video from most video sharing platforms by chosing the Share option below the video player. You should get an iframe element. Attributes of this element can vary based on the platform (some common ones are src (required), width, height and allowfullscreen).