What Is Multimedia Embedding in HTML?
HTML allows for embedding the following type of multimedia:
audio files, and
vector graphics, and
objects (e.g. PDF documents).
To embed a semantically important image on an HTML page the
img element should be used.
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
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:
alternative text) attribute i.e. a description of the image,
srcto point to a semantically meaningful relative path or absolute URL (
images/horses/roach.jpgis better than
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
<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.
To embed a video use the
video element. The video's data source is indicated in 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.
To embed an audio file use the
audio element. The audio file's data source is indicated in 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>
audio element's optional attributes are
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
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:
svgelement (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>
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
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>