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 webpages. One of the stated goals for the W3 Consortium with these new specs was to address multimedia in order 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 sub-directory so as to keep the directory structure of your site clean. Images generally get their own sub-directory.

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 20 megabytes, which is pretty small when thinking about website media. The next few pages list some options for finding smaller files to use.