While some websites like blogs cater to readers of text content, others like YouTube and Netflix get visitors because of their video content. Video content is a more entertaining and passive kind of multimedia. Yet, even plain written text content can be enhanced with audio, video, and images. Meaning, these different forms of multimedia can be combined together to make sleek, customized web experiences for your visitors and users. Making a table of images can create a picture gallery. An ordered list of music files can create a soundtrack or album for sale on your website. Before creating these more advanced digital experiences, it’s necessary to first start with the fundamental multimedia tags in HTML.

For a video overview of the content in this article, see:

Show pictures, audio, and videos with the help of HTML5 tags

Embedding images into web pages has been around since the early days of the web. Audio and video files were not natively supported until HTML5 was released, though. Older websites had to use flash for showing video and greater levels of interactivity. Now, with modern web standards in place, web based languages like HTML, CSS, and JavaScript are becoming the leaders in cross-platform experiences, including mobile apps, virtual reality (VR) and augmented reality (AR) applications.

The beginning of this form of multimedia content started with a simple image (<img />) tag.

Images

To add images to your web page or application, use the img tag in your HTML. An example of how to use it is shown below:

<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="picture of a brown and white mixed tabby cat with green eyes" />

which will show the following image:

Notice three things from the block of code above:

1. The source of the above image, represented by the src attribute of the image tag, refers to an external site. Sometimes you may want to package your own images if you have the rights to use them. This prevents situations where the original image’s URL changes or is no longer available from the provider. Visitors may be put off by missing images in your content.

2. The image tag itself is a self-closing tag, represented by the way it ends in /> rather than its own closing tag of </img>. This means that it’s not possible to add additional content inside of an image tag. The image itself is the content.

3. The second attribute included in the image tag is the alt text, which is useful for screen readers and search engines to recognize the content of the image. Although not required, it’s highly recommended to add this attribute to all of your image tags.

Audio

Although audio is a niche tag to use, it can be useful for podcasts, music, and increasing the accessibility of your written content by making it natively available for people with poor vision. The biggest benefit of using audio is that it’s a great way to stand out without straining your users’ network. It’s easily downloadable and accessible regardless of your connection strength. Just be sure to allow users to opt-in to your audio experience. Autoplaying music and movies can catch your users off guard if they have their volume turned up too high.

The audio tag can support a few different experiences based on the attributes you pass into it. For example, adding the controls attribute shows play and pause controls with the ability to select where to go in the audio track. Adding the loop attribute will repeat the soundtrack once it finishes. The <audio> tag is a new HTML5 tag, though, so browser support for audio file types varies depending on the browser that the user is using. One of the biggest challenges of professional web developers is compatibility across different web browsers. It is web development’s greatest advantage and biggest challenge at the same time. As a result, like with the audio tag, it’s often necessary to have workarounds in place for different browsers. For example, with the audio tag, Edge and Safari can only play MP3 files whereas other browsers play OGG files. So, in order to host audio files in a way that is compatible across all browsers, you must have two audio files: one .ogg file and another .mp3 file. Then specify their with a self-closing <source /> tag, like so:

<audio controls loop>
  <source src="Moonlight_Sonata.mp3" type="audio/mpeg" />
  <source src="Moonlight_Sonata.ogg" type="audio/ogg" />
  Your browser doesn't support audio files
</audio>

The files that are being referenced need to be stored in the same folder as the index.html file that you are writing the code in. As you can see, embedding audio is a little trickier. However, if you did this properly, you’ll see a music player that is compatible with your current browser like below.

Sometimes it helps to have alternative ways to embed audio. When deploying your website to The Internet, you as the host has to pay a small fee each time someone downloads something from you or visits your website. Either that or a monthly maintenance fee for keeping your website running. Although these costs have gone down over time and deploying a website today costs no more than a few dollars per month, it helps to know how to save money while still giving your users a consistent experience. With audio files, this is often accomplished through third party services that allow you to embed your HTML code as a special tag called an <iframe>. An iframe tag allows you to embed a piece of another website directly into yours. It’ll bring the styling, files, and other resources hosted by that page into yours and costs you nothing extra. An example of a good music service like this is BandCamp. Below is an <iframe> tag embedded with a song from bandcamp. The code for the iframe is customizable on their website.

