This section covers adding images, videos and audio to a HTML page and making them resize for different screen/window sizes.

Images

The <img> tag is used to display one, for example dog.jpg:

<img src="dog.jpg" alt="A dog standing on grass">

It has two attributes, src which specifies the location of the image and alt which describes what the image shows. The alt attribute is used if the image cannot be loaded and by screen reading software for people with impaired vision.

<img src="[image url]" alt="[summary of what is displayed]">

The format of [image url] is the same as for hyperlinks. To display an image dog.jpg, located in the same directory as the HTML file you would write:

Videos

This uses the video tag, it is similar to the img tag, but uses src to refer to a video:

<video src="dog.mp4"></video>

The tag needs to be closed as it can contain some more details about the video, including subtitles, tracks and different versions of the video for different devices.
To provide visible controls for the video (play, pause, fullscreen), add the controls attribute.

<video src="dog.mp4" controls></video>

To cause the video to play as soon as it is loaded, add the “autoplay” attribute. The attribute “loop” sets the video to play continuously and “muted” mutes any sound.

Sizing

The size of the videos and images is set by two items. Their resolution and the height and width attributes on the specific tags. When one of height or width is omitted it sets the omitted one automatically, maintaining aspect ratio.
They are defined in pixels. The example following sets the “dog.jpg” image to be 150 pixels tall.

<img src="dog.jpg" height=150>

Audio

Use the audio tag. Like the video tag it also supports the attributes controls, loop, muted and autoplay. The location of the audio is set using the src attribute.
The following plays some sound automatically and replays it continuously. It also needs to be closed like video:

<audio src="dog.mp3" autoplay loop></audio>

Resizing

If you resize your browser window you will notice that the videos and images don’t shrink to fit. This is because it always displays them at their full resolution (or the size set). Having it resize to fit the window is done with CSS.
This is done by setting the property max-width for the img/video tags to 100%. The this is a percentage of the page’s width. The maximum width can also be done in pixels, px.
This specifies the maximum permitted width. To specify a specific width use the width property. It supports the same measurements.
The benefit of using max-width compared to width is that a smaller image/video is not enlarged, making its pixels visible, but larger images/videos are shrunk to meet the requirement.
To force graphics to 50% of the page width, set width to 50%. Alternatively to limit graphics to 50% of the page width use max-width. An equivalent to max-width, min-width exists which sets the minimum width of an image/video.
This results in the following CSS:

img {
    max-width: 100%;
}
video {
    max-width: 100%;
}

CSS classes could be used to style different types of images differently, e.g. thumbnails and full-size images.

img.thumbnail {
    max-width: 10%;
}
img.full-size {
    max-width: 100% /* Limits width to 100% of the page */
}
img.abs-size {
    width: 250px; /* Sets width to 250px */
}

Any attributes on the images/videos will be overridden by the CSS.

Multiple tags, same properties

In the example for images and videos the property where max-width was set to 100% was duplicated. This is unnecessary and the specifiers (tag names and classes) can be separated by a comma to apply the enclosed properties to all of them:

img, video {
    max-width: 100%;
}

In general:

[specifier 1],
[specifier 2],
[specifier 3],
[...] {
    [properties]
}

Is the same as:

[specifier 1] {
    [properties]
}
[specifier 2] {
    [properties]
}
[specifier 3] {
    [properties]
}
[repeat for further specifiers] {
    [properties]
}