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

Images

Adding Images in HTML The 5-Part Image Element 1. The <img> Tag 2. Source 3. Alternative Text 4. Title 5. Width and Height Review: The Image Element Formats and Browser Support 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

2. Source

The <video> element takes a source attribute (src=""), which accepts a URL (relative or absolute) to a single video file.

It is always recommended you have at least two versions of a video file, and should use the <source> element instead, which is described below.

Single-Source

Multiple-Source

You can use multiple source elements, which specifies to the browser that the video is available in multiple formats. This is the <source> element, and again, it is used instead of the src="" attribute of a <video> element.

Note Due to a bug on the iPad, you should provide the MP4 video as the first format.

Types

After the source, you’ll notice the type attribute.

Use the type="" attribute to tell the browser what format the video is in. Otherwise, it will download some of the video to see if it can play the file, find that it cannot, and then try the next one until it has exhausted all options or found a valid file format. This takes time and bandwidth!

The codec that was used to encode the video is supplied within the type attribute, following the video file type, separated by a semicolon (;). Here are the types and codecs for the more popular video filetypes:

MP4 - type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'
WebM -type='video/webm; codecs="vp8.0, vorbis"'
OGG - type='video/ogg; codecs="theora, vorbis"'