Media on the Web

Nearly every page we visit has some form of embedded media.

The <img> tag has been around since the early ’90s and is one of the foundational elements of HTML.

HTML5 introduced new features, specifications, and elements, like the <video> and <audio> elements. As their names imply, these elements are intended to provide multimedia functionality to web pages. With these new specs, one of the W3 Consortium’s stated goals was to address multimedia to “make video and audio first-class citizens in the Open Web.”

As with all stages in web design, it is important to keep a well-organized media directory. As HTML5 is still in development and being accepted by browsers, we need to provide text or fallback files should the intended media files or elements not be accessible.

Directory Structure

As you’ve been doing with image files, you are encouraged to store media files in a separate subdirectory to keep your site’s directory structure clean. Images generally get their own subdirectory.

The following demonstrates a possible directory structure:

.
├── index.html
├──  images/
│   ├──  photo-1.jpg
│   │    photo-2.jpg
│   └──  movie-poster.png
└──  media/
    ├──  song.mp3
    ├──  song.ogg
    ├──  movie.mp4
    └──  movie.webm

Note: GitHub has a repo limit of 1 GB, which is pretty small when thinking about website media. The next few pages list some options for finding smaller files to use.