The Building Blocks of Pages

Page Structure and Extra Markup Identifying with ids Styling with Classes Grouping with Divs Sectioning with Spans Building a Page (Step-by-Step) TODO

Iframes

The 3-Part iframe Element 1. The <iframe> Tags 2. Source 3. Width and Height Review: The iframe Element Websites in the iframe Element Maps in the iframe Element Media in the iframe Element TODO

The Meta Element

The Meta Element Character Set Attribute Description Attribute Author Attribute Keywords Attribute Viewport Element Review: Meta Elements TODO

Escape Characters

Solving Conflicts with Escape Characters Escape Character Names Escape Character Codes Common Escape Characters TODO

Media Management

Media on the Web Sourcing Images Sourcing Video Sourcing Audio Optimizing for the Web Media Hosting and Storage TODO

Video

Adding Video in HTML The 5-Part Video Element 1. The <video> Tags 2. Source 3. Poster 4. Width and Height 5. Other Attributes Review: The Video Element Formats and Browser Support TODO

Audio

Adding Audio in HTML The 3-Part Audio Element 1. The <audio> Tags 2. Source 3. Other Attributes Review: The Audio Element Formats and Browser Support TODO

Formats and Browser Support

Even more so than with video, audio should always be offered in multiple formats.

Audio Formats

Best included self-hosted audio formats:

MP3: Good quality for file size, but proprietary.
OGG Audio: Open-sourced.
Wav*: Lossless, but larger files.

There are many file formats that audio files can be rendered to. The most popular and well known is likely .mp3.

This is because the compression achieved creates smaller file sizes without comprising audio quality too greatly. However, .mp3 is technically a proprietary format, and as such, some people are hesitant to use it.

If you find yourself working for an audio-based client, they may also have strong opinions about what file types they want prioritized. For example, they may want to use .ogg as this is an open-source based audio format.

*Your clients may also insist that you include lossless or uncompressed audio file formats such as .wav, .aiff, or .flac.

“Not Supported!”

Notice that the <audio> element is not an “empty element” and requires both an opening and closing tag. This serves a number of purposes, but the most important is that the developer can include content between the tags that will be displayed or called in the case that an end-user’s browser does not support the <audio> element or audio file format.

You should always include extra markup inside the tags for this potential case.

HTML

<audio src="#" preload controls>
  <p>A quick description of the song...</p>
  <p>Sorry, your browser does not support our audio format.</p>
</audio>