<iframe style="border: 0; width: 100%; height: 42px;" src="https://bandcamp.com/EmbeddedPlayer/album=1539936766/size=small/bgcol=333333/linkcol=4ec5ec/track=1003880048/transparent=true/" seamless><a href="http://existstrategy.bandcamp.com/album/horizon-aura">Horizon Aura by Exist Strategy</a></iframe>

Adding this code to your HTML (make sure you’re online) will let you play the following song.

Video

Video is one of the more controversial tags to use in your website because it puts a greater strain on the user’s network. Outside of entertainment purposes, some users may feel that the extra slowness added by a video does not give a good enough experience to visit your page. It’s worth considering this tradeoff and also the extra cost of hosting video on your web page, unless you are fine with YouTube ads in exchange for free hosting.

Depending on your hosting provider, there are two main ways to add videos to your page: the video tag pointing to a hosted file or the iframe tag for directly embedding your video from a hosting provider (YouTube or Vimeo, for example). Due to the streaming costs associated with hosting videos, it’s usually recommended not to host video files directly through your website but to use an external video service like YouTube or Vimeo. If you must insist on hosting your own videos and paying higher hosting fees, you would also have to become proficient in a few other technologies like Amazon Web Services. Better to just stick to YouTube.

Advanced Web Multimedia

This section is both about the future of multimedia as it is an introduction to more advanced practices in web development. The types of multimedia introduced here have only recently begun to be standardized. They are still in their infancy and rapidly changing. To create them requires highly specialized knowledge that takes years to master. Yet, it’s cutting edge and highly powerful. It can be used to make video games and animations—or just enhance existing interactions. Below are some of these advanced multimedia technologies.

Scalable Vector Graphics (SVG)

SVG is the best standardization of vector graphics on web and mobile devices. Vector graphics are different from images. Unlike rasterized images, which have a fixed length and width in their number of pixels, vector images are made of paths and shapes. They can be animated. They can be shaped and reshaped over time based on any visual you want them to represent. The main advantage with vector images compared to raster images is that they look good on any device and screen size without taking up much storage space. Unlike photos, which can appear blurry when they are too small and load slowly if they are too big, vector graphics are built with paths and do not rely on screen size to display properly. As a result, they are currently popular for visualizing data in business applications. However, with the right tools, they will soon be used for highly interactive games and animations.

To create more complex SVG images, you need access to a vector-based illustration software like Adobe Illustrator or Autodesk’s Graphic. These programs can output the file with a .svg extension that can be embedded directly into HTML with the <img /> tag. It’s also possible to embed SVG code directly into HTML, which makes these images a good choice for designing icons.

One of the most powerful capabilities that SVG images have is their ability to be animated with the help of JavaScript and CSS. This is often used when creating data visualizations. Although most of the difficult stuff involving creating interactive games and animations with SVG images needs the help of JavaScript and its libraries, the payoff of learning these once is often worth it just because of the level of interactivity that is possible when combining SVG with JavaScript.

Included below is some sample code written in HTML and SVG that demonstrates how straightforward it is embedding icons into HTML. Note that reading the code won’t make much sense to anyone but SVG files can be exported by vector graphics editors like Illustrator or Inkscape. To change the color of the icons, replace the fill value of the main <path> elements inside the <svg> tag with a custom hexadecimal color like #660044. Full credit for creating these icons goes to Bryn Taylor.

JavaScript and its libraries

I’ve mentioned JavaScript a few times earlier in this article. Although it is a programming language for the web, it touches every aspect of the Web Development ecosystem. There are things you can do with JavaScript that are not possible to do with any other web technology. JavaScript can help you animate SVG paths, communicate with popular websites like Twitter, create personalized widgets for your web app (like a chatroom or a user profile page), among a whole host of other experiences limited only by your imagination.

Libraries are collections of JavaScript code written by other developers that help you accomplish what would normally be very difficult programming tasks. There are JavaScript libraries for almost anything you can imagine needing to do when creating your website or application. There are JavaScript libraries for publishing your web code as a mobile app, for animating existing SVG images, for communicating with data hosted in The Cloud, and so much more.

By using JavaScript and combining it with strokes of originality, you can create multimedia experiences that don’t even exist yet—interactive games, pages that zoom into new pages as you scroll, event timelines that stretch out through time and show human history in an interactive way. This effort of creating something that is truly unique often requires teams of people to work together, similar to creating an A-list movie from scratch. Yet, the payoff could be worth it in the recognition and appreciation given by your users.