Multimedia is very important when designing a web page, especially in this technological day and age. There are many tricks that can be used when adding multimedia to a page that YouTube, Google, Hulu, Netflix, and many other large companies use to draw in their viewers. They can use data mining to enhance the user's experience based on videos that they have watched. We won't be going that deep but remember that is important to include a proper mixture of styles and multimedia throughout your site.

Below is a list of different tags that can be used for multimedia:

Tag Definition
<audio> Configures an audio control native to the browser.
<button> Configures a button (can be used for multimedia or other elements.
<embed> Plug-in integration (such as Adobe Flash Player)
<iframe> Configures an inline frame. (used by YouTube for embedding videos, possibly other sites)
<img> Configures an image.
<map> Configures an image map.
<video> Configures a video control native to the browser.

(Felke-Morris, Ed D., 2016, p. 402)

These are not all of the different options but they are some of the most used ways to display multimedia on a webpage. Another aspect to remember is that not all file types are accepted by browsers, this is due to the types of Plug-ins, Containers, and Codecs that are installed in the browser automatically or manually. Below are lists of both common audio and video file types.

Common Audio File Types
  • .wav
  • .aiff or .aif
  • .mid
  • .au
  • .mp3
  • .ogg
  • .m4a
Common Video File Types
  • .mov
  • .avi
  • .flv
  • .wmv
  • .mpg
  • .m4v and mp4
  • .3gp
  • .ogv or .ogg
  • .webm

(Felke-Morris, Ed D., 2016, p. 350)

It is important to try to stick to these formats so that you know that a large number of devices can use them. Some of these formats are better than others due to compatibility not just within the browser but within the OS itself.

Also another issue that comes into placing multimedia, whether it be images, videos, or audio, is going to be the sizing and location of the multimedia itself. Some images are huge and not only take a long time to load, but if not properly formatted can take up a large portion of the webpage itself, if not all of it. Ensure that the src element is correct and that you set the width, padding, and height correctly. There are many different elements for each type of multimedia, most are set using CSS, that need to be formatted properly to ensure that your web page appears correctly, is not distracting, and that you are not clashing with the color scheme.