FosseryWeb

Image

<img src="image.png" alt="This is an image.">

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>
  <img src="image.png" alt="This is an image.">
  <figcaption>Source: name of website/author</figcaption>
</figure>

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>
  <source media="(min-width: 1025px)" srcset="image-desktop.png">
  <source media="(min-width: 768px)" srcset="image-tablet.png">
  <img src="image-mobile.png" alt="This is an image.">
</picture>

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

<audio controls autoplay>
  <source src="music.wav" type="audio/wav">
  <source src="music.ogg" type="audio/ogg">
  <source src="music.mp3" type="audio/mpeg">
  Your browser does not support audio files.
</audio>

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

<video controls autoplay muted>
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support video files.
</video>

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

<!-- Odysee video -->
<iframe id="odysee-iframe" width="560" height="315"
src="https://odysee.com/$/embed/@fossery-tech:4/foss-alternatives-part-2-browsers:c?r=9EGCQSh17GdNWdGNaYnXPx8qw1dWwmaf"
allowfullscreen></iframe>

<!-- PeerTube video -->
<iframe title="Web Browsers - FOSS Alternatives #2" width="560" height="315"
src="https://tilvids.com/videos/embed/a01792a4-2040-4b9e-ac98-4e347891ee83"
frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups"></iframe>

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).