Multimedia Embedding

Tomasz Bogusz

What Is Multimedia Embedding in HTML?

HTML allows for embedding the following type of multimedia:

  • images,

  • videos,

  • audio files, and

  • vector graphics, and

  • objects (e.g. PDF documents).

Images

Intro

To embed a semantically important image on an HTML page the img element should be used.

The img element's src (stands for source) attribute points to a relative path or an absolute URL with the image data.

<img src="images/horses/roach.jpg">
<img src="https://soundof.it/images/horses/roach.jpg">

It is possible to control an img element dimensions with width and height HTML attributes and/or CSS.

Semanticity of Images

For robots (such as search engine web crawlers and assistive technologies) optimization it is considered a good practice to:

  • add alt (stands for alternative text) attribute i.e. a description of the image,

  • have src to point to a semantically meaningful relative path or absolute URL (images/horses/roach.jpg is better than dns/ho_ro_10.jpg).

In addition to making the robots life easier the alt attribute is also displayed to the user when there are any problems with downloading the image from its source.

<img
  src="images/horses/roach.jpg"
  alt="A drawing of Roach, the horse of Geralt of Rivia."
>

When an image is semantically important, it is recommended to use img elements over CSS background properties. The CSS background property should only be used for decoration purposes as having no semantic meaning.

Images With Captions

It is often a sound idea to nest an img element within a figure element and support it with a caption using a figcaption element.

<figure>
  <img
    src="images/horses/roach.jpg"
    alt="A drawing of Roach, the horse of Geralt of Rivia."
  >
  <figcaption>
    Roach - Geralt's horse.
  </figcaption>
</figure>

The difference between the figcaption element and alt attribute is that the figcaption element is always visible to the user.

Videos

To embed a video use the video element. The video's data source is indicated in the src attribute.

The controls attribute indicates that the video should be equipped with the native user agent's video controls.

<video
  src="movies/horses/roach.mp4"
  controls
>
</video>

Nowadays, video files are often embedded using third-party's (such as YouTube's) ready-made embedding HTML code.

Audio Files

To embed an audio file use the audio element. The audio file's data source is indicated in the src attribute.

The controls attribute indicates that the audio element should be equipped with the native user agent's audio controls.

<audio
  src="sounds/horses/roach_neighing.mp3"
  controls
>
</video>

The notable audio element's optional attributes are autoplay, loop, and muted.

Scalable Vector Graphics

Scalable vector graphics (SVGs) are rendered by user agents instead of just being served like pre-rendered raster images.

SVGs have two main advantages over raster images:

  • smaller memory size, and

  • scalability (i.e. the ability to be zoomed in without quality loss).

The main disadvantage of SVGs towards raster images is SVGs':

  • limited semanticity as SVGs cannot have descriptive file names, nor alt attributes, and

  • limited support in some user agents like older browsers or email clients.

There are two ways of embedding an SVG file within an HTML document:

  • using img element, or

  • using svg element (so called inline SVG).

<img src="svgs/horses/roach.svg">

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path d="...">
  </path>
</svg>

Objects

The HTML object element represents an external resource to be embedded within an HTML document. The resource type is indicated in the type attribute and the address (a relative path or an absolute URL) to the resource in the data attribute.

The HTML object element is a phrasing element.

PDF documents are often embedded in HTML documents using the object HTML element.

<object
  type="application/pdf"
  data="https://soundof.it/pdfs/horses/about-roach.pdf"
>
</object>